Download

PCC (now in ) can be downloaded in two different ways.

Compiled

Compiled and minified CSS file, ready for including and using in your project.

Download compiled

Source

Source LESS code and Gulp file. Requires LESS compiler to compiling code and Gulp to running tasks.

Download source

Clone Repo

Use following command in terminal

git clone https://github.com/pgalias/pure-css-components.git

Bower

You can also download PCC using Bower

bower install pure.css.components

NPM

You can also download via NPM

npm install pure.css.components --save

Compiling CSS

PCC uses Gulp for working and building library.

Available Gulp commands

  • gulp components

    Generates CSS file without themes in css directory

  • gulp theme --name filename_without_extension

    Generates CSS file of themes in css directory

  • gulp compile

    Generates CSS file with components and themes in css directory

  • gulp minify

    Minifies all CSS files in css directory

  • gulp [default]

    Runs compile and minify tasks

Usage

PCC provides three CSS files in dist. You can use it in your project in three various ways

  • Simply include components.css file into your head section. It contains all components and their themes in one file

    <head>
      ...
      <link rel='stylesheet' href='path/to/components.min.css'>
    </head>
  • Include separated components-alone.css with desired theme.css file into your head section.

    <head>
      ...
      <link rel='stylesheet' href='path/to/components-alone.min.css'>
      <link rel='stylesheet' href='path/to/components-{name}.theme.min.css'>
    </head>

    where {name} is name of theme

  • Include only components-alone.css file. It has only raw styles without margins, paddings, font sizes, etc.

    <head>
      ...
      <link rel='stylesheet' href='path/to/components-alone.min.css'>
    </head>