Skip to content

Change a color, and your web will adapt graciously. Check a suggested palette when developing.

Notifications You must be signed in to change notification settings

arcovoltaico/colordevbar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

colordevbar

Change a color, and your web will adapt graciously. Check a suggested palette when developing.

##What is this about

Imagine you can:

  • Change harmonically the colors from your site just by defining the main tone (i.e. the corporative one) on a Less variable.
  • You can map each element of your web to a color from the same Less file
  • When you are developing you can show or hide the generated color palette in order to choose which one assign to an element

Active bar Minimized bar

Yes! We were inspired by the nice Symfony devbar

##How to use it

Just clone this project or download it. There is a demo you can try. On your project you’ll need to include/import the devbar.html and add the included js & css on your html head. It’s up to you to include this bar just only when running your site on development mode. And last but not least:

  • On colors.less you can change the main color, from where everyone else is generated. Also you can tweak the generating rules of them. You’ll notice that we are relying on a triangle color relationship, shouldn’t we ? ;-)
  • On colormap.less we are mapping the color variables to some descriptive elements/parts variables used on your web views/partial

Authorship:

Idea & Bar: Jordi Alhambra (@arcovoltaico)

Icon & Animation: Jorge Benítez (@signados)

About

Change a color, and your web will adapt graciously. Check a suggested palette when developing.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published