Skip to content

Instantly share code, notes, and snippets.

@VinSpee
Created February 12, 2014 16:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save VinSpee/8958408 to your computer and use it in GitHub Desktop.
Save VinSpee/8958408 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul class="tabs">
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 1</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 2</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 3</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 4</a>
</li>
</ul>
// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----
@import compass/reset
.tabs
display: table
table-layout: fixed
width: 100%
overflow: hidden
.tabs__item
text-align: center
display: table-cell
.tabs__action
display: block
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
.tabs {
display: table;
table-layout: fixed;
width: 100%;
overflow: hidden;
}
.tabs__item {
text-align: center;
display: table-cell;
}
.tabs__action {
display: block;
}
<ul class="tabs">
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 1</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 2</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 3</a>
</li>
<li class="tabs__item">
<a href="#" class="tabs__action">Tab 4</a>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment