Milligram - Extending The Inheritances
HTML
<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>
CSS
/* 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;
}
JAVASCRIPT
/*
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.
https://github.com/milligram/milligram
https://milligram.github.io
*/
