Vector
Vectors are perpendicular lines rendered across orbits. They resemble minute marks in an analog watch, but can be adapted to create connector lines, for instance. Elements with .vector are placed along an .orbit or .orbit-* path. The runtime supports more than 60 vectors per orbit; the 60-item limit applies only to the CSS-only fallback.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Look and feel
Section titled “Look and feel”Vectors can be customized by adding CSS border and background properties.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjust Vector size
Section titled “Adjust Vector size”Each .vector has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the vectors to shrink by a specified percentage.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing vector to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjusting radial layout
Section titled “Adjusting radial layout”Arbitrary vector angle.
Section titled “Arbitrary vector angle.”.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Relative vector orbital position
Section titled “Relative vector orbital position”By default, .vector is positioned in the middle of orbit path. To change that, there some CSS utilities:
.inner-orbit: To place an.vector just below its orbit.
.outer-orbit: To place .vector just above its orbit.
.quarter-inner-orbit: To place .vector a 25% into its orbit.
.quarter-outer-orbit: To place .vector a 25% outer its orbit.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.