Skip to content
🎨 A color collection available in sass, less, stylus and css
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
data
dist
gulptasks
scripts
templates
.gitignore
CHANGELOG.md
LICENSE.MD
README.md
bower.json
brand-colors.gif
brand-colors.png
gulpfile.js
hook.io.js
package-lock.json
package.json
test.js
yarn.lock

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.