A CSS framework that aims to cut down on your CSS development time. Forked from "blueprint-css"
Pull request Compare This branch is 22 commits ahead, 18 commits behind joshuaclayton:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


GreenScreen CSS Framework Readme

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.

Some Difference of Greenscreen Css

  • 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.

Setup Instructions

Here’s how you set up Greenscreen on your site.

  1. 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.
  2. Add the following three lines to every <head/> of your site. Make sure the three href paths 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">

    Remember to include trailing slashes (" />") in these lines if you’re using XHTML.
  3. For development, add the .showgrid class to any container or column to see the underlying grid. Check out the plugins directory for more advanced functionality.

Files in Greenscreen

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.css
  • Greenscreen/print.css
  • Greenscreen/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.


  • 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. Open tests/index.html for further instructions.

Extra Information

  • For credits and origins, see AUTHORS.
  • For license instructions, see LICENSE.
  • For the latest updates, see CHANGELOG.