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.
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.
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.
Websites that was made with SuperBro.
If you made website with SuperBro, let me know in Github.
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.
ten columns + two rows
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.
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.
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.
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.
|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)|
|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.|
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.
<?php $love = "I am in Love" echo "My first PHP script!"; echo "My status:". $love; ?>
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.
Help this project to grow and to fix issues by forking it! All suggestions are taken in to consideration!