Paper CSS
An opinionated, lightweight CSS framework based on the Material Design 2 specification. This is intended to provide helper classes and base styles which can be utilised by component libraries to build more complex components.
Contents
Usage
Install
Install using your prefered package manager.
Yarn
yarn add @jamescoyle/paper-css
NPM
npm install @jamescoyle/paper-css
Include in project
Webpack
@import '~@jamescoyle/paper-css/index';
@import '~@jamescoyle/paper-css/layout/[layout-type]';
@import '~@jamescoyle/paper-css/component/[component-type]';SASS
@import '[path-to-node-modules]/@jamescoyle/paper-css/index';
@import '[path-to-node-modules]/@jamescoyle/paper-css/layout/[layout-type]';
@import '[path-to-node-modules]/@jamescoyle/paper-css/component/[component-type]';HTML - Not recommended for production
<link rel="stylesheet" href="[path-to-node-modules]/@jamescoyle/dist/index.css" />
<link rel="stylesheet" href="[path-to-node-modules]/@jamescoyle/dist/layout/[layout-type].css" />
<link rel="stylesheet" href="[path-to-node-modules]/@jamescoyle/dist/component/[component-type].css" />Directories
Base
The base folder contains base styles which are included in index.scss. These styles do not need importing into your project.
Components
Each file in this folder is responsible for styling a paricular UI component and often require specific markup. These files need to be imported into your project in order to use them.
Dist
The dist folder provides compiled versions of the scss files. It is not recommended that you use these files in production but they may be useful for quick prototyping and testing.
Layout
Each file in this folder is responsible for a particular aspect of document layout. As with the components, you need to import these files in order to use them in your project.
Mixins
This folder contains mixins which help to define certain styles. These are for internal use but you are free to import them into your own SASS projects if they are helpful.
Public
The public folder contains the code for the paper-css documentation website. You shouldn't need to touch anything in here unless you are contributing to the documentation.
Vars
The vars folder contains collections of CSS custom properties that are imported into base.scss and set on the :root element making them available anywhere. You do not need to import these manually.