Blueprint: A CSS Framework

Strona domowa projektu BlueprintCSS, Wiki, Articles.

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):

 <link rel="stylesheet" href="/stylesheets/blueprint/screen.css"
       type="text/css" media="screen, projection">
 <link rel="stylesheet" href="/stylesheets/blueprint/print.css"
       type="text/css" media="print">
 <!--[if IE]>
 <link rel="stylesheet" href="/stylesheets/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.

[Alan Kay]

Don't worry about what anybody else is going to do. The best way to predict the future is to invent it.

— Alan Kay

The Grid

When you first start using Blueprint, the most important concept to understand is the “grid”. The default grid is a 950 pixel wide “container” that is divided into 24 columns, each spaced 10 pixels apart. Using Blueprint, you can place “column” elements on the page with great precision and give each column a “span” (the span of each column is analogous to the colspan attribute of a td tag) to specify how wide the column should be. So to create a simple layout using Blueprint, I would:

  1. Create a new HTML file and include the base Blueprint CSS files
  2. Create a div “container” that would be the outer wrapper of my page
  3. Create a header “column” of span 24 that would cover an entire row
  4. Create a main content “column” of span 16, which would take up 2/3 of the next row
  5. Create a sidebar “column” of span 8, which would take up the other 1/3 of the row. I would also specify that this column is the “last” element in the row.
  6. Create a footer “column” of span 24

Solution.

<body>
  <div class="container">
     <div class="column span-24">Header</div>
        <div class="column span-16">Content</div>
        <div class="column span-8 last">Navigation</div>
     <div class="column span-24">Footer</div>
  </div>
</body>
Klasy używane w Siatce (Grid)
class Opis
.append-x appends x number of empty columns after a column
.prepend-x prep-pends x number of empty columns before a column
.push-x pushes a column x columns to the left; can be used to swap columns
.pull-x pulls a column x columns to the right; can be used to swap columns
.border applies a border to the right side of the column
.colborder appends one empty column, with a border down the middle
.clear makes a column drop below a row, regardless of space
.showgrid add to container or column to see the grid and baseline

Other classes defined by Blueprint

While the typography of Blueprint mainly applies itself, there’s a few classes provided. Here’s a list of their names and what they do:

Klasy używane w typografii
class Opis
.small makes the text of this element smaller
.large makes the text of this element larger
.hide hides an element
.quiet tones down the font color for this element
.loud makes this elements text black
.highlight adds a yellow background to the text
.added adds green background to the text
.removed adds red background to the text
.first removes any left sided margin/padding from the element
.last removes any right sided margin/padding from the element
.top removes any top margin/padding from the element
.bottom removes any bottom margin/padding from the element

To make Blueprint style your input elements, each text input element should have the class .text, or .title, where .text is the normal size, and .title gives you an input field with larger text.

Klasy używane w Forms
class Opis
div.error creates an error box (red)
div.notice creates a box for notices (yellow)
div.success creates a box for success messages (green)

Definujemy własną siatkę

Zanim zdefiniujemy swoją siatkę, trochę rachunków.

Rozmiar podstawowy fontu ustawiamy na 16 px. Litery takiej wielkości powinny być czytelne po wyświetleniu przez rzutniki w laboratoriach.

Interlinię ustawiamy na 1,5*16 px=24 px. Dlaczego?

Szerokość literek „n”, „e”, „p” to mniej więcej 0.5*16 px=8 px. Aby wiersz tekstu łatwo się czytał powinien zawierać 50–70 liter. Zatem szerokość kolumny tekstu powinna zawierać się między 400 px–560 px.

Zamierzam składać na siatce 13+8=21 kolumn, gdzie 13 kolumn będzie zawierać notatki, a 8 kolumn przeznaczone będzie na spis treści, cytaty itp.

Jeśli ustawimy szerokość jednej kolumny na 33 px+11 px=44 px, szerokość kolumn będzie wynosiła 572 px+352 px-11 px=913 px.

Szerokość ekranu to co najmniej 1024 px, na marginesy zostaje 111 px. Na lewy margines przeznaczymy 44 px (w przybliżeniu 1/3 z 111).

Skrypt kompresujący compressor.rb

W katalogu z wtyczkami blueprint/plugins/ tworzymy katalog tutorials i umieszczamy w nim plik screen.css w którym przebijamy domyślne ustawienie rozmiaru fontu:

body {
  font-size: 16px;
}

Pozostałe wyliczone ustawienia zapisujemy w pliku lib/settings.yml:

couchdb:
  path: /home/wbzyl/www/couchdb/public/stylesheets
  custom_layout:
    column_count: 21
    column_width: 32
    gutter_width: 8
  plugins:
    - link-icons
    - tutorials
ti:
  path: /home/wbzyl/www/ti/public/stylesheets
  ...
  ...

W katalogu lib uruchamiamy Skrypt compressor.rb:

ruby compress.rb -p couchdb

Layout, czyli układ strony dla RDiscount

Tak wygląda layout:

BlueprintCSS based layout

A tak HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" charset="utf-8">
    <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print, projection" charset="utf-8">
    <!--[if IE]>
      <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link rel="stylesheet" href="/stylesheets/uv.css" type="text/css" media="screen, projection" charset="utf-8">
    <link rel="stylesheet" href="/stylesheets/couchdb.css" type="text/css" media="screen,projection" charset="utf-8">

    <title><%= @title || "WB/CouchDB" %}</title>
  </head>
  <body>
    <div class="span-21" id="header">
      <div class="span-8">
        <a href="/"><img src="/images/couchdb.png" alt="wb/couchdb logo" /></a>
      </div>
      <div class="span-13 last">
        <div id="links">
          <a href="http://wbzyl.ug.edu.pl/">home</a>
          <a href="http://wbzyl.ug.edu.pl/galeria">galeria</a>
        </div>
      </div>
    </div>
    <div class="span-21 container">
      <div class="span-13" id="content">

        <%%= yield %>

      </div>
      <div class="span-8 last">
      </div>
    </div>

  </body>
</html>

A tak HAML: TODO