basesheet

A better CSS foundation

Overview

• Helpful utility classes
• Typography and spacing custom variables
• Responsive class-name suffixes (eg. .hide@md)
• Lightweight reset (based on Eric Meyer's CSS reset v2)
• Disables animations based on prefers-reduced-motion
• Dispatches single taps without delay

Usage

CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/@shwilliam/basesheet@latest"
/>

NPM package

• Add this package as a dependency (npm i @shwilliam/basesheet)
• Import it in your JavaScript file

import '@shwilliam/basesheet'

FAQ

What's up with these long class names?

This stylesheet loosely follows the BEM conventions with several exceptions.

1. Modifier classes can be used on their own
2. Classes prefixed with a hyphen (eg. -success) modify a style and should not be used on their own

This font size is gross; how do I change it?

body {
  font-size: 13px;
}

Contributing

This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:

1. Fork this project
2. Create a branch (git checkout -b new-branch)
3. Commit your changes (git commit -am 'add new feature')
4. Push to the branch (git push origin new-branch)
5. Submit a pull request!