A Superclean, Minimal, Sass-based CSS Framework.
Primary.css provides a robust CSS foundation of HTML typography, forms, and elements that are easy to customise and style.
There are several ways of installing the awesome that is primary.css:
Download the compiled and minified Primary CSS file. And include primary.css located in /css in your website or Web app <head> part.
<link rel="stylesheet" href="primary.min.css" />`Alternatively, you can use the unpkg CDN to load compiled primary.css.
<link rel="stylesheet" href="https://unpkg.com/primary.css@1.0.0/css/primary.min.css" crossorigin="anonymous">Install primary.css for your Node powered apps with the npm package:
npm install primary.cssInstall primary.css with yarn:
yarn add primary.cssClone the repo from GitHub download the source CSS, and documentation files.
git clone https://github.com/amazingSurge/primary-css.gitThe file tree for the install looks like this:
├───dist // Dist files (git ignored)
│ ├───primary.css
│ └───primary.min.css
├───docs // Documentation
│ ├───index.html
│ └─── ...
├───scss // Scss source files
│ ├───base/
│ ├───elements/
│ ├───utilities/
│ └───primary.css
├───README.md
├───config.js
├───gulpfile.babel.js
├───Gemfile
└───package.json
You can customize your version of primary.css by editing SASS files in /scss directory or removing unneeded components from .scss source files.
Just follow the following steps:
-
Make sure you have the following tools installed: node, bundler, babel, gulp, sass.
-
Clone the project:
git clone https://github.com/amazingSurge/primary-css.git -
Install the dependencies:
bundler install npm install
When completed, you’ll be able to run the various commands provided from the command line.
| Task name | Description |
|---|---|
gulp default |
compiles everything just once. |
gulp build |
alias to gulp styles. |
gulp styles |
compile all scss from scss to dist folder. |
gulp beautify |
beautify your source files in scss folder. |
gulp watch |
watchs for changes in scss folder and rebuilds parts of the site as necessary. |
gulp version:major |
MAJOR version when you make incompatible API changes |
gulp version:minor |
MINOR version when you add functionality in a backwards-compatible manner |
gulp version:patch |
PATCH version when you make backwards-compatible bug fixes. |
gulp version |
alias to version:path. |
Primary.css uses Autoprefixer to make most styles compatible with earlier browsers. Primary.css is designed for modern browsers. For best compatibility, these browsers are recommended:
- Chrome (last 4)
- Microsoft Edge (last 4)
- Firefox (last 4)
- Safari (last 4)
- Opera (last 4)
- Internet Explorer 10+
The code is available under the MIT license.