CSSkel is a lightweight CSS framework that leverages modern CSS standards, including CSS Grid and custom properties, to provide a flexible starting point for web projects. It is inspired by Skeleton and Barebones, focusing on simplicity and minimalism without the overhead of larger frameworks.
To use CSSkel, include the following link in the <head> section of your HTML file:
<link rel="stylesheet" href="//csskel.com/2.1.0/csskel.css">Alternatively, you can download the CSS file from GitHub and host it locally.
Once included, CSSkel provides a set of utility classes and base styles to help you quickly build responsive layouts. For example, to create a simple grid layout:
<div class="grid-container">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>This will create a three-column grid (default) layout that is responsive across different screen sizes.
You can create grid structures without defining a specific number of columns:
<div class="autocols">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
<div>Column 4</div>
<div>Column 5</div>
</div>This will create a five-column grid layout with cols evently distributed on the width of the div.