A modern CSS framework based on Flexbox

Latest version: 1.1.1
Free to Use

Free and open source

Responsive

Build beautiful responsive layouts

Customizable

Easily create your own look with Sass


Quick Start

Install with NPM
npm install orbitcssCopy
CDN Link
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/orbitcss/css/orbit.min.css">Copy

Check out the Getting Started page for full installation.

Kickstart your next project with these HTML example pages

eCommerce homepage
Pricing cards
Simple login page

Flexbox powered

OrbitCSS is built around the Flexbox CSS module, making it easier to design flexible, responsive layouts. Flexbox is your new best friend and will change the way you build webpages!

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
Copy

Fully customizable

You can effortlessly overhaul the entire look and feel in a matter of minutes using Sass variables.

OrbitCSS default

Some wonderful photos of ducks I took at the park

by Rhys Hall September 29, 2019 1000


Custom styling

Some wonderful photos of ducks I took at the park

by Rhys Hall September 29, 2019 1000

// Import a font
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Raleway');

// Set global variables
$body-font-family: 'Montserrat', sans-serif;
$title-font-family: 'Raleway', sans-serif;

// Set theme colors
$primary: #3582ff;
$black: #2f2f2f;

// Override button radius
$button-radius: 20px;

// Override card radius and heading
$card-radius: 20px;
$card-header-background: $black;
$card-header-color: $white;
Copy

Build beautiful and responsive websites with OrbitCSS.