Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Makes semantic.gs work with the latest stylus #66

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Makes semantic.gs work with the latest stylus #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0aeccf
Updating to work with the latest stylus and generate same output as l…
eugeneware Jun 22, 2012
e1d499d
Stylus examples of all standard examples
eugeneware Jun 22, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions examples/fixed/fixed.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
@import '../../stylesheets/reset.css'
@import '../../stylesheets/demo.css'
@import '../../stylesheets/styl/grid.styl'


//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
columns = 12
column-width = 60
gutter-width = 20

// Uncomment the definition below for a percentage-based layout
// total-width = 100%


////////////
// LAYOUT //
////////////

// center the contents
div.center
width: 960px
margin: 0 auto
overflow: hidden

// header
header#top
column(12)
margin-bottom: 1em

// main and sidebar
#maincolumn
column(9)

#sidebar
column(3)
32 changes: 32 additions & 0 deletions examples/fluid/fluid.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@import '../../stylesheets/reset.css'
@import '../../stylesheets/demo.css'
@import '../../stylesheets/styl/grid.styl'


//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
columns = 12
column-width = 60
gutter-width = 20

// Remove the definition below for a pixel-based layout
total-width = 100%


////////////
// LAYOUT //
////////////

// header
header#top
margin-bottom: 1em

// main column & sidebar
#maincolumn
column(9)

#sidebar
column(3)
38 changes: 38 additions & 0 deletions examples/maxwidth/maxwidth.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
@import '../../stylesheets/reset.css'
@import '../../stylesheets/demo.css'
@import '../../stylesheets/styl/grid.styl'


//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
columns = 12
column-width = 60
gutter-width = 20

// Remove the definition below for a pixel-based layout
total-width = 100%


////////////
// LAYOUT //
////////////

// center the contents
div.center
max-width: 960px
margin: 0 auto
overflow: hidden

// header
header#top
margin-bottom: 1em

// main column & sidebar
#maincolumn
column(9)

#sidebar
column(3)
46 changes: 46 additions & 0 deletions examples/nested/nested.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
@import '../../stylesheets/reset.css'
@import '../../stylesheets/demo.css'
@import '../../stylesheets/styl/grid.styl'


//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
columns = 12
column-width = 60
gutter-width = 20

// Remove the definition below for a pixel-based layout
total-width = 100%


////////////
// LAYOUT //
////////////

// center the contents
div.center
margin: 0 auto
overflow: hidden

// header
header#top
margin-bottom: 1em

// main column
#maincolumn
column(9)

ul#boxes
row(9)

li
column(3,9)
margin-bottom: 1em

// sidebar
#sidebar
column(3)

44 changes: 44 additions & 0 deletions examples/pushpull/pushpull.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
@import '../../stylesheets/reset.css'
@import '../../stylesheets/demo.css'
@import '../../stylesheets/styl/grid.styl'


//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
columns = 12
column-width = 60
gutter-width = 20

// Uncomment the definition below for a percentage-based layout
// total-width = 100%


////////////
// LAYOUT //
////////////

// center the contents
div.center
width: 960px
margin: 0 auto
overflow: hidden

// header
header#top
column(12)
margin-bottom: 1em

// push
#push
column(8)
push(4)
margin-bottom: 1em

// pull
#pull
column(8)
pull(4)
margin-bottom: 1em
38 changes: 38 additions & 0 deletions examples/responsive/responsive.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
@import '../../stylesheets/reset.css'
@import '../../stylesheets/demo.css'
@import '../../stylesheets/styl/grid.styl'


//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
columns = 12
column-width = 60
gutter-width = 20

// Remove the definition below for a pixel-based layout
total-width = 100%


////////////
// LAYOUT //
////////////

// header
header#top
margin-bottom: 1em

// main column & sidebar
#maincolumn
column(9)

#sidebar
column(3)

@media screen and (max-width: 720px)
#maincolumn,
#sidebar
column(12)
margin-bottom: 1em
47 changes: 28 additions & 19 deletions stylesheets/styl/grid.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,18 @@ column-width = 60px
gutter-width = 20px
columns = 12

// Utility variable — you should never need to modify this
_gridsystem-width = (column-width + gutter-width) * columns
// Utility function
gridsystem-width(_columns = columns)
_columns * (column-width + gutter-width)

// Set @total-width to 100% for a fluid layout
total-width = _gridsystem-width
//total-width = 100%

_total-width(_columns = columns)
if total-width is defined
total-width
else
unit(gridsystem-width(_columns), px)

// Correcting percentage-to-pixel rounding errors in IE6 & 7
// See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
Expand All @@ -21,7 +28,7 @@ correction = (((0.5 / min-width) * 100) * 1%)

// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
clearfix()
*zoom:1
*zoom:1

&:before,
&:after
Expand All @@ -31,7 +38,6 @@ clearfix()
&:after
clear:both


//////////
// GRID //
//////////
Expand All @@ -40,21 +46,24 @@ body
width 100%
clearfix()

row(columns = columns)
row(_columns = columns)
display block
width total-width * ((gutter-width + _gridsystem-width ) / _gridsystem-width)
margin 0 total-width * (((gutter-width * 0.5) / _gridsystem-width ) * - 1)
*width total-width * ((gutter-width + _gridsystem-width ) / _gridsystem-width)-correction
*margin 0 total-width * (((gutter-width * 0.5) / _gridsystem-width ) * - 1)-correction
width _total-width(_columns) * ((gutter-width + gridsystem-width(_columns) ) / gridsystem-width(_columns))
margin 0 _total-width(_columns) * (((gutter-width * 0.5) / gridsystem-width(_columns) ) * - 1)
*width (_total-width(_columns) * ((gutter-width + gridsystem-width(_columns) ) / gridsystem-width(_columns))) - correction
*margin 0 _total-width(_columns) * (((gutter-width * 0.5) / gridsystem-width(_columns) ) * - 1) - correction
clearfix()

column(x, columns = columns)
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)
*width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)-correction
*margin 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)-correction

offset(offset = 1)
margin-left total-width*(((gutter-width+column-width)*offset + (gutter-width*0.5))/_gridsystem-width)
width _total-width(_columns) * ((((gutter-width + column-width ) * x) - gutter-width) / gridsystem-width(_columns))
margin 0 _total-width(_columns) * ((gutter-width * 0.5) / gridsystem-width(_columns))
*width _total-width(_columns) * ((((gutter-width + column-width ) * x) - gutter-width) / gridsystem-width(_columns)) - correction
*margin 0 _total-width(_columns) * ((gutter-width * 0.5) / gridsystem-width(_columns)) - correction

push(offset = 1)
margin-left _total-width()*(((gutter-width+column-width)*offset + (gutter-width*0.5))/gridsystem-width())

pull(offset = 1)
margin-right _total-width()*(((gutter-width+column-width)*offset + (gutter-width*0.5))/gridsystem-width())