Lazy-classes

lazy-stuff

Here are the classes that I have built up to ease the work around bootstrap.. I have my lazy-color-classes and my lazy-font-size-classes
Just by adding a class on a object you can provide powerful object colors / font size in a simple and bootstrap similar manner. They are therefore the classes that I think Bootstrap should already have installed. I have extended bootstraps own text-"color" to include the shades of gray.


The less files are located in resources/assets/less/frontend/lazy-stuff/lazy-stuff/

The one file to rule them all all-my-lazy-stuff.less which imports (@import) the rest and spit out both full and minified versions. Located inside dist/

Mixins

lazy-stuff/mixins.less

I have done some mixins to ease the process of creating the color-classes. It is verry easy to set up your own color classes for example if you want to add the new Spotify color #2EBD59, you just add .generate-text-color(#2EBD59, spotify); and this will yeald a new class with hover effects as well.
You can call it threw class="text-spotify", the hover classes are also applied.

Hover

Hover-functions

element-color-hover

Write out elementet-color-hover. for example: <class="text-danger bg-warning-hover">

Parent nesting

Often what you want for a hover is just a darken(@color, 10%).
And as simple as that, you can write out: element-color element-hover

class="text-primary text-hover"

class="bg-danger bg-hover"
class="border-warning border-hover"

Maxed out stuff

class="text-gray-light text-white-hover bg-gray-lighter bg-hover border-success border-danger-hover"
My lazy color classes
resources/assets/less/frontend/lazy-stuff/lazy-stuff/
bg-color.less
border-color.less
text-color.less



Example: <div class="text-white border-danger bg-gray-light">Lorem ipsum.<div> ger följande utseende:

Lorem ipsum.


För alla exempel så har den aktuella klassen lagts till objektet <pre>

text-color for hover 10% darken, add text-hover

class="text-primary"
class="text-success"
class="text-info"
class="text-warning"
class="text-danger"
class="text-white"
class="text-gray-lighter"
class="text-gray-light"
class="text-gray"
class="text-gray-dark"
class="text-gray-darker"

bg-color for hover 10% darken, add bg-hover

class="bg-primary"
class="bg-success"
class="bg-info"
class="bg-warning"
class="bg-danger"
class="bg-white"
class="bg-gray-lighter"
class="bg-gray-light"
class="bg-gray"
class="bg-gray-dark"
class="bg-gray-darker"

border-color for hover 10% darken, add border-hover

For adjustable border width, either change the mixin or pass it to the .generate-border-color() as the third parameter.
Example: .generate-border-color(#2EBD59, spotify, 4px);
The parameter order: color, class-name, border-width 


class="border-primary"
class="border-success"
class="border-info"
class="border-warning"
class="border-danger"
class="border-white"
class="border-gray-lighter"
class="border-gray-light"
class="border-gray"
class="border-gray-dark"
class="border-gray-darker"
My lazy font sizes
resources/assets/less/frontend/lazy-stuff/lazy-stuff/lazy-color.less

Lazy font sizes to quickly control the DOM and to add to your less classes.

font-size: *pt; //6->30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90

class="font-s-6"

class="font-s-7"

class="font-s-8"

class="font-s-9"

class="font-s-10"

class="font-s-11"

class="font-s-12"

class="font-s-13"

class="font-s-14"

class="font-s-15"

class="font-s-16"

class="font-s-17"

class="font-s-18"

class="font-s-19"

class="font-s-20"

class="font-s-21"

class="font-s-22"

class="font-s-23"

class="font-s-24"

class="font-s-25"

class="font-s-26"

class="font-s-27"

class="font-s-28"

class="font-s-29"

class="font-s-30"

class="font-s-35"

class="font-s-40"

class="font-s-45"

class="font-s-50"

class="font-s-55"

class="font-s-60"

class="font-s-65"

class="font-s-70"

class="font-s-75"

class="font-s-80"

class="font-s-85"

class="font-s-90"