Skip to content

Instantly share code, notes, and snippets.

@laser

laser/_calc.sass

Last active December 25, 2015 12:59
Show Gist options
  • Save laser/6980024 to your computer and use it in GitHub Desktop.
Save laser/6980024 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_calc.sass
=calc($property, $expression)
#{$property}: -moz-calc(#{$expression})
#{$property}: -o-calc(#{$expression})
#{$property}: -webkit-calc(#{$expression})
#{$property}: calc(#{$expression})
Raw
_columnate.sass
=columnate($itemSelector, $numCols, $margin:20px)
$colPct: floor(100/$numCols)
$finalColPct: ($colPct+100)-($numCols*$colPct)
#{$itemSelector}
float: left
margin-right: #{$margin}
margin-bottom: #{$margin}
@include calc(width, "#{$colPct}% - #{$margin}")
&:nth-child(#{$numCols}n)
margin-right: 0
width: percentage($finalColPct/100)
Raw
diagram.txt
20px
+--+
| |
+ +
+---------------------+ +-----------------------+
| Team A | | Team B |
| | | |
+---------------------+ +-----------------------+ +--+
| 20px
+---------------------+ +-----------------------+ +--+
| Team C | | Team D |
| | | |
+---------------------+ +-----------------------+
+ + + +
| | | |
+---------------------+ +-----------------------+
50% - 20px 50%
Raw
teams_list_page.html
<html>
<body>
<ul class="teams">
<li class="team">Team A</li>
<li class="team">Team B</li>
<li class="team">Team C</li>
<li class="team">Team D</li>
</ul>
</body>
</html>
Raw
teams_list_page.sass
// a 2-column layout with 20px of margin in-between the cells
ul.teams
@include columnate(".team", 2, 20)
width: 50%
li.team
background-color: burlywood
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment