Milligram - Extending The Inheritances

<div class="row"> <div class="collumn"> <a href="#" class="button button-black">.button-black</a> <br> <a href="#" class="button button-black button-outline">.button-black</a> <br> <a href="#" class="button button-black button-clear">.button-black</a> </div> <div class="collumn"> <a href="#" class="button">Default .button</a> <br> <a href="#" class="button button-outline">Outlined .button</a> <br> <a href="#" class="button button-clear">Clear .button</a> </div> <div class="collumn"> <a href="#" class="button button-small">.button-small</a> <br> <a href="#" class="button button-small button-outline">.button-small</a> <br> <a href="#" class="button button-small button-clear">.button-small</a> </div> <div class="collumn"> <a href="#" class="button button-large">.button-large</a> <br> <a href="#" class="button button-large button-outline">.button-large</a> <br> <a href="#" class="button button-large button-clear">.button-large</a> </div> </div>
/* Extending The Inheritances */ /* Applying color variation */ .button-black { background-color: black; border-color: black; } .button-black.button-outline { color: black; } .button-black.button-clear { color: black; } /* Applying size variation */ .button-small { font-size: .8rem; height: 2.8rem; line-height: 2.8rem; padding: 0 1.5rem; } .button-large { font-size: 1.4rem; height: 4.5rem; line-height: 4.5rem; padding: 0 2rem; }
/* The style of an element can be defined in several different locations, which interact in a complex way. It is form of interaction makes CSS powerful, but it can make it confusing and difficult to debug. */
Expand for more options Login