Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details

All Projects → hiulit → Sassy Gridlover

hiulit / Sassy Gridlover

Licence: mit

Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.

Labels

html sass typography sass-mixins

Projects that are alternatives of or similar to Sassy Gridlover

Bourbon

Bourbon is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.

Stars: ✭ 9,065 (+3965.02%)

Mutual labels: sass, sass-mixins

Synergy

Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects

Stars: ✭ 146 (-34.53%)

Mutual labels: sass, sass-mixins

Light Blue Dashboard

🔥 Free and open-source admin dashboard template built with Bootstrap

Stars: ✭ 110 (-50.67%)

Mutual labels: typography, sass

Sing App

💥Free and open-source admin dashboard template built with Bootstrap 4.5 💥

Stars: ✭ 1,187 (+432.29%)

Mutual labels: typography, sass

Han

「漢字標準格式」印刷品般的漢字排版框架 Han.css: the CSS typography framework optimised for Hanzi.

Stars: ✭ 2,156 (+866.82%)

Mutual labels: typography, sass

Personal Goals

List of books I've read, projects I've done, videos I've seen, articles I've read or podcasts I've listened to.

Stars: ✭ 75 (-66.37%)

Mutual labels: typography, sass

Sscss

Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.

Stars: ✭ 119 (-46.64%)

Mutual labels: sass, sass-mixins

Sassmagic

Collection best of Sass mixins and function

Stars: ✭ 795 (+256.5%)

Mutual labels: sass, sass-mixins

Sassessentials

Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.

Stars: ✭ 167 (-25.11%)

Mutual labels: sass, sass-mixins

Css Vars

Sass mixin to use CSS Custom Properties with Sass

Stars: ✭ 164 (-26.46%)

Mutual labels: sass, sass-mixins

Sassyfication

💅Library with sass mixins to speed up your css workflow.

Stars: ✭ 51 (-77.13%)

Mutual labels: sass, sass-mixins

Sass Extras

Useful utilities for working with Sass

Stars: ✭ 179 (-19.73%)

Mutual labels: sass, sass-mixins

Spinners

A Sass mixin to generate fully customizable, pure CSS3 loading/busy indicators

Stars: ✭ 33 (-85.2%)

Mutual labels: sass, sass-mixins

Vertical Rhythm

Put some typographical vertical rhythm in your CSS. LESS, Stylus and SCSS/SASS versions included.

Stars: ✭ 83 (-62.78%)

Mutual labels: typography, sass

Typi

A sass mixin to make responsive typography easy

Stars: ✭ 862 (+286.55%)

Mutual labels: typography, sass

Column Setter

Custom responsive grids in Sass that work in older browsers.

Stars: ✭ 117 (-47.53%)

Mutual labels: sass, sass-mixins

Typesettings

A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.

Stars: ✭ 380 (+70.4%)

Mutual labels: typography, sass

Utility Opentype

Simple, CSS utility classes for advanced typographic features.

Stars: ✭ 481 (+115.7%)

Mutual labels: typography, sass

Bemify

Sass Mixins to write BEM-style SCSS source

Stars: ✭ 149 (-33.18%)

Mutual labels: sass, sass-mixins

Shevy

Configurable Vertical Rhythm & Typography for Sass

Stars: ✭ 177 (-20.63%)

Mutual labels: typography, sass

View All Similar Projects ➔

Sassy-Gridlover

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 html, body, h1-h6, p, ul, ol, etc. but you can of course apply your adjusted values to any element by editing the CSS later.

First of all

Go play around with the awesome Gridlover app!

It's so much fun! 😄

Installation

Install Sassy-Gridlover via bower.

$ bower install sassy-gridlover

Install Sassy-Gridlover via npm.

$ npm install sassy-gridlover

Install Sassy-Gridlover via yarn.

$ yarn add sassy-gridlover

or Download the repository and include the sassy-gridlover folder to your Sass directory.

Getting started

Sassy-Gridlover consists of 7 configurable variables:

$sgl-base-font-size;
$sgl-base-line-height;
$sgl-base-unit;
$sgl-scale-factor;
$sgl-debug-mode;
$sgl-debug-mode-max-width;
$sgl-extras;

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

Setup

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.

Mixins

By default, all the mixins (except sgl-html) will output em. But you can also choose to output px, rem or pxrem.

`sgl-html()`

This mixin is mandatory for the all the other mixins to work.

To use on <html>.

Outputs font-size and line-height always in px.

html {
    @include sgl-html($font-size: $sgl-base-font-size);
}

Parameters

Name	Description	Type	Default value
`$font-size`	Root font size.	`Number`	`$sgl-base-font-size`

`sgl-body()`

To use on <body>.

Outputs font-size and line-height.

body {
    @include sgl-body($line-height-step: 0, $unit: $sgl-base-unit);
}

Parameters

Name	Description	Type	Default value
`$line-height-step`	Multiplies the step number by the base `line-height` (from `sgl-html`). If `0` is set, it will actually multiply by `1`.	`Number`	0
`$unit`	Unit to output (`px`, `em`, `rem`, `pxrem`).	`String`	`$sgl-base-unit`

`sgl-heading()`

To use on headings <h1> - <h6>.

Outputs font-size, line-height, margin-top and margin-bottom.

@include sgl-heading($font-size-step, $line-height-step, $margin-top-step, $margin-bottom-step, $unit: $sgl-base-unit, $base-value: $sgl-base-font-size)

