Skip to content

Instantly share code, notes, and snippets.

@mrb
Created July 22, 2008 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrb/993 to your computer and use it in GitHub Desktop.
Save mrb/993 to your computer and use it in GitHub Desktop.
Sass + 3 column A List Apart Layout
/* Change lc_width and rc_width to control column width, and voila */
!lc_width= 140px
!rc_width= 180px
!lc_p= 10px
!lc_pad= !lc_p*2
!rc_p= 10px
!rc_pad= !rc_p*2
!lc_full= !lc_width + !lc_pad
!rc_full= !rc_width + !rc_pad
!cc_p= 20px
!cc_pad= !cc_p*2
body
:margin 0
:padding-left= !lc_full
:padding-right= !rc_full + !cc_pad
:min-width 500px
:font-family Georgia
#header
:margin-left= -1*!lc_full
:margin-right= -1*(!rc_full + !cc_pad)
:text-align right
:padding 0.3em 0
:background #CCC
.column
:position relative
:float left
:padding-top 1em
#center
:padding= 0 !cc_p
:width 100%
:background-color #FFF
#left
:width= !lc_width
:padding= 0 !lc_p
:right= !lc_full + !cc_pad
:margin-left -100%
:background-color #FFF
:border 1px dashed #CCC
#right
:width= !rc_width
:padding= 0 !rc_p
:margin-right -100%
:background-color #FFF
:border 1px dashed #CCC
#footer
:margin-left= -!lc_full
:margin-right= -(!rc_full + !cc_pad)
:text-align center
:padding 0.3em 0
:background #CCC
:clear both
* html #left
:left= !rc_full
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment