If you just need to include the latest compiled version of the PrimoCSS Framework, use our hosted version to begin your project.

<link href="" rel="stylesheet" media="screen" type="text/css">

Now you're all done, your site or project has PrimoCSS at its core and you can start to build simple but effective responsive designs. Follow on reading for our basic HTML template.

Basic template

<!DOCTYPE html>
<html lang="en" dir="ltr">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link href="" rel="stylesheet" media="screen" type="text/css">
        <h1>Hello, world!</h1>

Package manager installation

PrimoCSS can be installed to any project using different package managers and obtain the SCSS source files. To pull down the latest release use the following commands with NPM, Yarn or Bower;


npm install primocss --save-dev


yarn add primocss


bower install primocss --save-dev

Local development

If you would like to help and improve this project in anyway or use the project and develop on it locally follow these commands to help. Start by downloading via GitHub or git cloning the project git clone

Development requires the latest version of Node.js. To setup, here is a list of commands to help you get started:

npm install
gulp build

Once complete open the build folder to see the newly created CSS. You can override any of the global settings for PrimoCSS via _settings.defaults.scss and _settings.colors.scss. Any new SCSS created can be tested by running the gulp linter and keeps all styles in check

gulp test

Browser support

Using the latest technologies, PrimoCSS is aimed at new browsers and will attempt to degrade gracefully to previous versions.

  • Chrome latest
  • Firefox latest
  • Opera latest
  • Safari latest
  • IE Latest