Simpl.css

Simpl.css v0.8 the simple css framework

  1. YUI Grids = requires nesting to get to >2 columns.
  2. Blueprint = better but, not fluid, fixed number of columns.
  3. Simpl.css = Download Simpl.css. And if you don't find it simple get your money back

Simpl.css Is a flexible modular CSS framework that is somewhat different than most others that are out there in that it enforces a few standards thereby eliminating 90% of repetition in other words. It is DRY. It is simple to use and learn via self documenting CSS code (see samples). It is width stretchable so you can adjust your page size on the fly if need be. Is infinitely nest-able but does not REQUIRE nesting for more than 2 columns. Is based on over 10+ years design and front end coding experience. It's full of Love™

Top^

Forms

Personal Information

Medical History


Options
Current Medication

Are you currently taking any medication?



If so, please indicate it in the space below :

Tables

Table
Data Data Data
Data Data Data
Data Data Data
Data Data Data

Simpl but not simplistic

The idea here is simple, er, Simpl. If you need a cheatsheet for your framework it's broken. And in my world if you're not taking advantage of max-width go back to print design. And lastly if you have to calculate any pixels you're on the wrong track. With Simple.css You code the way you design. In regular divisions of the plane. If you want one column that takes up one third of the page and one column that takes up two thirds of the page you simply say ".ColumnOneThird" and ".ColumnTwoThirds" of course you'll probably want some ".Margin" I use margin instead of padding in case an old crappy version (aren't they all) of ie gets into quirks mode which it often does. Another reason to separate the margins from the column is to provide for equal margins regardless of whether you columns are nested or not. Pretty cool huh? Any questions, comments or donations contact me here.

Top^

ColumnOneHalf

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ColumnOneQuarter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ColumnOneQuarter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Top^


ColumnOneQuarter

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ColumnThreeQuarters

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Top^


static width side columns with ooey gooey center the oft requested layout

ColumnA

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ColumnB

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ColumnC

Lorem ipsum dolor sit amet, cons