Permalink
Browse files

Added stylus port. Touching up examples, and readme file. Added chang…

…elog.
  • Loading branch information...
1 parent 24fdb1f commit f2eee5cd0956c2e70f7d7ee0fe18e9293cccb6ef Tyler Tate committed Oct 12, 2011
View
@@ -1,5 +1,5 @@
#About
-The Semantic Grid System is a modern approach to the CSS grid. It allows you to set column and gutter widths, choose the number of columns, and switch between pixels and percentages, and achieve responsive layouts, all without any ugly .grid_x classes in your markup. It is powered by [LESS.js](http://lesscss.org/).
+The Semantic Grid System is a modern approach to the CSS grid. It allows you to set column and gutter widths, choose the number of columns, switch between pixels and percentages, and achieve responsive layouts, all without any unsemantic .grid_x classes in your markup. By default it's powered by [LESS.js](http://lesscss.org/), but also supports [SCSS](http://sass-lang.com/) and [Stylus](http://learnboost.github.com/stylus/).
It lives on the web at [Semantic.gs](http://semantic.gs/).
View
@@ -0,0 +1,7 @@
+#Release 1.1 — October 12, 2011
+
+* Added .offset() mixin to indent columns
+* Switched from `overflow: hidden;` clearing to the micro clearfix
+* Removed clearing from *inside* columns
+* Added support for [SCSS](http://sass-lang.com/) with the help of @jpmckinney, @bobbymarko, and @hlidotbe
+* Added support for [Stylus](http://learnboost.github.com/stylus/) thanks to @dmmalam
@@ -1,6 +1,6 @@
@import '../../stylesheets/reset.css';
+@import '../../stylesheets/demo.css';
@import '../../stylesheets/less/grid.less';
-@import '../../stylesheets/less/demo.less';
//////////
@@ -1,8 +1,8 @@
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <meta charset="utf-8" />
<title>The Semantic Grid System | Fluid Example</title>
<!-- Stylesheets -->
@@ -1,6 +1,6 @@
@import '../../stylesheets/reset.css';
+@import '../../stylesheets/demo.css';
@import '../../stylesheets/less/grid.less';
-@import '../../stylesheets/less/demo.less';
//////////
@@ -1,8 +1,8 @@
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <meta charset="utf-8" />
<title>The Semantic Grid System | Fluid Example</title>
<!-- Stylesheets -->
@@ -1,6 +1,6 @@
@import '../../stylesheets/reset.css';
+@import '../../stylesheets/demo.css';
@import '../../stylesheets/less/grid.less';
-@import '../../stylesheets/less/demo.less';
//////////
@@ -1,8 +1,8 @@
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <meta charset="utf-8" />
<title>The Semantic Grid System | Nested Example</title>
<!-- Stylesheets -->
@@ -1,6 +1,6 @@
@import '../../stylesheets/reset.css';
+@import '../../stylesheets/demo.css';
@import '../../stylesheets/less/grid.less';
-@import '../../stylesheets/less/demo.less';
//////////
@@ -1,8 +1,8 @@
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <meta charset="utf-8" />
<title>The Semantic Grid System | Column Offset Example</title>
<!-- Stylesheets -->
@@ -1,6 +1,6 @@
@import '../../stylesheets/reset.css';
+@import '../../stylesheets/demo.css';
@import '../../stylesheets/less/grid.less';
-@import '../../stylesheets/less/demo.less';
//////////
@@ -1,8 +1,8 @@
<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <meta charset="utf-8" />
<title>The Semantic Grid System | Fluid Example</title>
<!-- Stylesheets -->
@@ -1,6 +1,6 @@
@import '../../stylesheets/reset.css';
+@import '../../stylesheets/demo.css';
@import '../../stylesheets/less/grid.less';
-@import '../../stylesheets/less/demo.less';
//////////
View
Binary file not shown.
View
Binary file not shown.
@@ -6,12 +6,11 @@ h1 {
font-size: 2em;
padding: 1em;
color: white;
-
- a {
+}
+ h1 a {
color: white;
text-decoration: none;
}
-}
h2 {
font-family: Georgia;
font-size: 1.5em;
View
@@ -1,3 +1,7 @@
+/////////////////
+// Semantic.gs // for LESS: http://lesscss.org/
+/////////////////
+
// Defaults which you can freely override
@column-width: 60;
@gutter-width: 20;
@@ -16,14 +20,14 @@
body {
width: 100%;
- float: left;
+ .clearfix;
}
.row(@columns:@columns) {
display: inline-block;
- overflow: hidden;
width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
+ .clearfix;
}
.column(@x,@columns:@columns) {
display: inline;
@@ -33,4 +37,18 @@ body {
}
.offset(@offset:1) {
margin-left: (@gutter-width+@column-width)*@offset + @total-width*((@gutter-width*.5)/@_gridsystem-width);
+}
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+.clearfix() {
+ *zoom:1;
+
+ &:before,
+ &:after {
+ content:"";
+ display:table;
+ }
+ &:after {
+ clear:both;
+ }
}
View
@@ -1,30 +0,0 @@
-header#top {
- background-color: black;
-}
-h1 {
- font-family: Georgia;
- font-size: 2em;
- padding: 1em;
- color: white;
-
- a {
- color: white;
- text-decoration: none;
- }
-}
-h2 {
- font-family: Georgia;
- font-size: 1.5em;
- padding: 5.25em 0;
- color: #666;
- background-color: #ccc;
- text-align: center;
-}
-ul#boxes li {
- font-family: Georgia;
- font-size: 1.33em;
- padding: 2.5em 0;
- color: #999;
- background-color: #e5e5e5;
- text-align: center;
-}
View
@@ -1,3 +1,7 @@
+/////////////////
+// Semantic.gs // for SCSS: http://sass-lang.com/
+/////////////////
+
// Defaults which you can freely override
$column-width: 60px;
$gutter-width: 20px;
@@ -16,14 +20,14 @@ $total-width: $_gridsystem-width;
body {
width: 100%;
- float: left;
+ .clearfix();
}
@mixin row($columns:$columns) {
display: inline-block;
- overflow: hidden;
width: $total-width*(($gutter-width + $_gridsystem-width)/$_gridsystem-width);
margin: 0 $total-width*((($gutter-width*.5)/$_gridsystem-width)*-1);
+ .clearfix();
}
@mixin column($x,$columns:$columns) {
display: inline;
@@ -33,4 +37,18 @@ body {
}
@mixin offset($offset:1) {
margin-left: ($gutter-width+$column-width)*$offset + $total-width*(($gutter-width*.5)/$_gridsystem-width);
+}
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+@mixin clearfix() {
+ *zoom:1;
+
+ &:before,
+ &:after {
+ content:"";
+ display:table;
+ }
+ &:after {
+ clear:both;
+ }
}
View
@@ -0,0 +1,50 @@
+/////////////////
+// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/
+/////////////////
+
+// Defaults which you can freely override
+column-width = 60px
+gutter-width = 20px
+columns = 12
+
+// Utility variable — you should never need to modify this
+_gridsystem-width = (column-width + gutter-width) * columns
+
+// Set @total-width to 100% for a fluid layout
+total-width = _gridsystem-width
+
+
+//////////
+// GRID //
+//////////
+
+body
+ width 100%
+ clearfix()
+
+row(columns = columns)
+ display inline-block
+ width total-width * ((gutter-width + _gridsystem-width ) / _gridsystem-width)
+ margin 0 total-width * (((gutter-width * 0.5) / _gridsystem-width ) * - 1)
+
+column(x, columns = columns)
+ display inline
+ float left
+ overflow hidden
+ width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)
+ margin 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)
+
+offset(offset = 1)
+ margin-left ((gutter-width+column-width)*offset + total-width*((gutter-width*.5)/_gridsystem-width))
+
+// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
+clearfix()
+ *zoom:1
+
+ &:before,
+ &:after
+ content:""
+ display:table
+
+ &:after
+ clear:both

0 comments on commit f2eee5c

Please sign in to comment.