Skip to content

🎨 Palette is color & grayscale classes ✨by Jeff Davis

License

Notifications You must be signed in to change notification settings

brandedux/palette

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Palette

Simply download it and import it from your CSS library.

Getting started

Download or clone the code.
git clone https://github.com/brandedux/palette.git

Import Palette:
Import palette.scss into your app.scss or primary file.
@import './palette';

Example Class:
Include the palette class in your markup.
class="palette"

Nest color, grayscale and alpha channel classes within the palette class.
class="bg-red txt-black alpha-50"

Nested classes should be used like:
<div class="palette">
<p class="bg-red txt-black alpha-50">Warning!</p>
</div>

1. Prefixes for background and text colors

  • bg = background color
  • txt = text color

2. Default color, tint and grayscale arrays

  • red
  • orange
  • yellow
  • green
  • blue
  • indigo
  • violet
  • ultraviolet
  • black
  • white
  • grayscale-90
  • grayscale-80
  • grayscale-70
  • grayscale-60
  • grayscale-50
  • grayscale-40
  • grayscale-30
  • grayscale-20
  • grayscale-10

3. Alpha channel array

  • alpha-90
  • alpha-80
  • alpha-70
  • alpha-60
  • alpha-50
  • alpha-40
  • alpha-30
  • alpha-20
  • alpha-10

Copyright and License

Copyright (c) 2019, Jeff Davis.

Palette source code is licensed under the MIT License.