Minii CSS

A CSS framework designed to be all you need!

 

About


Minii CSS was created to be a minimal, fast and understandable CSS framework. It's designed to be everything you need to create basic websites for the modern internet. Minii is responsive and easy to edit. Minii CSS is only 2.1kb gzipped!

Star Fork Tweet

 

Styles


Grid

Minii provides a responsive grid for your projects. Go ahead, resize the page!

One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
 

Text

Minii uses Montserrat as it's default font. Text is responsive, and styles for links, emphasis, bold and underline are provided.

 

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
 

You can also space text by adding text-center, text-left or text-right to the class.

 

Buttons

Minii comes with a variety of button styles.


 

Forms

Forms are usually a pain to style, but Minii attempts to make them easy.

 

Tables

Minii formats tables so they look smart and modern. Make sure to use proper table markup with thead and tbody.

Name Height Weight Species
Bulbasaur 0.71m 6.9kg Seed Pokemon
Charmander 0.61m 8.5kg Lizard Pokemon
Squirtle 0.51m 9.0kg Tiny Turtle Pokemon
 

Lists

Most CSS frameworks don't include extra styling for lists, as they aren't used that often. While developing Minii I was in need of a framework with well documented support for lists, and I couldn't find any, so I decided to add them to Minii.

Unordered List

Ordered List with nested unordered list

  1. Item
  2. Item
    • Item
    • Item
  3. Item
 

Extras

Containers

Minii utilizes containers to make content look more streamlined and modern. As you can see, everything on this page is in a container. You can utilize containers by placing content in a div tag with the class of container.

Colours

Minii has 5 built in colours that can be used for backgrounds of almost every element. Just add one of the following classes to the element:

Full Screen Viewport

You can make a full screen viewport (like the one at the top of this page) simply by adding the full-screen class to a div.

Code Blocks

You can add formatted 'code' to your webpages by wrapping the text you want to be code in a code tag. If you need a block of code, make sure to include pre tags before the code ones.

 

Contribute


Minii is always looking for new features and contributions. If you've got something you'd like to add, submit a pull request on GitHub.

© Finley Corrigan | Licensed under the MIT License