Typography
NanoCSS
A very lightweight CSS framework
NanoCSS is a ready to use Lightweight CSS Framework and not required any Javascript or using HTML classes. NanoCSS is designed so that you can have a website ready in a short time, with a clean code and that you can modify and expand according to your needs.
Features
- Ready to use. Only download and include on your pages.
- No classes, only standar HTML5 elements.
- Very lightweight. Little more than 1Kb minified and gzipped.
- Write using SASS and include the 16 colors Clrs palette. You can change the colors of many elemets or the entire palette.
- Dark variant, ideal if you are a creature of the night.
Getting started
To use NanoCSS on your website, follow these steps:
- Download the latest version available from the releases page
- Inside the package there is a folder called dist, which contains four files. Those with -dark in the name are for using the dark theme. The .min.css files contain the minimized styles (everything is on a single line), reducing their size, and are recommended for use in production (when your website is uploaded to the server). Copy the one you want to your project.
-
Inside the HTML header (<head>), add the following tags:
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="nanocss.min.css" />Just replace nanocss.min.css with the path and name of the CSS file you are going to use.
- And now NanoCSS is ready to use.
Examples:
Lists
- Lorem ipsum
- Lorem ipsum
-
Sublist:
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Sublist:
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
Buttons:
Form
Tables:
| Singer | Group |
|---|---|
| Freddie Mercury | Queen |
| Kurk Cobain | Nirvana |
| John Lennon | Beatles |
| Jon Bon Jovi | Bon Jovi |
Responsive images
Blockquote
This is a blockquote.
Code
<pre><code>body
{
font-size: 16px;
color: #212121;
}</code></code>Video
Audio
Podcast Remember 90 & 2000 Energy Power by Fran DeJota 19-10-2019