Coder Social home page Coder Social logo

htmlcssdirectory / primer-css Goto Github PK

View Code? Open in Web Editor NEW

This project forked from primer/css

1.0 3.0 0.0 3.58 MB

The CSS framework that powers GitHub's front-end design.

Home Page: http://primercss.io

License: MIT License

CSS 94.88% Shell 3.79% JavaScript 1.34%

primer-css's Introduction

Primer CSS

npm version Build Status

Primer is the CSS framework that powers GitHub's front-end design. Primer CSS includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.

Packages

The Primer CSS repo is managed as a monorepo that is composed of many npm packages.

Core Packages

Package Version
primer-css
Includes all 23 packages
npm
primer-core npm
primer-product npm
primer-marketing npm

Install

This repository is distributed with npm. After installing npm, you can install primer-css with this command.

$ npm install --save primer-css

Usage

The source files included are written in Sass (SCSS). After installing with npm, you can add your project's node_modules directory to your Sass include paths (AKA load paths in Ruby), then import it like this:

@import "primer-css/index.scss";

You can import individual Primer modules by installing them with npm, for instance:

$ npm install --save primer-navigation

Then, you would import the module with:

@import "primer-navigation/index.scss";

Or, while you're figuring out which modules you need, you can import them directly from the primer-css packages directory like so:

@import "primer-css/modules/primer-navigation/index.css";

Build

For a compiled CSS version of this module, an npm script is included that will output a CSS version to build/build.css. The built CSS file is also included in the npm package.

$ npm run build

Documentation

You can read more about primer in the docs.

License

MIT © GitHub

primer-css's People

Contributors

mdo avatar jonrohan avatar shawnbot avatar broccolini avatar muan avatar bkeepers avatar josh avatar vsn4ik avatar zeke avatar thomastuts avatar robloach avatar jedcn avatar cvrebert avatar rap2hpoutre avatar petetnt avatar greenkeeperio-bot avatar shanielh avatar prayagverma avatar iamphill avatar pborreli avatar outsideris avatar nickmccurdy avatar nicoder avatar mortonfox avatar tarebyte avatar laurencaputo avatar kennethlove avatar jastrzebowski avatar jdan avatar johann-s avatar

Stargazers

abhishek avatar

Watchers

mntz avatar James Cloos avatar abhishek avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.