1.1.0 • Published 3 years ago
mcssbase v1.1.0
base.css
Base CSS to start a design system
Usage
npm i mcssbase
Html
<link rel="stylesheet" href="<mcssbase_root>/dist/css/base.css" />
<!-- or use the minified version -->
<link rel="stylesheet" href="<mcssbase_root>/dist/css/base.min.css" />
JS
import 'mcssbase/dist/css/base.css';
// or use the minified version
import 'mcssbase/dist/css/base.min.css';
Starting with Bootstrap
The following wheels are not to be reinvented.
Reboot
https://getbootstrap.com/docs/5.0/content/reboot/
Breakpoints
https://getbootstrap.com/docs/5.0/layout/breakpoints/
Grid system
https://getbootstrap.com/docs/5.0/layout/grid/
Colours
@TODO
Utilities
Following utilities are included in base.css
- Display: https://getbootstrap.com/docs/5.0/utilities/display/
- Flex: https://getbootstrap.com/docs/5.0/utilities/flex/
- Spacing: https://getbootstrap.com/docs/5.0/utilities/spacing/
- Note We have overwritten the Boostrap spacing map
$spacers
to use CSS variable--base-spacing
, see below.
- Note We have overwritten the Boostrap spacing map
CSS Variables
Name | Description | Default |
---|---|---|
--base-spacing | Base value for spacing utilities such as .mt-* and .pb-* | 8px |
--color-* | Colour names |