primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 01:04:04 +03:00
Code Issues Projects Releases Wiki Activity
57445ef976
css/modules/primer-marketing-buttons
History
Shawn Allen 32f7398507 Publish 
- primer-alerts@1.5.12
 - primer-avatars@1.5.9
 - primer-base@1.9.1
 - primer-blankslate@1.5.1
 - primer-box@2.5.12
 - primer-branch-name@1.0.10
 - primer-breadcrumb@1.5.8
 - primer-buttons@2.6.3
 - primer-core@6.10.7
 - primer-forms@2.1.7
 - primer-labels@1.5.12
 - primer-layout@1.6.1
 - primer-markdown@3.7.12
 - primer-marketing-buttons@1.0.12
 - primer-marketing-support@1.5.5
 - primer-marketing-type@1.4.12
 - primer-marketing-utilities@1.7.2
 - primer-marketing@6.3.2
 - primer-navigation@1.5.10
 - primer-page-headers@1.5.2
 - primer-page-sections@1.5.2
 - primer-pagination@1.0.6
 - primer-popover@0.1.7
 - primer-product@5.8.2
 - primer-progress@0.1.2
 - primer-subhead@1.0.10
 - primer-support@4.7.1
 - primer-table-object@1.4.12
 - primer-tables@1.5.2
 - primer-tooltips@1.5.10
 - primer-truncate@1.4.12
 - primer-utilities@4.14.2
 - primer@10.10.3
 - primer-module-build@1.0.9
2019-01-07 15:03:45 -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 update year in licenses and source headers to 2019 2019-01-04 10:38:46 -08:00
package.json Publish 2019-01-07 15:03:45 -08:00
README.md add path metadata to all docs 2018-12-17 15:26:50 -08:00
stories.js only btn-orange is being added 2017-11-06 22:40:30 -06:00

README.md

Primer Marketing CSS Buttons

npm version Build Status

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

License

MIT © GitHub