CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-normalize-scss

A Sass port of normalize.css that provides cross-browser normalization with configurable variables and vertical rhythm mixins.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

normalize-scss

normalize-scss is a Sass port of normalize.css v7.0.0 that provides cross-browser normalization styles with additional Sass features. It extends the original normalize.css with configurable variables, vertical rhythm mixins for consistent typography scaling, and flexible section-based output control.

Package Information

  • Package Name: normalize-scss
  • Package Type: npm
  • Language: Sass/SCSS
  • Installation: npm install normalize-scss

Core Imports

Standard Sass import:

@import 'normalize-scss/sass/normalize';

Immediate import (outputs CSS directly):

@import 'normalize-scss/sass/normalize/import-now';

Basic Usage

Simple Usage

@import 'normalize-scss/sass/normalize';
@include normalize();

With Custom Variables

// Set variables before importing
$base-font-size: 18px;
$base-line-height: 27px;
$base-font-family: 'Helvetica Neue', Arial, sans-serif;

@import 'normalize-scss/sass/normalize';
@include normalize();

Selective Output

@import 'normalize-scss/sass/normalize';

// Include only specific sections
@include normalize((document sections forms));

// Exclude specific sections
@include normalize($exclude: (embedded scripting));

Architecture

normalize-scss is built around several key components:

  • Core Normalize Mixin: Main normalize() mixin with section-based filtering
  • Configuration Variables: 11 variables controlling typography, layout, and behavior
  • Vertical Rhythm System: Advanced typography mixins for consistent spacing and line-height calculations
  • Multiple Integration Methods: Support for npm, Eyeglass, Ruby Gem, and Bower
  • Section-Based Output: Modular CSS output organized into logical sections (document, forms, text, etc.)

Capabilities

Core Normalization

Primary normalization functionality that outputs cross-browser CSS styles with optional section filtering.

/**
 * Main mixin to output normalize CSS with optional section filtering
 * @param $include - Sections to include (default: (all))
 * @param $exclude - Sections to exclude (default: ())
 */
@mixin normalize($include: (all), $exclude: ());

Available sections: document, sections, grouping, links, text, embedded, forms, interactive, scripting, hidden

Configuration Variables

Typography configuration variables that control font sizing, spacing, and layout behavior.

// Typography variables
$base-font-size: 16px !default;
$base-line-height: 24px !default;
$base-unit: 'em' !default;
$base-font-family: null !default;

// Heading font size variables
$h1-font-size: 2 * $base-font-size !default;
$h2-font-size: 1.5 * $base-font-size !default;
$h3-font-size: 1.17 * $base-font-size !default;
$h4-font-size: 1 * $base-font-size !default;
$h5-font-size: 0.83 * $base-font-size !default;
$h6-font-size: 0.67 * $base-font-size !default;

// Layout variables
$indent-amount: 40px !default;
$normalize-vertical-rhythm: false !default;

Vertical Rhythm System

Advanced typography system for maintaining consistent vertical spacing and line-height calculations across all elements.

/**
 * Converts px values to specified unit for vertical rhythm
 * @param $value - Value to convert (must be in px)
 * @param $relative-to - Reference font size (default: $base-font-size)
 * @param $unit - Target unit (default: $base-unit)
 * @return Converted value in target unit
 */
@function normalize-rhythm($value, $relative-to: $base-font-size, $unit: $base-unit);

/**
 * Sets font-size using vertical rhythm conversion
 * @param $value - Font size in pixels
 * @param $relative-to - Reference font size (default: $base-font-size)
 */
@mixin normalize-font-size($value, $relative-to: $base-font-size);

Vertical Rhythm

Integration Methods

NPM Integration

@import 'normalize-scss/sass/normalize';
@include normalize();

Eyeglass Integration

When using Eyeglass, import as:

@import 'normalize';
@include normalize();

Ruby Gem Integration

With Compass:

require "normalize-scss"
@import 'normalize';
@include normalize();

Bower Integration

The Bower package points to the immediate import version:

@import 'bower_components/normalize.scss/sass/normalize/import-now';

Browser Support

  • Chrome (last four versions)
  • Edge (version 25 and later)
  • Firefox (last four versions)
  • Firefox ESR
  • Internet Explorer 9+
  • Opera (last four versions)
  • Safari (last four versions)

Types

// Section names for include/exclude parameters
type NormalizeSection = 
  | 'document'
  | 'sections' 
  | 'grouping'
  | 'links'
  | 'text'
  | 'embedded'
  | 'forms'
  | 'interactive'
  | 'scripting'
  | 'hidden'
  | 'all';

// Supported units for vertical rhythm
type Unit = 'px' | 'em' | 'rem';
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/normalize-scss@7.0.x
Publish Source
CLI
Badge
tessl/npm-normalize-scss badge