CSSkel

A light CSS boilerplate

What is this?

CSSkel is a light CSS boilerplate using most updated CSS standards and resources including grids and variables packaged in a light 12k standard css stylesheet.

No need of pre-processors, nor javascripts. Pure CSS to get a basic start your web projects.

It's based on Skeleton and Barebones and inherits their approach to be a lighter css starting point rather han a fully loaded UI framework, ready to start your building process with enought resources to be practical, but also with enought freedom to stop looking like everybody else.

Is this for you?

If you design websites or projects from the ground you know how dirty your code may end up using the "hacks" of full flaged frameworks out there.

After 200 or 300 lines full of "col-md-6 offset-md-3 mt-20" your code start to be unmeaningful and reiterative, full of extra <divs> only required to set how your page looks.
More than trying a better separation between html code and look & feel, CSSkel tries to get rid of such unnecesary markdown just because a cleaner code is easier to mantain... and faster!

So why don't you sniff a little in the code of this page? If you like what you see, maybe CSSkel is right for you.

3 cols and an image

CSS is now more powerfull than ever, reducing dependency on javascript for responsive tasks as nav menus or column re-organization at different resolutions. CSSkel does not require but a simple link to a css file to do all its job, as you can see in this page.

With the CSS grid model, you can finaly get rid of the 12 column model that makes a lot of projects look the same nowadays.

The good news is that you can use CSSskel without having to get deep inside vars of full grid model, as a satarting point or for a full production project.

This is a paragraph that uses system-font class, aimed to user interfaces and technical documentation. It renders flawlessly using the device's font.

Use it in a single paragraph, on a section or in the body tag for the entire document if you are desingning an admin template.

Main objetives
Tables

This is an example of stylizing tables visible on desktops

Name Age Sex Location
Dave Gamache 26 Male San Francisco
Dwayne Johnson 42 Male Hayward
Look Ma! no classes here in tables! Just plain html.

Interesting links

A few scripts that you can use if you miss Bootstrap functionality and scripts:
EasyTabs Tabs that you can stilize at will with CSS
Dynatable Searchable and sortable tables
AVGRUND for modals and alerts.
DATATABLES advanced interaction controls to your HTML tables.
Usage

You can download CSSkel from Github or link it directly with:


<link rel="stylesheet" href="//csskel.com/1.0.2/csskel.min.css">
            

Yup. Thats all! That's the point. A single simple link and you're done! (CDN kindly donated by Cloudflare)

Themes

This is a very interesting and powerfull concept. You can change the entire theme of your layout just by adding your own :root variables after loading csskel.css. Without any preprocessor like SASS or LESS you can just re-redefine the variables related to colors and shades wthout ever touching the rest of the css code.

The default theme maintains the color choices from Skeleton, although a few very similar colors were consolidated. Colors are based from a theme hue, which defines the normal text color. Additional richer and softer text colors are then defined.

The choice of those keywords is to prevent confusion with light vs dark themes. For example. in a light background theme, softer would mean a lighter color than normal, ie less contrast with the background, but if the base hue is dark, softer would be darker to decrease the contrast.

You can design the colors you want in your theme using any HSL Calculator online.

                
:root {
    /* default theme: light background, dark text, blue accent */
    --theme-hue: 0;             /* From 0 to 360 0=red but depends on theme-light to reveal the color*/
    --theme-light: 0%;          /* make it 40% to make hue color subtile visible, keep it 0 for black-gray colors*/
    --accent-hue: 194;          /* blue */

    --text-color-richer: hsl(var(--theme-hue),var(--theme-light), 5%);      /* #0d0d0d	*/
    --text-color-normal: hsl(var(--theme-hue),var(--theme-light), 13%);     /* #222222 	text color; button:hover:focus color */
    --text-color-softer: hsl(var(--theme-hue),var(--theme-light), 33%);     /* #555555 	button color; button:hover border */

    --background-color: white;                              /* transparent body background; textarea,select background */

    --button-primary-color: white;

}
                
            
Grids

CSSkel is a fork of a fork ([skeleton]->[barebones]->[CSSkel]), so it shares the "old" concept of "columns" but now using the flexible grids css structure, now fully soported by almost any browser.

While barebones do an excelent job implementing column divisions of rows, CSSkel added the concept of column spans much in the way we used to span columns back in the old days of tables used for layouts.

It might sound as a step back in the grids model at first, but the logic is this: If you need a complex responsive grid structure please forget of any framework or boilerplate (including this one) and do it directly with native css's grids coding. You can use excelent tools as Layoutit's grid generator to create the barebone skeleton of your design and then use CSSkel as a set of helper classes.

This is how easy and fast you can create a 3 column model:

<div class="grid-container"> defaults as 3 columns grid:

Uno
Dos
Tres

You can modify the number of columns using cols:x class, beign x a value from 2 to 6 columns.
Using more than 6 columns isn't usable at all in terms of web design so you can finaly get rid of the 12 column model we set back in the old days of Blueprint CSS. In those days we defined a 24 invisible "columns" as a positioning grid for layers and someone simplifyed the model to 12 visible columns for upcoming frameworks.
Anyhow, such column numbers where used to fine-tune widths and positions of real visible columns and elements but never was the intention to use a 1/24 column nor even a 1/12 column on real desings.

