Skip to content

Instantly share code, notes, and snippets.

@4aficiona2
Created February 17, 2015 09:20
Show Gist options
  • Save 4aficiona2/6e105ed2a9b5426b72ec to your computer and use it in GitHub Desktop.
Save 4aficiona2/6e105ed2a9b5426b72ec to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<ul>
<li>
Equal<br/>height<br/>Test
</li>
<li>
Still not so equal
</li>
<li>
Test<br/>Test
</li>
</ul>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Singularity.gs (v1.5.1)
// Toolkit (v2.7.0)
// ----
/* Imports */
@import "toolkit";
@import "singularitygs";
/* List styling */
@mixin nobullet {
list-style-type: none;
list-style-image: none;
}
%list.unstyled {
display: block;
margin: 0;
padding: 0;
}
%list-item.unstyled {
margin: 0;
padding: 0;
display: inline;
@include nobullet();
&:before,
&:after {
@include nobullet();
// content: '';
}
}
ul {
@extend %list.unstyled;
li {
@extend %list-item.unstyled;
background-color: green;
}
}
/* Grid definition */
@include add-grid(12);
@include add-gutter(1/3);
/* Height experiments */
ul {
}
li {
display: inline-table;
@include layout($gutter: 0) {
&:nth-child(n+1) {
@include grid-span(4, 1);
}
&:nth-child(n+2) {
@include grid-span(4, 5);
}
&:nth-child(n+3) {
@include grid-span(4, 9);
}
}
}
/* Imports */
/* List styling */
ul {
display: block;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
list-style-image: none;
}
ul li:before, ul li:after {
list-style-type: none;
list-style-image: none;
}
ul li {
background-color: green;
}
/* Grid definition */
/* Height experiments */
li {
display: inline-table;
}
li:nth-child(n+1) {
width: 33.33333333%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
li:nth-child(n+2) {
width: 33.33333333%;
float: left;
margin-right: -100%;
margin-left: 33.33333333%;
clear: none;
}
li:nth-child(n+3) {
width: 33.33333333%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
<ul>
<li>
Equal<br/>height<br/>Test
</li>
<li>
Still not so equal
</li>
<li>
Test<br/>Test
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment