Uncomplicated CSS Template System
Easy to handle
This project was launched so it could be effortlesser to start new website designs while adopting modern CSS and HTML structures and make quick mockups or build full flexibile websites quickly.
Hassle Free
SuperBro is light, easy and quick. This boilerplate is super configuratable and helps you to quickly make websites. You can download the latest version (version 0.1.4) from repo or as release.
CSS Grid
This Framework/Boilerplate was built around CSS Grid. It allows us to create easily two-dimensional layouts and quickly build websites that are mobile friendly and flexible.
Showcases
Websites that was made with SuperBro.
If you made website with SuperBro, let me know in Github.
Grid
SuperBro includes grid.css file that will do the work with both columns and rows. You can see below the example layout of the grid.
ONE
.span1
Eleven column
.span11
two columns
.span2
ten columns
.span10
three columns
.span3
nine columns
.span9
four columns
.span4
eight columns
.span8
five columns
.span5
seven columns
.span7
ten columns + two rows
.span10.row2
two columns
.span2
six columns
.span1
six columns
.span1
five columns
.span6
seven columns
.span7
four columns
.span4
eight columns
.span8
twelve columns
.span12
nine columns
.span9
three columns
.span3
ten columns
.span10
two columns
.span2
eleven columns
.span11
one
.span1
Typography
Typography has been made to be scalable within' the limits of viewport and not to jump around. This is made possible by using vh units and basing them in to px units.
Theming
Starting your project is fast as the project takes advantage of var() & calc() css functions. It also includes easy colors configuration for fast development in mind.
Units & System
SuperBro takes full advantage of EM, VH and VW units! This way it can be scalable through the fonts and let browser do so called calculations. Fastens development process.
Flexibility
The aim is to keep it minimal but configuratable as possible. Having best of both worlds is not easy. So if you decide to go with predefined values you can trust that I have configurated best possible line-heights and font-size for the project.
headers
| H1 | calc(48px + 0.5vh) |
|---|---|
| H2 | calc(40px + 0.5vh) |
| H3 | calc(31px + 0.5vh) |
| H4 | calc(25px + 0.5vh) |
| H5 | calc(20px + 0.5vh) |
| H6 | calc(16px + 0.5vh) |
Included CSS
| grid.css | The bones for this project |
|---|---|
| settings.css | HTML reset + Settings for colors and typography in general + Defaults for SuperBro |
| yoursite-example.css | Empty file preserved for your CSS stuff. |
Supported Tags
- <p> Basic Paragraph
- <strong> Bold text
- <em> Italic text
- <u> Underlined text
- <a> Anchor Link
- <button>
Tables
| Name | Age | Sex | Location |
|---|---|---|---|
| Sanjiv | 26 | Male | Helsinki |
| Link | 16 | Male | Hyrule |
Forms
<blockquote> tag
Quote example
God, grant me the serenity to accept the things I cannot change, Courage to change the things I can, And wisdom to know the difference.
<code> tag
<?php
$love = "I am in Love"
echo "My first PHP script!";
echo "My status:". $love;
?>
Credits & Inspiration
This project is maintained by Sanjiv. He is inspired by many of simple boilertemplates. Simplicity is the aim and key for the project and that it can be easily applied to any project as a starting plate.
contribute
Help this project to grow and to fix issues by forking it! All suggestions are taken in to consideration!