What is blueprint css

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A CSS framework that aims to cut down on your CSS development time

License

joshuaclayton/blueprint-css

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

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!

• Web: http://blueprintcss.org
• Source: http://github.com/joshuaclayton/blueprint-css
• Wiki: http://github.com/joshuaclayton/blueprint-css/wikis/home
• Bug/Feature Tracking: http://blueprintcss.lighthouseapp.com

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

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/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 elements to set up any sort of column-based grid.
• blueprint/lib/blueprint/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.
• 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.

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

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

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

About

A CSS framework that aims to cut down on your CSS development time

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A CSS framework that aims to cut down on CSS development time.

License

blueprintcss/blueprint

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

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!

• Web: http://blueprintcss.org
• Source: http://github.com/joshuaclayton/blueprint-css
• Wiki: http://github.com/joshuaclayton/blueprint-css/wikis/home
• Bug/Feature Tracking: http://blueprintcss.lighthouseapp.com

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

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

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

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

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

About

A CSS framework that aims to cut down on CSS development time.

Источник

Основы фреймворка Blueprint

Плавный переход от простого CSS-фреймворка 960gs к чуть более сложному фреймворку Blueprint.

Конечно, основой для изучения фреймворка Blueprint может послужить только официальное руководство. Эта статья — попытка автора осмыслить и научиться основам работы с фреймворком Blueprint. Статья является вольным переводом официального руководства по Blueprint.

Что такое Blueprint

Этот фреймворк предназначен для сокращения времени на разработку front-end проектов (ну конечно — ведь задача всех без исключения CSS-фреймворков заключается именно в этом; они для этого и были созданы).

В отличие от фреймворка 960gs, фреймворк Blueprint предлагает более богатый набор предустановленных возможностей. Помимо CSS-сетки (grid), имеются стили для типографики, для печати, для браузеров IE.

Однако, Blueprint не является средством для всего — в первую очередь, он предназначен для создания веб-сайтов, у которых каждая страница имеет свой собственный, отличный от других страниц, дизайн. Прежде чем продолжить знакомство с Blueprint, стоит взглянуть на готовые веб-страницы, созданные с помощью этого фреймворка, чтобы решить для себя — подходит ли он для вас или нет.

Также можно воспользоваться тестовой директорией на официальном сайте проекта, чтобы на практике убедиться во всех возможностях, которые предоставляет Blueprint.

Понятие “фреймворк” в данном контексте (имеется ввиду Blueprint) может вводить в заблуждение, так как Blueprint не поможет вам в задаче организации или написания CSS-кода.

Обзор структуры фреймворка Blueprint

Снизу вверх, перечислим CSS-слои, из которых состоит Blueprint:

• CSS-reset — сброс стилей;
• Типографика — предоставляет небольшой набор типографики и цветов оформления;
• Grid — предоставляет набор CSS-классов, с помощью которых выполняется построение CSS-сетки.

Вторая часть фреймворка Blueprint — это js-скрипты, позволяющие настроить большинство деталей фреймворка, начиная с колонок и их ширины и заканчивая файловыми путями и именами CSS-классов.

• Compressor — для сжатия и обработки исходных файлов;
• Validator — для валидации основных файлов фреймворка Blueprint;

Для того, чтобы начать работу с фреймворком Blueprint, необходимы (как минимум) три файла, подключенные к стартовой HTML-странице:

Источник