• Stars
    star
    9,240
  • Rank 3,878 (Top 0.08 %)
  • Language
    CSS
  • License
    Other
  • Created over 11 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Smarter defaults for colors on the web.

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.

Customize your own defaults here.

Stats

903 85 85
bytes selectors declarations

Installation

With npm

npm install --save-dev colors.css

With Git

git clone https://github.com/tachyons-css/colors.css

Usage

Using with PostCSS

Import the css module

@import "colors.css";

Then process the CSS using the tachyons-cli

$ npm i -g tachyons-cli
$ tachyons-cli path/to/css-file.css > dist/t.css

Using the CSS

The built CSS is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

<link rel="stylesheet" href="path/to/module/css/colors.css">

Development

The source CSS files can be found in the src directory. Running $ npm start will process the source CSS and place the built CSS in the css directory.

The CSS

/*

  COLORS
  Better default colors for the web

*/
/* 

   VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/
/*

   SKINS
   - Backgrounds
   - Colors
   - Border colors
   - SVG fills
   - SVG Strokes

*/
/* Backgrounds */
.bg-navy { background-color: #001F3F; }
.bg-blue { background-color: #0074D9; }
.bg-aqua { background-color: #7FDBFF; }
.bg-teal { background-color: #39CCCC; }
.bg-olive { background-color: #3D9970; }
.bg-green { background-color: #2ECC40; }
.bg-lime { background-color: #01FF70; }
.bg-yellow { background-color: #FFDC00; }
.bg-orange { background-color: #FF851B; }
.bg-red { background-color: #FF4136; }
.bg-fuchsia { background-color: #F012BE; }
.bg-purple { background-color: #B10DC9; }
.bg-maroon { background-color: #85144B; }
.bg-white { background-color: #FFFFFF; }
.bg-gray { background-color: #AAAAAA; }
.bg-silver { background-color: #DDDDDD; }
.bg-black { background-color: #111111; }
/* Colors */
.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.white { color: #FFFFFF; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }
/* Border colors 

   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px); border-style: solid); }     
*/
.border--navy { border-color: #001F3F; }
.border--blue { border-color: #0074D9; }
.border--aqua { border-color: #7FDBFF; }
.border--teal { border-color: #39CCCC; }
.border--olive { border-color: #3D9970; }
.border--green { border-color: #2ECC40; }
.border--lime { border-color: #01FF70; }
.border--yellow { border-color: #FFDC00; }
.border--orange { border-color: #FF851B; }
.border--red { border-color: #FF4136; }
.border--fuchsia { border-color: #F012BE; }
.border--purple { border-color: #B10DC9; }
.border--maroon { border-color: #85144B; }
.border--white { border-color: #FFFFFF; }
.border--gray { border-color: #AAAAAA; }
.border--silver { border-color: #DDDDDD; }
.border--black { border-color: #111111; }
/* Fills for SVG */
.fill-navy { fill: #001F3F; }
.fill-blue { fill: #0074D9; }
.fill-aqua { fill: #7FDBFF; }
.fill-teal { fill: #39CCCC; }
.fill-olive { fill: #3D9970; }
.fill-green { fill: #2ECC40; }
.fill-lime { fill: #01FF70; }
.fill-yellow { fill: #FFDC00; }
.fill-orange { fill: #FF851B; }
.fill-red { fill: #FF4136; }
.fill-fuchsia { fill: #F012BE; }
.fill-purple { fill: #B10DC9; }
.fill-maroon { fill: #85144B; }
.fill-white { fill: #FFFFFF; }
.fill-gray { fill: #AAAAAA; }
.fill-silver { fill: #DDDDDD; }
.fill-black { fill: #111111; }
/* Strokes for SVG */
.stroke-navy { stroke: #001F3F; }
.stroke-blue { stroke: #0074D9; }
.stroke-aqua { stroke: #7FDBFF; }
.stroke-teal { stroke: #39CCCC; }
.stroke-olive { stroke: #3D9970; }
.stroke-green { stroke: #2ECC40; }
.stroke-lime { stroke: #01FF70; }
.stroke-yellow { stroke: #FFDC00; }
.stroke-orange { stroke: #FF851B; }
.stroke-red { stroke: #FF4136; }
.stroke-fuchsia { stroke: #F012BE; }
.stroke-purple { stroke: #B10DC9; }
.stroke-maroon { stroke: #85144B; }
.stroke-white { stroke: #FFFFFF; }
.stroke-gray { stroke: #AAAAAA; }
.stroke-silver { stroke: #DDDDDD; }
.stroke-black { stroke: #111111; }

More Open Source Color Systems

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Authors

License

MIT

More Repositories

1

pesticide

Kill your css layout bugs
CSS
1,367
star
2

fluidity

The worlds smallest fully-responsive css framework
JavaScript
1,103
star
3

mnml

Start a responsive html5 site with postcss and browser-sync
CSS
706
star
4

btns

A set of css utilities for constructing beautiful responsive buttons
CSS
340
star
5

gradients

Gradients!
HTML
261
star
6

html

HTML blocks
HTML
248
star
7

nkd

Template for jekyll project with postcss and browser-sync
CSS
230
star
8

awesome-system-fonts

An awesome list of websites that use system fonts
189
star
9

css-uncut

WIP: All of css as single purpose classes
CSS
119
star
10

vimgifs

http://vimgifs.com
HTML
117
star
11

type.css

A mobile-first responsive type scale
CSS
106
star
12

links

Better default styles for text links
HTML
85
star
13

css-system-fonts

A css module for utilizing system fonts across platforms
HTML
84
star
14

component-api-talk

First draft of a talk I gave recently that I'm trying to turn into a blog post
77
star
15

react-elements

Prototyping setup: React + Glamorous + Styled-system
JavaScript
62
star
16

trim

An easier workflow for faster better stronger websites
CSS
48
star
17

viminfo

Tool to audit your daily vim usage
JavaScript
41
star
18

diatonic-type

Diatonic print scale translated to be a responsive type scale for the web.
CSS
41
star
19

writing

Blog about vim, css, and design.
JavaScript
29
star
20

jkl

Boilerplate for a jekyll blog with a responsive type scale.
CSS
28
star
21

tachyons-lite

Tachyons is small. Tachyons-lite is smaller.
CSS
28
star
22

colors-saturated

A saturated color palette
CSS
27
star
23

screencasts

Screencasts on using vim, git, unix, and oocss as design tools
CSS
27
star
24

ios-dynamic-type

CSS module for using dynamic type in iOS on the web
CSS
26
star
25

profile

WIP responsive github profile viewer
CSS
25
star
26

x0-styled

Prototyping static sites with x0 + glamorous + styled-system
JavaScript
25
star
27

slides-cssconfoakland-2014

Slides from my talk at cssconf oakland
24
star
28

mrmrs

Personal Portfolio Site
HTML
23
star
29

representation

Data visualization project around representation in congress, executive branch, and supreme court
JavaScript
22
star
30

colors-sass

colors.css powered by sass
CSS
21
star
31

vimrc

Vim Script
19
star
32

elements

Design prototypes, and production ready apps with: React + Styled-System + Glamorous
JavaScript
17
star
33

marquee

HTML
15
star
34

mrsjxn

Source for mrsjxn.com. Built with angular.
CSS
15
star
35

css-unabridged

An experiment with css
CSS
15
star
36

ideas

HTML
14
star
37

tachyons-elements

Tachyons + styled-system
JavaScript
13
star
38

css-spacing

Responsive CSS module for setting margin and padding on elements
CSS
13
star
39

small

CSS for small devices
CSS
12
star
40

cssstats-starter-kit

CSS
11
star
41

paper

CSS
11
star
42

sans-serif

CSS module for utilizing system sans-serif fonts
HTML
10
star
43

css-cursors

CSS module for setting the cursor property
CSS
10
star
44

contrast

Visual example for readable and unreadable contrasts
HTML
9
star
45

waves

Visualizing Wave form data from music
JavaScript
9
star
46

colors-less

colors.css powered by less
CSS
8
star
47

beats

Beats by skullcat
CSS
8
star
48

ill

CSS
8
star
49

-

My favorite unicode
CSS
8
star
50

static

JavaScript
8
star
51

hsla

Demo site built in under 5 minutes
7
star
52

grids

7
star
53

qstns

Asking Better Questions
CSS
7
star
54

prnt

Portfolio of Print work
CSS
6
star
55

links.css

CSS
6
star
56

images

Black and white images I like for including as placeholders when prototyping.
6
star
57

css-grid

CSS module for CSS grid
CSS
6
star
58

scary

Prototyping environment with react, next, css-in-js, and styled-system
JavaScript
6
star
59

css-display

Responsive CSS module for setting display
CSS
6
star
60

css-colors

CSS color variables
CSS
6
star
61

floats

CSS
5
star
62

css-averages

CSS
5
star
63

up

A short photo project
HTML
5
star
64

mrmrs.github.io

CSS
5
star
65

notesfromthetribe

Artwork of Will Deutsch
CSS
5
star
66

colors-stylus

Colors.css powered by stylus
CSS
5
star
67

css-filter-blur

CSS module for using the blur function
CSS
5
star
68

gfffs

HIDEF GIFS
CSS
5
star
69

css-text-underline

Responsive CSS module for setting text-underline
CSS
5
star
70

css-type-scale

Simple, mobile-first responsive type-scale
CSS
5
star
71

css-paged-media

CSS module for setting page break
CSS
5
star
72

css-utilities

CSS module of simple utilities
CSS
5
star
73

css-text-overflow

Responsive CSS module for setting text-overflow
CSS
5
star
74

css-letter-spacing

Responsive CSS module for setting tracking (letter-spacing)
CSS
4
star
75

css-npm-template

Template for new css modules to be hosted on npm
CSS
4
star
76

css-transition-duration

Responsive CSS module for setting transition duration
CSS
4
star
77

css-hyphens

Resposive CSS module for setting hyphen property across breakpoints
CSS
4
star
78

css-clip

CSS module for setting clip property
CSS
4
star
79

css-squares

Utilities classes for creating squares with CSS
CSS
4
star
80

photos

CSS
4
star
81

talk-static-sites

4
star
82

css-z-index

Responsive CSS module for setting z-index
CSS
4
star
83

tops

Responsive photo grid built in less than 5 minutes
CSS
4
star
84

css-overflow

CSS module for setting overflow
CSS
4
star
85

talk

4
star
86

css-border-colors

Responsive CSS module for setting border colors
CSS
4
star
87

api

Personal application programming interface
4
star
88

css-word-wrap

Responsive CSS moule for setting word-wrap property
CSS
4
star
89

talk__better-tools-engine-yard

Slides from a talk I gave on the need for better css authoring tools. These slides are beyond uninformative.
4
star
90

mdx-x0

JavaScript
4
star
91

css-unicode-range

Responsive CSS module for setting unicode range
CSS
4
star
92

css-skins

CSS module with utility classes for skinning elements
CSS
4
star
93

css-filter-grayscale

CSS module for te grayscale function
CSS
4
star
94

measure

CSS
4
star
95

css-queries

CSS
4
star
96

css-background-clip

CSS module for setting background-clip
CSS
4
star
97

css-floats

Responsive CSS Module for setting floats
CSS
4
star
98

css-word-spacing

Responsive CSS module for setting word-spacing
CSS
4
star
99

css-min-width-scale

Responsive CSS module for setting min-widths
CSS
4
star
100

scale

The scale of things
CSS
4
star