Skeletoni is single CSS file with less than 1000 lines which sets reasonable defaults for HTML pages. It is based on the great Skeleton boilerplate. Skeletoni was created in 2025 mostly for industrial aplications which require fast development, readability, touch control, responsive layout and light/dark mode but not animations or fancy features. Skeletoni is free to use under the MIT license.
Original Skeleton is reported to be the most popular "classless" CSS framework, but does not seem to be developed anymore and lacks some features. Skeletoni adds style for all inputs (date, datetime, ...), uses current "default" font (Roboto), includes modern normalization rules and reduces number of custom classes to minimum.
Skeletoni is primarily designed for industries where ease of use and speed of development are more important than design. It has automatic light/dark mode where background is either white to improve readability outside or black to prevent blinding by interior machine terminals. Text is not gray but either black or white for contrast. However, colors are specified by CSS variables so they can be quickly modified.
Skeletoni uses custom classes only to specify grid layout, colors and button appearance. There are only few opinionated parts - mainly automatic grid reflow for smaller screens like tablets.
That's it. For more complex but still simple (optionally classless) alternative see Pico CSS.
The grid has 12-columns on wide screen and automatically changes to
6-columns on smaller device or window. This improves readability, but
12-columns grid can be preserved on smaller devices by deleting single section
of CSS code. On mobile screens, grid is deactivated entirely (each column
takes full width of screen).
Max width can be changed with one line of CSS, default is 1200px.
Try to resize window or rotate screen on your phone. Note that in
six-columns grid some columns are wider (one is as wide as
two) which can break the row if it contains more than two
columns.
Grid is constructed by custom classes: container,
column or columns (they work the same) and classes
specifying column width like one, two,
three or quarter-of, four or
third-of and column offset like offset-by-three or
offset-by-quarter-of.
There is also an extra class center which does not need to be in
container or paired with column.
There are three main colour classes - primary,
warning, success. Nine other color classes like
green have no specific meaning. Skeletoni automatically switches
between light and dark themes using browser/OS settings.
All inputs, select, and buttons are normalized for a common height so inputs can be stacked or placed alongside each other. Input elements with built-in validation change border color to warning if input is invalid (try to write email without @).
Code styling is basic – anything inside <code> will appear like
this. For blocks of code, wrap a <code> with a
<pre>.
.some-class {
background-color: red;
}
Sample table with <thead> and <tbody>.
| Name | Age | Sex | Location |
|---|---|---|---|
| Franta Vopršálek 💪 | 26 | Male | Prčice |
| Dwayne Johnson 🤨 | 25 | Male | Hayward |
Skeletoni uses media queries to serve its scalable grid, but also has a list
of queries for convenience of styling your site across devices. The queries
are mobile-first, meaning they target min-width. Default size is
Mobile portrait (max 576px). Sizes for the queries are: