Thin is a minimal (~3kb min + gzip) modern CSS framework designed to not get in your way. It provides only the absolute base for your project, no bloat! It's mostly based on Skeleton and created using LESS and Gulp, if you are a developer and want to colaborate, please see the git repository in GitHub.
Broadly, Thin contains the following components ready to use:
clearfixRead though this page to dig deeper into each component.
Base is a reset, namely Normalize, aswell as some defaults for your links, lists and images.
A base typography for your headings, paragraphs and
blockquotes. All styles are in ems so if you feel
like making the text bigger, remember you can make so in the
container and all child elements will follow.
A person who never made a mistake never tried anything new.
Albert Einstein
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
A person who never made a mistake never tried anything new.
Albert Einstein
Grids are really simple to use! They are no more than row divs inside a
container. You can use Thin's containers or create your own. What's nice about the grid is that it's
responsive, go ahead, resize the browser and see
how the grid nicely stacks!
12
1
11
2
10
3
9
4
8
5
7
6
6
You can also use offsets to be able to create more complicated designs.
12
eleven columns offset-by-one
ten columns offset-by-two
nine columns offset-by-three
eight columns offset-by-four
seven columns offset-by-five
six columns offset-by-six
ten columns offset-by-one
1
eight columns offset-by-two
2
six columns offset-by-three
3
You can even embed a grid inside a grid! Gridception!
6
6
6
6
6
6
6
That's pretty much it for grids! If you want to know more please see the wiki page in the GitHub repository, it explains how rows work and what containers need to provide.
There's a button class which you can use to
display nice and gently-rounded buttons. This applies
automatically to all button elements aswell.
Code Example
To change the color simply add a new class to your element and
set the background-color as desired. Buttons play
nice with icon-fonts such as FontAwesome!
Thin also provides some base styles for your forms.
Code Example
General utilities you can use in your markup! They are designed to be quite generic so most projects have a little kickstart.
The popular clearfix class which clears floating elements inside a container.
When an element has a hidden attribute or class, it will be hidden, always.
Make an element take all horizontal space available, basically 100% width.
Code Example
Thin has been tested in all modern browsers, including:
Note that some old browsers like IE 8 which don't support media queries will need some extra polyfill/conditional comment if you want to use the responsive features. If you find a compatibility issue please report it!
The fastest and easiest way to use Thin is though a CDN, for this you can use rawgit!
Thin is distributed under the MIT licence, so feel free to use it as you please. If you want to download the latest version, you can get it at the GitHub repo.
If you found an issue or would like to collaborate on Thin just open/pick an issue and send me a pull request :)