primer/css

mirror of https://github.com/primer/css.git synced 2024-12-24 14:42:26 +03:00

History

Jon Rohan 57363c6225 Publish - primer-marketing-buttons@1.0.1 - primer-marketing@6.0.1 - primer-popover@0.0.3 - primer-product@5.5.1 - primer@10.0.1		2017-11-14 13:10:31 -08:00
..
lib	move btn-large back into primer-buttons, update docs	2017-11-06 22:28:23 -06:00
.npmignore	add marketing buttons to primer-marketing-buttons	2017-11-02 15:55:59 -07:00
index.scss	edit package.json	2017-11-02 16:02:36 -07:00
LICENSE	add marketing buttons to primer-marketing-buttons	2017-11-02 15:55:59 -07:00
package.json	Publish	2017-11-14 13:10:31 -08:00
README.md	Renaming primer-css to primer	2017-11-09 09:41:18 -08:00
stories.js	only btn-orange is being added	2017-11-06 22:40:30 -06:00

README.md

Primer Marketing CSS Buttons

Buttons are used for actions, like in forms, while textual hyperlinks are used for destinations, or moving from one page to another.

This repository is a module of the full primer repository.

Documentation

Marketing buttons extend primer-core buttons with more color and fill styles.

Colors

Marketing buttons are available in orange.

<button class="btn btn-orange" type="button">Button button</button>

Outline button colors

The btn-outline has also been extended with orange, purple, and green.

<button class="btn btn-outline-orange" type="button">Button button</button>
<a class="btn btn-outline-purple" href="#url" role="button">Link button</a>
<button class="btn btn-outline-green" type="button">Button button</button>

Transparent button

A button can also be transparent and displayed with a white border with btn-transparent.

<div class="bg-gray-dark p-4 mt-4">
  <button class="btn btn-transparent" type="button">
    Button button
    <span class="Counter">12</span>
  </button>
</div>

Install

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

$ npm install --save primer-marketing-buttons

Usage

The source files included are written in Sass (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

@import "primer-marketing-buttons/index.scss";

You can also import specific portions of the module by importing those partials from the /lib/ folder. Make sure you import any requirements along with the modules.

Build

For a compiled css version of this module, a npm script is included that will output a css version to build/build.css

$ npm run build