forked from joshuaclayton/blueprint-css
-
Notifications
You must be signed in to change notification settings - Fork 0
A CSS framework that aims to cut down on your CSS development time
License
m4ksio/blueprint-css
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Blueprint CSS Framework Readme
----------------------------------------------------------------
* Web: blueprintcss.googlecode.com
* Mail: groups.google.com/group/blueprintcss
* News: bjorkoy.com
Welcome to Blueprint! This is a CSS framework designed to
cut down on your CSS development time. It gives you a solid
foundation to build your own CSS on. Here are some of the
features BP provides out-of-the-box:
* An easily customizable grid
* Sensible default typography
* A typographic baseline
* Perfected browser CSS reset
* A stylesheet for printing
* Powerful scripts for customization
* Absolutely no bloat!
Setup instructions
----------------------------------------------------------------
Here's how you set up Blueprint on your site.
1) Upload the "blueprint" 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> section of your
site. Make sure the three href paths are correct (here, BP is in my CSS folder):
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
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.
How to use Blueprint
----------------------------------------------------------------
Here's a quick primer on how to use the CSS in Blueprint:
* code.google.com/p/blueprintcss/wiki/Tutorial
Another tutorial on the Blueprint CSS:
* blueflavor.com/blog/design/blueprintcss_101.php
How to customize BP with the compressor script:
* jdclayton.com/blueprints_compress_a_walkthrough.html
How to use a grid in a layout:
* subtraction.com/archives/2007/0318_oh_yeeaahh.php
How to use a baseline in your typography:
* alistapart.com/articles/settingtypeontheweb
Files in Blueprint
----------------------------------------------------------------
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):
* blueprint/screen.css
* blueprint/print.css
* blueprint/ie.css
Source files:
* blueprint/src/reset.css
This file resets CSS values that browsers tend to set for you.
* blueprint/src/grid.css
This file sets up the grid (it's true). It has a lot of classes
you apply to divs to set up any sort of column-based grid.
* blueprint/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.
* blueprint/src/forms.css
Includes some minimal styling of forms.
* blueprint/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.
* blueprint/src/ie.css
Includes every hack for our beloved IE6 and 7.
Scripts:
* lib/compress.rb
A Ruby script for compressing and customizing your CSS. Set a
custom namespace, column count, widths, output paths, multiple
projects, and semantic class names. See commenting in compress.rb
or run $ruby compress.rb -h for more information.
* lib/validate.rb
Validates the Blueprint core files with the W3C CSS validator.
Oth
561F
er:
* blueprint/plugins/
Contains additional functionality in the form of simple plugins
for Blueprint. See individual readme files in the directory
of each plugin for further instructions.
* tests/
Contains html files which tests most aspects of Blueprint.
Open tests/index.html for further instructions.
Also
----------------------------------------------------------------
* For credits and origins, see AUTHORS.
* For license instructions, see LICENSE.
* For the latest updates, see CHANGELOG.
To post bugs and issues, use our Google Code site:
* code.google.com/p/blueprintcss/issues/list
Questions, comments and suggestions goes to
to olav at bjorkoy dot com. Thanks!
About
A CSS framework that aims to cut down on your CSS development time
Resources
License
Stars
Watchers
Forks
Packages 0
No packages published