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.
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.
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.
This is an example of stylizing tables visible on desktops
Look Ma! no classes here in tables! Just plain html.You can download CSSkel from Github or link it directly with:
<link rel="stylesheet" href="//csskel.com/1.0.4/csskel.min.css">
Yup. Thats all! That's the point. A single simple link and you're done! (CDN kindly donated by Cloudflare)
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;
}
Just because your user choose dark mode for her operating system it doesn't mean she wants to see your website in dark mode too. CSSkel detects current color scheme selected by the user using:
@media (prefers-color-scheme: dark){.....}
but if your design is willing to react to user's choice and let CSSkel take care of the color scheme you must enable it using "enable-dark-mode" class in html tag, i.e:
<html lang="en" class="enable-dark-mode">
Otherwise, CSSkel will ignore the dark mode, wich is the prefered behavor in most cases.
If you are visiting this site with your OS dark mode activated, you will see the dark mode scheme
of CSSkel in action only because I added "enable-dark-mode" class to <html>.
Go ahead.. go see the
source!
You can easily use javascript to remove or add "enable-dark-mode" class and let the user choose te theme she really prefers.
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:
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.
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
This are all the possible column divisions in CSSkel using cols:6
cols:5
cols:4 cols:3 orcols:2.
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>
Softcols: (Ver. +1.0.4) Due to the concept of a
solid grid system required in many circumstances, default columns
in CSSKel are forced to have the same
consistent proportional width in a similar way a table has consistently aligned
it's cells in every row.
But on other situations as on liquid designs the desired behavior is that
the column width adapt itself to it's content in case it is wider than it's
container default fixed column width, i.e. an image or a table.
Wes Bos shared a visual description of the different possible behavior
of column width.
From version 1.0.3 col divisions are forced to respect the size of the
column in favor of a solid structure of CSSkel.
Anyway, from version 1.0.4 you can acces this relaxed width columns
using the class softcols:xx instead of the usual cols:xx
to generate more flexible structures.
Actually, the opening example on this page use softcols. Notice
that the table in third column is a little bit wider stealing space of
it's sibiling columns, otherwise the table will overflow the
hard column. Sometimes you want that... some times you don't!
12 Columns available: From version 1.0.3 you also have up to 12 divisions, so
class="grid-container cols:12"
or cols:11 are absolutely valid.
This odd divisions in combination with column spans turned out to be useful
while creating unusual widths on interfaces.
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.
<h1> 50rem<h2> 42rem<h3> 36rem<h4> 30rem<h5> 24rem<h6> 15remButtons 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.
<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 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% -->
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>
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.2/ribs.min.css">