npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sassy-gridlover

v6.0.5

Published

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

Downloads

305

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

hiulithiulit

Keywords

typographybaselinemodularscalevertical-rhythmsassscssmixinsgridlover

Readme

Sassy-Gridlover Build Status

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

Example of Sassy-Gridlover's debug mode

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

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:

License

MIT License.