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
  • Include in project
• Directories
  • Base
  • Components
  • Dist
  • Layout
  • Mixins
  • Public
  • Vars

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.