Skip to content
🎨 A color collection available in sass, less, stylus and css
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 77ebfe2 Nov 29, 2019
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
dist forgot to merge in new colors into brandColors.json Nov 29, 2019
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 update .gitignore Jan 16, 2016
.tool-versions untouched formatting changes to package.json; .tool-versions to force… Apr 29, 2019
CHANGELOG.md
LICENSE.MD Create LICENSE.MD Oct 5, 2016
README.md fix README.md Mar 29, 2017
bower.json
brand-colors.gif
brand-colors.png add image to readme Jan 16, 2016
gulpfile.js add favicon Jan 16, 2016
hook.io.js fix faulty hook Jan 17, 2016
package-lock.json Bump extend from 3.0.1 to 3.0.2 Nov 29, 2019
package.json
test.js Updated getByGroup() method to accept brand name(s) as a parameter Feb 17, 2016

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

You can’t perform that action at this time.