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!