Parameters

Name	Description	Type	Default value
`$font-size-step`	Creates an exponent of the base `font-size` (from `sgl-html`) in conjunction with `sgl-scale-factor`. `0` is the base `font-size`.	`Number`	-
`$line-height-step`	Multiplies the step number by the base `line-height` (from `sgl-html`). If `0` is set, the `line-height` will grow with the `font-size` accordingly.	`Number`	-
`$margin-top-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	-
`$margin-bottom-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	-
`$unit`	Unit to output (`px`, `em`, `rem`, `pxrem`).	`String`	`$sgl-base-unit`
`$base-value`	Optional parameter for a different base font size when using `em`.	`Number`	`$sgl-base-font-size`

`sgl-margins()`

To use on <p>, <ul>, <ol>, <pre>, <table>, <blockquote>, etc.

Outputs margin-bottom and margin-top.

@include sgl-margins($margin-top-step, $margin-bottom-step, $unit: $sgl-base-unit, $base-value: $sgl-base-font-size)

Parameters

Name	Description	Type	Default value
`$margin-top-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	-
`$margin-bottom-step`	Multiplies the step number by the base `line-height` (from `sgl-html`).	`Number`	-
`$unit`	Unit to output (`px`, `em`, `rem`, `pxrem`).	`String`	`$sgl-base-unit`
`$base-value`	Optional parameter for a different base font size when using `em`.	`Number`	`$sgl-base-font-size`

Debug mode

Enables/disables debug mode.

Outputs background lines imitating a notebook's sheet.

Parameters

Name	Description	Type	Default value
`$sgl-debug-mode`	Enables/disables debug mode.	`Boolean`	`false`

Declare it in your own _variables.scss, _config.scss or the like. Basically, it must be declared before the @import "sassy-gridlover".

Example

Extras

Styles to make sure everything is aligned.

Outputs extra reset styles.

Parameters

Name	Description	Type	Default value
`$sgl-extras`	Outputs styles to make sure everything is aligned.	`Boolean`	`false`

Declare it in your own _variables.scss, _config.scss or the like. Basically, it must be declared before the @import "sassy-gridlover".

CSS output

html hr,
html .hr {
    border: 1px solid;
    margin: -1px 0;
}

html a,
html b,
html i,
html strong,
html em,
html small,
html code {
    line-height: 0;
}

html sub,
html sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

html sup {
    top: -0.5em;
}

html sub {
    bottom: -0.25em;
}

Example usage

SCSS

$sgl-debug-mode: false;
// $sgl-debug-mode-max-width: 1024; // Only needed if `$sgl-debug-mode` is `true`.
$sgl-extras: false;

@import "../../sassy-gridlover/sassy-gridlover";

html {
    @include sgl-html;
}

body {
    @include sgl-body;
}

h1 {
    @include sgl-heading(3, 0, 1, 2);
}

h2 {
    @include sgl-heading(2, 0, 1, 1);
}

h3 {
    @include sgl-heading(1, 0, 1, 0);
}

h4 {
    @include sgl-heading(0, 0, 1, 0);
}

h5 {
    @include sgl-heading(0, 0, 1, 0);
}

p,
ul,
ol,
pre,
table,
blockquote {
    @include sgl-margins(0, 1);
}

ul ul,
ol ol,
ul ol,
ol ul {
    @include sgl-margins(0, 0);
}

CSS output

html {
  font-size: 18px;
  line-height: 23px;
}

body {
  font-size: 1em;
  line-height: 1.27778em;
}

h1 {
  font-size: 4.22223em;
  line-height: 1.21053em;
  margin-top: 0.30264em;
  margin-bottom: 0.60527em;
}

h2 {
  font-size: 2.61112em;
  line-height: 1.46809em;
  margin-top: 0.48937em;
  margin-bottom: 0.48937em;
}

h3 {
  font-size: 1.61112em;
  line-height: 1.58621em;
  margin-top: 0.79311em;
  margin-bottom: 0em;
}

h4 {
  font-size: 1em;
  line-height: 1.27778em;
  margin-top: 1.27778em;
  margin-bottom: 0em;
}

h5 {
  font-size: 1em;
  line-height: 1.27778em;
  margin-top: 1.27778em;
  margin-bottom: 0em;
}

p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0em;
  margin-bottom: 1.27778em;
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-top: 0em;
  margin-bottom: 0em;
}

Changelog

See CHANGELOG.

Contributing

See CONTRIBUTING.

Authors

Me 😛 @hiulit.

Inspiration and alternatives

Gridlover app - The tool to establish a typographic system with modular scale and vertical rhythm on which Sassy-gridlover is based.
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.

Credits

Thanks to:

Gridlover app - Created by Tuomas Jomppanen & Ville Vanninen.
Marc Mintel (@marcmintel) for his amazing article on how to Write Sass plugins like a pro.
Hugo Giraudel (@hugogiraudel) for helping with issues and setting up 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.
Thomas Blum @tbaddade - For detecting a typo in sgl-extras variable.
Rizqi Nizamil Putra @rizqinizamil - For bringing up the changes #19 that led to v6.0.0.
Many other sources I don't recall right now... 😅 I'm trying to... 🤔 But when they come to me, I'll put them here right away! 😎

License

MIT License.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 223

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (2) 🔗