search

mhulse / rex

On, Wildfire, on!
http://mhulse.github.io/rex/demo/
Apache License 2.0
4 stars 0 forks source link

readme

Rex (O'Herlihan)

ScreenShot

Built with Grunt

Oh yeah, root's kicking in!

Table of contents

About ↥

Essentially, this code serves as a slightly opinionated yet very simple "local baseline grid" toolkit for use in other css projects.

What is a baseline?

Wikipedia says:

… the baseline is the line upon which most letters "sit" and below which descenders extend.

What is a "global" baseline grid?

A "global" baseline grid (or, "document-based" baseline grid) consists of applying a grid to the document's <body> and then aligning all the text to a vertical grid, set in even increments all the way down the page, where the bottom of each letter is positioned onto the grid, just like writing on lined paper.

What is a "local" baseline grid?

A "local" baseline grid is exactly like the above, except the grid gets applied directly to "modules", "content areas" or elements and the alignment happens relative to the application of the vertical grid.

Why use a "local" baseline?

While a "global" baseline grid might work well in print, on the web there are numerous situations where baseline grid alignment isn't practical.

Using a "local" baseline allows the developer to focus on the baseline grid alignment for a particular "module", "content area" or element whilst relieving the pressure to maintain baseline alignment between the aforementioned items.

The goal is to use a "local" baseline (and the math that powers it) as a quick and easy way to add vertical "meaning" to a page's content (much in the same way that a "horizontal" grid (rows/cols) gives "meaning" to a page's layout).

Why "Rex"?

Just watch Rustlers' Rhapsody (Amazon VOD) and all will be explained. :)

Demonstration ↥

DEVELOPMENT • html • css PRODUCTION • html • css
qr code qr code

Note: Only the DEVELOPMENT demo uses normalize.css.

Installation ↥

There are several ways to install this code:

  1. Download as a zip.
  2. Clone it: $ git clone https://github.com/mhulse/rex.git.
  3. Fork it and clone: $ git clone git@github.com:USERNAME/rex.git.
  4. Just grab the relevant CSS (minified) and/or SCSS files.
  5. Using Bower: $ bower install https://github.com/mhulse/rex.git.

Build process:

In order to build from source, you'll need to install Grunt.js: The JavaScript Task Runner.

From there, $ cd source/ and run $ npm install; after the dependencies have been installed, run $ grunt bower (this installs normalize.css as a Bower dependency).

For subsequent builds, just run $ grunt; this default task will generate or copy files, based on the Gruntfile.js configuration and files found in the /source folder, into the /demo folder.

Run $ grunt watch to automatically regenerate build files when you modify the Gruntfile.js, any of the templates or SCSS files.

SCSS API ↥

Available SCSS overrides and utilities:

Variables:

Name Description Default
$REX Selector's "pseudo namespace" prefix rex_
$rex_browser-font-size Browser default font-size. 16px
$rex_base-font-size Base font-size. 16px
$rex_base-line-height Base line-height. 24px
$rex_flag-natural-box-model Natural box layout? true
$rex_flag-heading-classes Heading classes? true
$rex_flag-subheading-classes Subheading classes? true
$rex_flag-tables Table styles? true
$rex_flag-forms Form styles? true
$rex_flag-baseline Include the baseline class? true
$rex_baseline-major-grid-color Baseline "major" grid color. #f00
$rex_baseline-minor-grid-color Baseline "minor" grid color. #0ff
$rex_baseline-outline-color Baseline "outline" grid color. #f00

Functions:

Name Description
rex_strip($value, ...) Remove units from $value.
rex_relative($value, ...) Convert $value to relative number.
rex_baseline($value, ...) Calculate baseline from $value, which is assumed to be the baseline's element's font-size.

Mixins:

Name Shorthand Description
rex_baseline rex_bl Simple baseline mixin.
rex_baseline-grid rex_blg Baseline grid css.

CSS ↥

CSS details:

Features:

Feature Description
rex_ All rex classes have a "pseudo namespace" (which is controlled via the SCSS $REX variable).
16px/24px Base font-size is 16px and base line-height is 24px; both of these values can be controlled via the SCSS variables $rex_base-font-size and $rex_base-line-height respectively.
rem & em All units are relative; using rem and em where appropriate.
border-box If $rex_flag-natural-box-model is true, then all elements (including pseudo elements) will use box-sizing: border-box;; this change affects the box model in that the width and height properties include the padding and border, but not the margin.
.baseline If $rex_flag-baseline is true, then a .baseline class becomes available for use; this class should be applied to a wrapping div in order to test a "module", "content area" or element's placement on a "local" baseline grid. When the grid is clicked (i.e., :active) the base lines will hide and each child element will be outlined with a red border.
.h1-.h6 All headings (e.g., h1 through h6) have a corresponding class of the same name (i.e., .h1 through .h6); for more information, read: Don’t Style Headings Using HTML5 Sections. These classes can be disabled via the $rex_flag-heading-classes variable.
.sh1-.sh6 In the same vein as the heading classes above, there's a set of subheading classes (i.e., .sh1 through .sh6) that have similar functionality and can be disabled via the $rex_flag-subheading-classes variable.

Caveats, limitations and/or assumptions ↥

  1. If you change the base font-size and line-height, there's no guarantees that out of the box styles will adapt well; in other words, changing these variables will probably require one to adjust each of Rex's elements to fit the new base values (for more information, see Q & A section below).
  2. Due to the proverbial "fudge factor", the .baseline class does not actually align its grid lines to the baseline of a character; instead, this class aligns the text to the vertical center of a grid line.
  3. Buyer beware: I make heavy use of the rem unit, with no fallbacks.

Q & A ↥

Q: How do I make everything smaller?

A: Easy. Just override these two variables:

$rex_base-font-size: 14px;
$rex_base-line-height: 22px;

Bam!

Contributing ↥

Please review the contributing guidelines for this repository.

Bumping the version:

When a build is ready for a version bump ...

  1. Update version key value in source/package.json.
  2. Update version key value in bower.json.
  3. Build: $ grunt.
  4. Update the changelog and release history in the README.md (if copy/pasting, don't forget to update the date and version numbers).
  5. Push changes to GitHub.
  6. Visit the releases page and click "Draft a new release".
  7. Type the new version number in the "Tag version" field (e.g., v1.2.1).
  8. Click "Publish release".

Note: REX uses Semantic Versioning.

Feedback ↥

Bugs? Constructive feedback? Questions?

Changelog ↥

Release history ↥

LEGAL

Copyright © 2013-2014 Micky Hulse

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

:octocat: