flexing-skeleton.css v1.0.35

flexing-skeleton.css

A tiny css framework with a mix between the Bootstrap and Skeleton grid systems that uses flexbox. It happily uses the beautiful Inter font along with Roboto Mono.

Installation

To get started, just copy the main stylesheet from the dist folder and include it in your project. Alternatively, you can work with the scss files: Run the command npm install to install the packages required, then use the following commands in your terminal to get started:

• npm run scss:watch-nested to watch changes and automatically compile them to dist/flexing-skeleton.css.
• npm run scss:watch-compressed to watch changes and automatically compile them to dist/flexing-skeleton.min.css.
• npm run scss:compile to compile the scss to dist/flexing-skeleton.css and dist/flexing-skeleton.min.css.

The grid system

• The grid system uses a .container class to add vertical spacing around your content.
• Inside, you can add .rows with columns inside as shown in the example below.
• Use .row.without-gutters to remove the gutters between columns.
• You can use .automatic.columns to make the columns spread evenly throughout the row, or specify the column width from one to twelve by using a class like .five.columns. Just make sure the columns in a row are direct children of it and add up to twelve.
• To top it all off, you can offset your columns by adding a class like .offset-by-three on the column class.

An example that makes you realize it's mostly the same as skeleton.css

<div class="container">
  <div class="row">
    <div class="one column">
      <!-- Some interesting words -->
    </div>

    <div class="four columns offset-by-four">
      <!-- Some more interesting words -->
    </div>
  </div>

  <div class="row without-gutters">
    <div class="automatic columns">
      <!-- Even more of your interesting words -->
    </div>

    <div class="automatic columns">
      <!-- Maybe add an interesting image -->
    </div>

    <div class="automatic columns">
      <!-- Or maybe link to some more interesting stuff -->
    </div>
  </div>
</div>

Code by Rien Stenekes