So, to get 5 columns with CSSkel you can simply use: class="grid-container cols:5". Notice how dificult would it be to have such division on any "12/24 cols" based framework.

uno
dos
tres
cuatro
cinco

Notice also the clean html code you need to get the effect; just a wraping div with grid-container class and the next child divs will be rendered as columns without any further classes:

                
       <div class="grid-container cols:5">
           <div>Uno</div>
           <div>Dos</div>
           <div>Tres</div>
           <div>Cuatro</div>
           <div>Cinco</div>
       </div>
                
            

Whenever you overflow the number of columns defined in the wrapping div, extra columns will simply be acomodated below in a new row preserving structure

div one
div two
div three
div four
div five
div six
div seven
div eight

This are all the possible column divisions in CSSkel using cols:6 cols:5 cols:4 cols:3 orcols:2.

six
six
six
six
six
six
five
five
five
five
five
four
four
four
four
three
three
three
two
two

CSSkel can help you make more interesting column sets using column spans. Use colspan:2 colspan:3 colspan:4 or colspan:5 classes in the div/col you want to start the spanning.

                
       <div class="grid-container cols:6">
           <div class="colspan:3">six x 3</div>
           <div>six</div>
           <div>six</div>
           <div>six</div>
       </div>
                
            
class="colspan:3"
six
six
six
four
class="colspan:3"
four
four
class="colspan:2"
five
class="colspan:3"
five

Headers

Header 1
Lorem ipsum dolor

Header 2
Lorem ipsum dolor

Header 3
Lorem ipsum dolor

Header 4
Lorem ipsum dolor

Header 5
Lorem ipsum dolor
Header 6
Lorem ipsum dolor

Typography

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, CSSkel never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

The typography base is Montserrat served by Google, set at 16rem (16px) over a 1.6 line height (24px). Other type basics like anchors, strong, emphasis, and underline are all obviously included.

Headings create a family of distinct sizes each with specific letter-spacing, line-height, and margins.

Heading <h1> 50rem

Heading <h2> 42rem

Heading <h3> 36rem

Heading <h4> 30rem

Heading <h5> 24rem
Heading <h6> 15rem

Buttons

Buttons come in two basic flavors in Barebones. The standard <button> element is plain, whereas the .button-primary button is vibrant and prominent. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.

Anchor button
Anchor button

<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">


<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">


Forms

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

                
<form>
    <div class="grid-container cols:2">
        <div>
            <label for="exampleEmailInput">Your email</label>
            <input class="full-width" type="email" placeholder="[email protected]" id="exampleEmailInput">
        </div>
        <div>
            <label for="exampleRecipientInput">Reason for contacting</label>
            <select class="full-width" id="exampleRecipientInput">
                <option value="Option 1">Questions</option>
                <option value="Option 2">Admiration</option>
                <option value="Option 3">Can I get your number?</option>
            </select>
        </div>
    </div>
    <label for="exampleMessage">Message</label>
    <textarea class="full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
    <div class="grid-container cols:2">
        <div><input class="button-primary" type="submit" value="Submit"></div>
        <div class="align-right">
          <label class="example-send-yourself-copy">
            <input type="checkbox">
            <span class="label-body">Send a copy to yourself</span>
          </label>
        </div>
    </div>
</form>

<!-- Always wrap checkbox and radio inputs in a label and use a <span class="label-body"> inside of it -->
<!-- Note: The class .full-width is just a utility class shorthand for width: 100% -->
                
                
Navbar

Navbars are created easily just by adding nav element with navbar class and include ul with class menu.
Then you will need a checkbox that will act as a switch for showing/hidding hamburguer so it will handle all the responsive versions using a hamburguer menu in small devices without need of javascript.
Please refer to the code of this page's navbar to see how to include your logo and menu options.


<nav class="navbar">
    <div class="nav-container">
        <a href="#top" class="navbar-logo">
            <strong>Your Logo</strong> Here
        </a>
        <input class="menu-btn" type="checkbox" id="menu-btn" />
        <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
        <div class="menu">
            <a href="#work">In Action</a>
            <a href="#usage">Usage</a>
            <a href="#themes">Themes</a>
            <a href="#grids">Grid</a>
            <a href="#contact">Contact</a>
        </div>
    </div>
</nav>

Ribs

Sometimes you simply don't need the "whole enchilada", not the full skeleton but just the ribs.
While taking some projects designed with other frameworks it turned out to be desirable to have access to the grid structure of CSSkel without disturbing the current CSS used in the project.

And that's exactly what ribs is. A shortened version of CSSkel that only includes the grid structure leting out any other CSS definiton, so you can add it to your current design with a ver little probability of disturbing it.

And of course, as everything else in CSSkel is absolutely free and easy to include in your project using:


<link rel="stylesheet" href="//csskel.com/ribs/1.0.1/ribs.min.css">