Vertical Rhythm Reset

The perfect starting point for CSS normalization, responsive vertical rhythm grids and modular scale typography.

Simple implementation, flexible customization options, optimized CSS output, smart mixins for effortless grid alignment and a range of helper classes provide a robust and maintainable foundation on which to build upon.

GitHub NPM View Demo View SassDocs
  • Fast-and-easy implementation

    As little as two lines of code generates the CSS foundation for you project.

    Sensible default values standardize the presentation of elements across desktop and mobile browsers, align elements to a vertical rhythm grid, provide a harmonious range of modular scale-based font sizes, and deliver responsive typography for optimzed readability on small, medium and large screens.

  • Simplified vertical rhythm grids

    Maintain visual symmetry by aligning elements to an invisible-yet-recognizable layout pattern.

    Aligning text-only elements to a vertical rhythm grid can be done easily with vanilla CSS, but alignment becomes more challenging once images, borders, margins, padding and a range of font sizes are introduced. Vertical Rhythm Reset simplifies grid alignment by providing a single mixin that calculates the CSS property values needed for proper grid alignment.

  • Modular scale typography

    Bring harmony to your typography using a calculated range of proportional font sizes.

    Modular scale typography helps answer the question, "What font-sizes should I use for this project?" by providing a consistent and visually pleasing range of font sizes to choose from.

  • CSS reset & normalization

    Standardize the default presentation of HTML5 elements across desktop and mobile browsers.

    Unopinionated reset and normalization rules provide a sound foundation on which to build your own CSS styles. These rules also ensure that elements align to a vertical rhythm grid by default.

  • Responsive layout support

    Define custom breakpoints, each with their own vertical rhythm and typography settings.

    A single map provides the flexibility to define the font-size, line-height, and modular scale for multiple breakpoints. Mixins intelligently auto-generate media queries and recalculate values for each breakpoint when alignment properties are specified using a mixin.

  • Smart mixins for optimized CSS

    Create pixel-perfect layouts and production-ready CSS in less time and with fewer headaches.

    The mixins provided by Vertical Rhythm Reset handle browser rounding errors, optimize CSS using shorthand notation, and know when media queries and property values need to be recalculated. Smart mixins help keep your CSS as lightweight and efficient as possible.

  • Helper classes and rules

    Set vertical rhythm and typography properties using CSS class names and HTML properties.

    Helper rules and classes provide a convenient way to set typography and vertical rhythm properties without using mixins. This makes it easy to quickly change the font size, specify the height, or add margins and padding to HTML elements without the need to create custom CSS/SCSS rules.

  • SassDoc Documentation

    Seamless integration with your existing Sass project documentation.

    Full documentation is available for all variables and mixins courtesy of SassDoc, making integration with your existing project documentation effortless.


See the Pen Vertical Rhythm Reset by John Hildenbiddle (@jhildenbiddle) on CodePen.