Skip to content

reimertz/brand-colors

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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