Resets

CSS reset is a technique that makes selected elements display in the same way in different browsers by default.

In Magento UI library there are 5 pre-defined resets that can be called by appropriate mixin..

Magento reset

Magento UI library has a set of variables that configure UI elements. Magento reset uses this list to define the default state of html elements. It sets up the basic typography, forms style, buttons style, tables style using variables which are specified in your theme. Magento reset is made to avoid re-defining same elements by using some reset techniques and then set up different styles to these elements.

To get Magento UI library reset in your theme, use mixin:

  .lib-magento-reset();

Normalize.css v3

Normalize.css is a known CSS reset that makes browsers render all elements more consistently with current modern standards requirements.

To get normalize reset in your theme, use mixin:

  .lib-normalize();

Reset CSS v2.0

The goal of a reset stylesheet is to reduce browser inconsistency in basic elements: default line heights, margins and font sizes of headings, and so on.

To get reset CSS in your theme, use mixin:

  .lib-reset();

Universal Selector ‘*’ Reset

This reset defines all elements' margin and padding to 0.

To get universal selector ‘*’ reset in your theme, use mixin:

  .lib-universal();

Html5doctor Reset Stylesheet v1.6.1

Html5doctor reset is a reset mixin that includes all html5 elements. Deprecated elements (like <acronym>, <center> and <big>) are removed.

To get html5doctor reset in your theme, use mixin:

  .lib-html5doctor-reset();

Global border-box

This mixin defines all elements' box-sizing to border-box.

To set box-sizing: border-box globally, use mixin:

  .lib-set-default-border-box();