OliGrid
Instructions
OliGrid is a utility for creating CSS grids to easily lay out web pages. It produces an output file containing CSS selectors which you can include in your markup to quickly space and align page elements.Don't like reading instructions? Download this example package and have a look around the files.
To get started, enter an overall container width. This field accepts a value of 1 or greater, including decimals. If you are creating a responsive width grid this will be the maximum width of the container.
If you select a responsive grid this still needs to be entered as a pixel value - it will automatically be converted to a percentage width, based on the overall container width.
Important:
Please note, all fields accept integers only - no text.
(don't include terms like px or %).
This is to allow you to test out ideas and maybe use the tool in unexpected ways - great for those still learning web design or trying out unusual ideas.
Generally you will get a warning box but still see previews and output in these conditions.
To use the grid save the output as something like 'Grid.CSS', and link to it from your html file.
When you need to choose an element width simply use the appropriate selector. For example if you have created a grid with 10 columns, giving a div a class="grid_7" would mean it takes up 70% of the containing element. If you then declare another div with the class="grid_3 omega", the two div's will sit side by side taking up 70% and 30% of the available width respectively. Note the omega class leaves no margin on the right, and the alpha class leave no left margin.
For best usage, contain this all inside a div with the class="container clearfix", where 'container' will be the width you select via OliGrid and the 'clearfix' is used to fix errors around floats.
OliGrid is written using php alongside html and css. Feel free to download the source for this site (.zip) to see how it's built.
Style for the OliGrid site is based on the Twitter Bootstrap.
Everything I know about grids I learned through Treehouse - check them out for brilliant technology education at a good price. (Shameless plug, use this link for a discount on membership and a bonus discount for me!)
'Render' function and overall site architecture based on material from Harvard's open source CS50 course.
If you'd like to get started in computer science, register for CS50x, it's neat.
This site is a work in progress, please let me know of any bugs, suggestions, or feature requests via the comment section below.
