Skip to content
Snippets Groups Projects
Select Git revision
  • d66231635577ef6c94d40f2d828593e5c7af0e75
  • master default protected
2 results

joshuaclayton-blueprint-css-0f7588a56d43bf81a830dce22c4293919edba33c

  • Clone with SSH
  • Clone with HTTPS
    • Tue Herlau's avatar
    updates
    tuhe authored
    a67ab906
    History
    Tue Herlau's avatar a67ab906
    History
    Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    Name Last commit Last update
    ..
    doc
    lib
    tests
    AUTHORS.textile
    CHANGELOG
    LICENSE
    README.textile
    TUTORIAL.textile
    README.textile

    Blueprint CSS Framework Readme

    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!

    Project Info

    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/> of your site. Make sure the three href paths are correct (here, BP is in my CSS folder):

      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.

    Tutorials

    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 <div/> elements 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.

    Other:

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

    Extra Information

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