PrimoCSS framework, a light weight mobile friendly SCSS / CSS framework for web & UI development


Keywords
scss, framework, front-end, ui, css, html, pattern, library, frontend, style, guide, mixin, module, ITCSS, flexbox-grid, mobile, pattern-library, responsive, scss-framework
License
MIT
Install
npm install primocss@1.0.14

Documentation

PrimoCSS Framework

Build Status npm version Downloads Bower version devDependency Status

PrimoCSS Framework, a light weight and mobile friendly SCSS / CSS framework for web & UI development.

Primo is a framework which provides the prime starting blocks for any frontend requirements. Without supplying out of the box solutions or mantras to follow, it creates a solid architecture to kick-start any project.

A great starting points

All the styles and tools have been created as the perfect starting point for your project. This isn't a full framework trying to impose design styles and mantras.

Built with Sass & gulp

Using Gulp to create tests and build steps. Developing the source code using SASS and harnessing the powerful preprocessor for our css.

Every view possible

With a powerful responsive grid. Any design is possible for all devices and effectively scales from handhelds to desktops.


Hotlink

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

<link href="http://primocss.com/build/css/primocss.min.css" rel="stylesheet" media="screen" type="text/css">

Now you're all done, your site or project has PrimoCSS at it's 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">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link href="http://primocss.com/build/css/primocss.min.css" rel="stylesheet" media="screen" type="text/css">
    </head>
    <body>
        <h1>Hello, world!</h1>
    </body>
</html>

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:

npm install primocss --save-dev

Yarn:

yarn add primocss

Bower:

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 git@github.com:primocss/primocss.git.

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

License

Code licensed MIT by Richard McCartney