Welcome to GreenScreen! This is a CSS framework forked by “Blueprint” designed more modular then Blueprint.
It gives you a solid foundation and fast to build your own CSS on, this eredited by Blueprint contributes.
- Deleted margins, all of columns are adjacent with out margin, if you would margins you must add inner div with margins
- More modularized with extracting Debuging propertyes and Pull & Push selectors into new files
- Basic width 960, not 950 such as Blueprint Css
- Deleted “borders” selectors…
- .. and more changes
We make “GreenScreen” more powerfull and more modularized then Blueprint.
Here’s how you set up Greenscreen on your site.
- Upload the “Greenscreen” folder in this folder to your server, and place it in whatever folder you’d like. A good choice would be your CSS folder.
- Add the following three lines to every
<head/>of your site. Make sure the threehrefpaths are correct (here, BP is in my CSS folder):<link rel="stylesheet" href="css/Greenscreen/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/Greenscreen/print.css" type="text/css" media="print"> <!--[if lt IE 8]> <link rel="stylesheet" href="css/Greenscreen/ie.css" type="text/css" media="screen, projection"> <![endif]-->
Remember to include trailing slashes (" />") in these lines if you’re using XHTML. - For development, add the .showgrid class to any container or column to see the underlying grid. Check out the
pluginsdirectory for more advanced functionality.
The framework has a few files you should check out. Every file in the src directory contains lots of (hopefully) clarifying comments.
Compressed files (these go in the HTML):
Greenscreen/screen.cssGreenscreen/print.cssGreenscreen/ie.css
Source files:
Greenscreen/src/reset.css
This file resets CSS values that browsers tend to set for you.Greenscreen/src/grid.css
This file sets up the grid (it’s true). It has a lot of classes you apply to<div/>elements to set up any sort of column-based grid.Greenscreen/lib/Greenscreen/grid.css.erb
This file is used by the compressor (see below) when generating grids. All changes to grid.css are mirrored in this file, manually.Greenscreen/src/typography.css
This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.Greenscreen/src/forms.css
Includes some minimal styling of forms.Greenscreen/src/print.css
This file sets some default print rules, so that printed versions of your site looks better than they usually would. It should be included on every page.Greenscreen/src/ie.css
Includes every hack for our beloved IE6 and 7.
Other:
Greenscreen/plugins/
Contains additional functionality in the form of simple plugins for Greenscreen. See individual readme files in the directory of each plugin for further instructions.tests/
Contains html files which tests most aspects of Greenscreen. Opentests/index.htmlfor further instructions.
- For credits and origins, see AUTHORS.
- For license instructions, see LICENSE.
- For the latest updates, see CHANGELOG.