Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 - h4 headings, but you can of course apply your adjusted values to any element by editing the css later.
Go play around with the awesome Gridlover app!
It's so much fun! :D
Install Sassy-Gridlover via bower
$ bower install sassy-gridloverInstall Sassy-Gridlover via npm
$ npm install sassy-gridloveror Download the repository and include the sassy-gridlover folder to your Sass directory.
Sassy-Gridlover consists of 5 configurable variables:
$sgl-debug-mode;
$sgl-base-font-size;
$sgl-base-line-height;
$sgl-base-unit;
$sgl-scale-factor;and 4 mixins:
@mixin sgl-html();
@mixin sgl-body();
@mixin sgl-heading();
@mixin sgl-margins();These are the 4 functionalities of the Gridlover app that you (should) have been playing with ;)
Import _sassy-gridlover.scss to your main style sheet.
@import "sassy-gridlover";Change the configurable variables values in _config.scss to your liking.
I would encourage you not to change them directly here, though. It would be better to declare them in your _variables.scss, _config.scss or the like.
// Scale factor constants.
// Don't change them ever!
$MINOR_SECOND: 1.067;
$MAJOR_SECOND: 1.125;
$MINOR_THIRD: 1.2;
$MAJOR_THIRD: 1.25;
$PERFECT_FOURTH: 1.333;
$AUGMENTED_FOURTH: 1.414;
$PERFECT_FIFTH: 1.5;
$MINOR_SIXTH: 1.6;
$GOLDEN_SECTION: 1.618;
$MAJOR_SIXTH: 1.667;
$MINOR_SEVENTH: 1.778;
$MAJOR_SEVENTH: 1.875;
$OCTAVE: 2;
$MAJOR_TENTH: 2.5;
$MAJOR_ELEVENTH: 2.667;
$MAJOR_TWELFTH: 3;
$DOUBLE_OCTAVE: 4;
// Default font size.
// Don't change it ever!
$SGL_DEFAULT_FONT_SIZE: 16;
// Configurable variables.
// Ok... You can change these variables! :D
// Although I'd encourage you not to change them directly here.
// I'd rather declare them in your `_variables.scss`, `_config.scss` or the like.
/// Enables/disables **Debug mode** (`true`/`false`).
///
/// Outputs background lines imitating a notebook's sheet.
///
/// Declare it in your own `_variables.scss`, `_config.scss` or the like.
///
/// Basically, **it must be declared before the** `@import "sassy-gridlover"`.
///
/// @example scss
/// $sgl-debug-mode: true;
///
/// @example css
/// html {
/// background-image: linear-gradient(rgba(0, 170, 255, 0.3) 1px, transparent 1px);
/// background-position: left top;
/// background-size: 19px 19px;
/// }
///
/// body {
/// box-shadow: 1px 0px 0px rgba(0, 170, 255, 0.3), -1px 0px 0px rgba(0, 170, 255, 0.3);
/// }
///
/// @type boolean
$sgl-debug-mode: false !default;
/// Base font size.
///
/// @type number
$sgl-base-font-size: $SGL_DEFAULT_FONT_SIZE !default;
/// Base line height.
///
/// @type number
$sgl-base-line-height: 1.2 !default;
/// Base unit (`px`, `em`, `rem`, `pxrem`).
///
/// @type string
$sgl-base-unit: "pxrem" !default;
/// Scale factor.
///
/// @type number
$sgl-scale-factor: $GOLDEN_SECTION !default;Set $sgl-debug-mode to true (false by default) to output background lines imitating a notebook's sheet.
Declare it in your own _variables.scss, _config.scss or the like.
Basically, it must be declared before the @import "sassy-gridlover".
By default, all the mixins (except sgl-html) will output pxrem. But you can also choose to output px, em or rem.
To use in <html>.
Outputs font-size and line-height always in px.
@mixin sgl-html($font-size: $sgl-base-font-size)Accepts 1 argument:
$font-size: Base font size (without unit, just a number).
To use in <body>.
Outputs font-size and line-height.
@mixin sgl-body($unit: $sgl-base-unit)Accepts 1 argument:
$unit: Unit to output (px,em,rem,pxrem).
To use in headings <h1> - <h4>.
Outputs font-size, line-height, margin-bottom and margin-top.
@mixin sgl-heading($step, $unit: $sgl-base-unit, $base-value: $sgl-root-font-size)Accepts 3 arguments:
$step:<h1>→$step: 3<h2>→$step: 2<h3>→$step: 1<h4>→$step: 0
$unit: Unit to output (px,em,rem,pxrem).$base-value: Optional call with a different base font size when using em.
To use in <p>, <ul>, <ol>, <pre>, <table>, <blockquote>, etc.
Outputs margin-bottom and margin-top.
@mixin sgl-margins($unit: $sgl-base-unit, $base-value: $sgl-root-font-size)Accepts 2 arguments:
$unit: Unit to output (px,em,rem,pxrem).$base-value: Optional call with a different base font size when using em.
@import "sassy-gridlover.scss";
body {
@include sgl-body($sgl-base-font-size, "rem");
}
h1 {
@include sgl-heading(3, "em");
}
h2 {
@include sgl-heading(2, "px");
}
h3 {
@include sgl-heading(1, "pxrem");
}
h4 {
@include sgl-heading(0);
}
p, ul, ol, pre, table, blockquote {
@include sgl-margins();
}html {
font-size: 16px;
line-height: 19px;
}
body {
font-size: 16px;
line-height: 19px;
font-size: 1rem;
line-height: 1.1875rem;
}
h1 {
font-size: 4.25em;
line-height: 1.11765em;
margin-bottom: 0.55883em;
margin-top: 0.27942em;
}
h2 {
font-size: 42px;
line-height: 57px;
margin-bottom: 19px;
margin-top: 19px;
}
h3 {
font-size: 26px;
line-height: 38px;
margin-bottom: 0px;
margin-top: 19px;
font-size: 1.625rem;
line-height: 2.375rem;
margin-bottom: 0rem;
margin-top: 1.1875rem;
}
h4 {
font-size: 16px;
line-height: 19px;
margin-bottom: 0px;
margin-top: 19px;
font-size: 1rem;
line-height: 1.1875rem;
margin-bottom: 0rem;
margin-top: 1.1875rem;
}
p,
ul,
ol,
pre,
table,
blockquote {
margin-bottom: 19px;
margin-top: 0;
margin-bottom: 1.1875rem;
margin-top: 0;
}- Added Travis CI
NOTE: This release contains breaking changes!
-
Refactored Sassy-Gridlover so it stays up to date with Gridlover. Now the base font size and line height is added to
<html>instead of<body>.- Added a new mixin:
sgl-html(). - Created a global variable:
$sgl-root-font-size(to rule them all!). sgl-body()now only accepts 1 argument$unit: $sgl-base-unit→@mixin sgl-body($unit: $sgl-base-unit).@mixin sgl-body($font-size: $sgl-base-font-size, $unit: $sgl-base-unit)- Fixed some decimals on
remoutputs. - Simplified
sgl-show-grid(). Now it goes insidesgl-html()and it only accepts 1 argument. - Added
$unitinsgl-show-margins()as a parameter for more flexibility. $sgl-base-font-size:has now$SGL_DEFAULT_FONT_SIZEas default.
- Added a new mixin:
-
Updated links to the Gridlover app.
NOTE: This release contains breaking changes!
- Prefixed with
sgl-some functions that were left behind in previous versions (so they don't collide with other functions with the same name from other frameworks #9). - Changed some margins (to keep Sassy-Gridlover up to date with Gridlover's margins changes).
- Matched HTML example with Gridlover's.
- Refactored debug mode (created
_debug-mode.csswith a couple of mixins:sgl-show-gridandsgl-show-margins).- Removed
max-widthandpaddingfrom<body>. - Fixed background lines styles.
- Added arrows to show margins directions.
- Now the debug mode works with the different units (
px,em,rem,pxrem).
- Removed
- Published Sassy-Gridlover as an npm package.
Published Sassy-Gridlover as an npm package.- Failed at publishing the npm package xD.
- Fixed decimals on line heights when using
em#12.
- Added debug mode.
NOTE: This release contains breaking changes!
- Added
sgl-prefix to all functions so they don't collide with other functions with the same name from other frameworks #9. - Changed mixins'
sassy-gridlover-prefix forsgl-.
NOTE: This release contains breaking changes!
- Added em support.
- Added @param {string} $unit [$sgl-base-unit] - Unit to output
@param {Boolean} $rem [false] - Outputs rem units ifDeprecatedtrue
- Upgraded to SassDoc v2.1.0
- Added SassDoc documentation #6.
- Applied naming conventions to constants #5.
- Added
pow()function for Compass, Sassy-math, etc. #4 - Changed strings for lengths #3
- Added
!defaultto configurable variables #2
- Released stable version.
- Added bower installation support.
- Initial commit.
- Gridlover app - The tool to establish a typographic system with modular scale and vertical rhythm.
- Knife - Nail vertical rhythm, modular scale, and REMs like a boss with this simple set of SASS/SCSS variables, functions and mixins.
- gridlover-mixin - A mixin to generate modular scale and vertical rhythm for your typography.
Thanks to:
- Gridlover app - Created by Tuomas Jomppanen & Ville Vanninen.
- Sassy-math © 2012 - For the
@function exponent(). Created by Sam Richard, Mario Valencia and Scott Kellum. - Marc Mintel (@marcmintel) for his amazing article on how to Write Sass plugins like a pro.
- Hugo Giraudel (@hugogiraudel) for helping with issues and SassDoc.
- Walid Mokrani (@walmokrani) for helping with adding em support.
- Takeru Suzuki (@terkel) - For the
@function decimal-xxx. - Matt Andrews (@matthew-andrews) - For his Travis CI Sass Example.
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.
In jurisdictions that recognize copyright laws, the author or authors of this software dedicate any and all copyright interest in the software to the public domain. We make this dedication for the benefit of the public at large and to the detriment of our heirs and successors. We intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to http://unlicense.org/