Oh yeah, root's kicking in!
- About
- Demonstration
- Installation
- SCSS API
- CSS
- Caveats, limitations and/or assumptions
- Q & A
- Contributing
- Feedback
- Changelog
- Release history
- LEGAL
About ↥
Essentially, this code serves as a slightly opinionated yet very simple "local baseline grid" toolkit for use in other css projects.
Wikipedia says:
… the baseline is the line upon which most letters "sit" and below which descenders extend.
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.
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.
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).
Just watch Rustlers' Rhapsody (Amazon VOD) and all will be explained. :)
Demonstration ↥
| DEVELOPMENT • html • css | PRODUCTION • html • css |
|---|---|
Note: Only the DEVELOPMENT demo uses normalize.css.
Installation ↥
There are several ways to install this code:
- Download as a
zip. - Clone it:
$ git clone https://github.com/mhulse/rex.git. - Fork it and clone:
$ git clone git@github.com:USERNAME/rex.git. - Just grab the relevant CSS (minified) and/or SCSS files.
- Using Bower:
$ bower install https://github.com/mhulse/rex.git.
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:
| 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 |
| 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. |
| Name | Shorthand | Description |
|---|---|---|
rex_baseline |
rex_bl |
Simple baseline mixin. |
rex_baseline-grid |
rex_blg |
Baseline grid css. |
CSS ↥
CSS details:
| 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 ↥
- If you change the base
font-sizeandline-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). - Due to the proverbial "fudge factor", the
.baselineclass 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. - Buyer beware: I make heavy use of the
remunit, 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;
Contributing ↥
Please review the contributing guidelines for this repository.
When a build is ready for a version bump ...
- Update
versionkey value insource/package.json. - Update
versionkey value inbower.json. - Build:
$ grunt. - Update the changelog and release history in the README.md (if copy/pasting, don't forget to update the date and version numbers).
- Push changes to GitHub.
- Visit the releases page and click "Draft a new release".
- Type the new version number in the "Tag version" field (e.g.,
v1.2.1). - Click "Publish release".
Note: REX uses Semantic Versioning.
Feedback ↥
Bugs? Constructive feedback? Questions?
Changelog ↥
- 2014-01-24 v3.0.0 Namespaces.
- 2013-11-09 v2.0.0 Simplified base styles.
- 2013-11-03 v1.2.1 Minor v1.2.1 patch.
- 2013-11-01 v1.2.0 More control.
- 2013-09-15 v1.1.0 Better organization.
- 2013-09-13 v1.0.0 On, Wildfire, on!
- 2013-08-25 v0.4.0 Bower version bump.
- 2013-08-18 v0.3.0 SCSS build setup.
- 2013-08-16 v0.2.0 Bower pre-release.
- 2013-08-10 v0.1.0 Maximum Grunt setup.
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.
