OrbitCSS is a CSS only framework. This means that the entire framework comes down to a single compiled CSS file that provides a basic structure and styling for building front-end user interfaces.
The OrbitCSS syntax is designed to be easy to read and remember. Obscure syntax often leads to confusing, frustrating, and slow development.
The syntax is made up of two core components:
An element is essentially a component, or object on the webpage you are building. We define elements via custom classes and the HTML
attribute. For example, by adding the
class to a regular HTML
tag we can create an OrbitCSS button element.
A regular HTML button.
The same button with the
<!-- A regular HTML button --> <button>I'm a HTML button</button> <!-- An OrbitCSS button --> <button class="button">I'm a HTML button</button>
In some cases, a custom class is not required to transform an existing HTML tag into an element. For example the
tag will always be styled as per the OrbitCSS framework. The reason for this comes down to speed in development and to prevent tags that are otherwise often content-full from becoming even more bloated.
<!-- No custom class is required --> <input type="text" placeholder="Custom styled text input">
Blocks or block-elements can be considered a container of sorts for a collection of related components. Take the card element for example. The
class does nothing more than defining a container with some basic styling. We need to add our individual components, which are prefixed by the block name and two underscores
. The elements for a card are:
While all related, these components can exist on their own with or without the presence of each other. This allows you to make a card with as many or as few of these components as you need.
<!-- A card element with an image and text component --> <div class="card"> <div class="card__image"> ... </div> <div class="card__content"> ... </div> </div>
Modifiers define custom styling or overrides for an element. These help to remove the need for writing custom or inline CSS. For example we can remove the padding from any element by using the
modifier. A modifier typically consists of a verb
followed by the change
<!-- Removes the padding from a grid column --> <div class="column has-no-padding"></div>
Most modifiers will either begin with
depending on the context. You'll find a number of global modifiers as well as module specific modifiers.
This quick example will demonstrate the power and ease of use of modifier classes.
We'll start with a regular button using the
<button class="button"> Button </button>
We can use any color from color palette to quickly color the button. For example to use the primary color we would use the
<button class="button is-primary"> Button </button>
We can now give the button an outlined appearance with the
<button class="button is-primary is-outline"> Button </button>
Some modifiers like the
modifier do more than just tweak the styling.
<button class="button is-primary is-outline is-loading"> Button </button>
Sometimes you may only want to install specific modules from the OrbitCSS framework. You can do this by importing only the parts you want. The caveat is that the following three base modules are always required.
<!-- Import just the Grid module --> @import "orbitcss/scss/base/_colors.scss" @import "orbitcss/scss/base/_functions.scss" @import "orbitcss/scss/base/_general.scss" @import "orbitcss/scss/layout/_grid.scss"