Necssary

The essential styles for a solid foundation in your user interface.

Includes

• normalize.css v8.0.1
• box-sizing
• elements reset
• base styling for elements

Install

npm install necssary

Usage

Import necssary at the top of your index file and write your project specific styling after that.

index.css

@import 'necssary';
@import './example.css';

If you are only interested in the unopinionated styling, it is possible to import only the core styles. This includes everything except the base styling for elements.

/* Contains normalize.css, box-sizing, and elements reset. */
@import 'necssary/core';

/* Contains the opinionated base styles. */
@import 'necssary/base';

This part is optional and includes example styles that are not essential for using this package.

example.css

/**
 * Example styles that are not required 
 * with this package. 
 */

body {
  font-family: var(--body-font);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
}

:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
}

a {
  text-decoration: none;
}

Preview

Preview the styling for the HTML elements here.

Want a bit more context about this package and why? Read my introduction post if you are curious here.