https://github.com/derekbtw/color-cards
Flexbox color scheme cards
https://github.com/derekbtw/color-cards
branding brands card cards color-scheme colors css flexbox sass scss themes
Last synced: about 2 months ago
JSON representation
Flexbox color scheme cards
- Host: GitHub
- URL: https://github.com/derekbtw/color-cards
- Owner: derekbtw
- Created: 2017-02-05T11:26:46.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-09-12T16:55:50.000Z (almost 8 years ago)
- Last Synced: 2025-03-24T18:27:52.243Z (about 1 year ago)
- Topics: branding, brands, card, cards, color-scheme, colors, css, flexbox, sass, scss, themes
- Language: HTML
- Homepage: http://derekbtw.com/color-cards
- Size: 350 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Color Cards
### [View Demo](http://derekbtw.com/color-cards/)
## Usage
Add the CSS found in [/dist/color-cards.css](https://github.com/derekbtw/color-cards/blob/master/dist/color-cards.css) to your project.
-or-
You can use the RawGit CDN
CDN URL
```html
https://cdn.rawgit.com/derekbtw/color-cards/56c92dd7/dist/color-cards.css
```
CDN with link tag
```html
```
### Markup
Since Color Cards use flexbox, it's easy to use 1-5 different colors on each card. However, using more than 5 will need a little customization to your CSS. The cards must be inside ```.flex-grid``` - here's an example:
```html
#F9ED69
#F08A5D
#B83B5E
#6A2C70
Example
...
```
As you can probably see, it's extremely easy to add new cards. There's no messing with any CSS files, just change the color values right in the inline styles using HTML. Also, since Color Cards utilize flexbox, you can simply add as many cards as you want and flexbox takes care of the spacing.
The font used on the demo is called Reenie Beanie. Add the Google Font library to your page:
```html
```
```css
.palette {
font-family: "Reenie Beanie", sans-serif;
}
```
If you'd like to contribute to the project, PLEASE DO!