第三次作业题目和答案(未公布)

themes/landscape/source/css/_util/grid.styl

@@ -0,0 +1,38 @@
+/////////////////
+// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/
+/////////////////
+
+// Utility function — you should never need to modify this
+// _gridsystem-width = (column-width + gutter-width) * columns
+gridsystem-width(_columns = columns)
+  (column-width + gutter-width) * _columns
+
+// Set @total-width to 100% for a fluid layout
+// total-width = gridsystem-width(columns)
+total-width = 100%
+
+//////////
+// GRID //
+//////////
+
+body
+  clearfix()
+  width: 100%
+
+row(_columns = columns)
+  clearfix()
+  display: block
+  width: total-width * ((gutter-width + gridsystem-width(_columns)) / gridsystem-width(_columns))
+  margin: 0 total-width * (((gutter-width * .5) / gridsystem-width(_columns)) * -1)
+
+column(x, _columns = columns)
+  display: inline
+  float: left
+  width: total-width * ((((gutter-width + column-width) * x) - gutter-width) / gridsystem-width(_columns))
+  margin: 0 total-width * ((gutter-width * .5) / gridsystem-width(_columns))
+
+push(offset = 1)
+  margin-left: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns))
+
+pull(offset = 1)
+  margin-right: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns))

themes/landscape/source/css/_util/mixin.styl

@@ -0,0 +1,31 @@
+// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+hide-text()
+  text-indent: 100%
+  white-space: nowrap
+  overflow: hidden
+
+// http://codepen.io/shshaw/full/gEiDt
+absolute-center(width, height = width)
+  // margin: auto
+  // position: absolute
+  // top: 50%
+  // top: 0
+  // left: 0
+  // bottom: 0
+  // right: 0
+  // width: width
+  // height: height
+  // overflow: auto
+  width: width
+  height: height
+  position: absolute
+  top: 50%
+  left: 50%
+  margin-top: width * -0.5
+  margin-left: height * -0.5
+
+avoid-column-break()
+  vendor("column-break-inside", avoid, only: webkit)
+  page-break-inside: avoid // for firefox
+  overflow: hidden // fix for firefox
+  break-inside: avoid-column