🎨 A color collection available in sass, less, stylus and css
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app fix app colour search on firefox Oct 16, 2017
data brandcolors.net integration done! πŸŽ‰ Oct 3, 2017
dist bump version to 2.0.1 Oct 4, 2017
gulptasks brandcolors.net integration done! πŸŽ‰ Oct 3, 2017
scripts brandcolors.net integration done! πŸŽ‰ Oct 3, 2017
templates version 2.0.0 πŸŽ‰ Oct 4, 2017
.gitignore
CHANGELOG.md CHANGELOG.md Oct 4, 2017
LICENSE.MD
README.md
bower.json
brand-colors.gif add gif Jan 3, 2016
brand-colors.png add image to readme Jan 16, 2016
gulpfile.js add favicon Jan 16, 2016
hook.io.js
package-lock.json brandcolors.net integration done! πŸŽ‰ Oct 3, 2017
package.json bump version to 2.0.1 Oct 4, 2017
test.js
yarn.lock brandcolors.net integration done! πŸŽ‰ Oct 3, 2017

README.md

brand-colors is a collection of colors works available in sass, less, stylus and css

Installation

npm install brand-colors
bower install brand-colors

Usage

scss

@import 'bower_components/brand-colors/dist/latest/scss/brand-colors.latest.scss'

.a-div {
  color: $bc-spotify;
}

less

@import 'bower_components/brand-colors/dist/latest/less/brand-colors.latest.less'

.a-div {
  color: @bc-spotify;
}
in webpack
  • use relative path to the node_modules, for example:
  app
   |_node_modules
   |_src
      |_css
         |_app.less

in app.less:

@import '../../node_modules/brand-colors/dist/latest/less/brand-colors.latest.less';
  • use webpack's resolve mechanism
@import '~brand-colors/dist/latest/less/brand-colors.latest.less';

sass

@import 'bower_components/brand-colors/dist/latest/scss/brand-colors.latest.sass'

.a-div
  color: $bc-spotify

stylus

@import 'bower_components/brand-colors/dist/latest/stylus/brand-colors.latest.styl'

.a-div {
  color: $bc-spotify;
}

css

  <link rel="stylesheet" href="bower_components/brand-colors/dist/latest/css/brand-colors.latest.min.css">`

  <span class="bc-spotify">This text is spotify-green</span>
  <div class="bc-spotify-bg">This div has a spotify-green background</div>

postcss

Use postcss-brand-color plugin. Add it to PostCSS:

postcss([ require('postcss-brand-colors') ])

and use *-color names:

.a-div {
  color: spotify-color;
}

Run brand-colors.com locally

If you want to work on the static homepage, just run the following commands and you will get a live-reloading server listening for changes in /app and brandColors.js

npm install
gulp dev

Brands

Full list of colors A lot fo the colors comes from brandcolors.net, so a huge shout out to @galengidman.


reimertz.co Β Β·Β  GitHub @reimertz Β Β·Β  Twitter @reimertz