Basicss 4

Mission Statement

I just wanted to make websites more simple, so I built the world a scaling CSS framework.

Strip away the chrome from any modern website and you will be left with stylesheet that defines how the site should react under any given circumstance — this is your core style.

Basicss is a core style sheet designed to work out-of-the-box on every device in existence. A website built on the Basicss core will scale to fit anything, from an Apple Watch to a 4k television and whatever else
the world might come up with!

Basicss comes with a super simple fraction-based content flow system and a non-padded grid — you add the padding where and when you need it! Starting with version 4, Basicss also comes with two baseline configurations for Open Sans that will keep the vertical rhythm of your content in check automatically.

Basicss is extremely lightweight and makes a great adaptive and extensible base for any project.

Faster, Better, Cheaper!

The old adage says to choose only two because you cannot have all three — well, now you can!

Designers

Developers

Your Website

FASTER

less comps to provide between screen states

less states to develop for

less code to render in the browser

BETTER

less mistakes to be made by human error or negligence

less inconsistency between pages

less chances to break when updated

CHEAPER

less time spent on final designs

less time spent developing states

less data transfer; smaller files

Developers can work faster. The code they output can be standardized and easily extended. There are (at least 50%) less man-hours spent by your design team creating comprehensive layouts and you only need two.

Included with the content flow system is an object-oriented stylesheet that covers every angle of CSS that you may need on a day-to-day basis. Check out the code. It is a very simple/powerful system.

Your CSS deserves to be modular.

Designers spend less time designing, you spend less time coding. The end user gets a page that works on all the things.

Frequently Asked

Q: Why object-oriented CSS and not BEM or ___?

A: OOCSS is the highest level of abstraction in modern CSS. The syntax and rules are of the utlimate simplicity and keep your code as DRY as is possible.

Q: Is it easy to build on?

A: The easiest. Basicss' rules are the lowest on the specificity scale, so not only is it a great base, but it be invasive to any live projects.

The OOCSS that comes with basicss is like bucket of legos for you to build with. When you find yourself repeating a group of OO classes, clean it up by creating a new component (à la magi.css)!

Q: What is a typography baseline?

A: In European and West Asian typography and penmanship, the baseline is the line upon which most letters "sit" and below which descenders extend.

Giving your content a baseline creates a vertical rhythm that is aesthetically pleasing to your end user. Basicss (+ magi.css) provides two default settings
(30px and 26px) for Open Sans... or you can use that code for inspiration to create your own!