Two Column Collapse One
HTML
<article class="cf">
<div class="fl w-100 w-50-ns bg-near-white tc">
<h1>Column One</h1>
</div>
<div class="fl w-100 w-50-ns bg-light-gray tc">
<h1>Column Two</h1>
</div>
</article>
css
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.fl {
float: left;
_display: inline;
}
.w-100 {
width: 100%;
}
.bg-light-gray {
background-color: #eee;
}
.bg-near-white {
background-color: #f4f4f4;
}
.tc {
text-align: center;
}
@media screen and (min-width: 30em) {
.w-50-ns {
width: 50%;
}
}
Css stats for this component
- Gzipped Size
- 245B
- Selectors
- 10
- Declarations
- 11
Modules referenced
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-clears tachyons-floats tachyons-widths tachyons-skins tachyons-text-align