OrbitCSS overview

A rundown on how it all works

CSS only framework

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.

OrbitCSS does not include any JavaScript. With the amount of JS libraries and frameworks on the market today, it doesn’t make much sense to force our JS preferences upon you. While several elements can be enhanced via JavaScript, we do not provide this functionality for you, and OrbitCSS is intended to integrate with your existing JS environment, whatever that may be.

Of course, if you are new to web development and need a hand with JavaScript, do reach out to us or check out the basic-level examples in the documentation.

The syntax

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:

Blocks and elements
Modifiers

Elements

An element is essentially a component, or object on the webpage you are building. We define elements via custom classes and the HTML class attribute. For example, by adding the button class to a regular HTML <button> tag we can create an OrbitCSS button element.

A regular HTML button.

The same button with the button class.

<!-- A regular HTML button -->
<button>I'm a HTML button</button>

<!-- An OrbitCSS button -->
<button class="button">I'm a HTML button</button>
Copy

In some cases, a custom class is not required to transform an existing HTML tag into an element. For example the <input> 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">
Copy

Blocks

Blocks or block-elements can be considered a container of sorts for a collection of related components. Take the card element for example. The card 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 card__. The elements for a card are:

card__header
card__image
card__content
card__footer

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>
Copy

Modifiers

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 has-no-padding modifier. A modifier typically consists of a verb has- followed by the change no-padding.

<!-- Removes the padding from a grid column -->
<div class="column has-no-padding"></div>
Copy

Most modifiers will either begin with is- or has- depending on the context. You'll find a number of global modifiers as well as module specific modifiers.

Styling a button with 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 class="button is-primary">
  Button
</button>
Copy

We can use any color from color palette to quickly color the button. For example to use the primary color we would use the is-primary modifier.

<button class="button is-primary">
  Button
</button>
Copy

We can now give the button an outlined appearance with the is-outline modifier.

<button class="button is-primary is-outline">
  Button
</button>
Copy

Some modifiers like the is-loading modifier do more than just tweak the styling.

<button class="button is-primary is-outline is-loading">
  Button
</button>
Copy

Modular install

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.

base\_functions.scss
base\_colors.scss
base\_general.scss

<!-- 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"
Copy

← Installation

Customization →