Created
March 1, 2013 02:28
-
-
Save aphexmunky/5062048 to your computer and use it in GitHub Desktop.
Dreamweaver fluid layout basic
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "utf-8"; | |
/* Simple fluid media | |
Note: Fluid media requires that you remove the media's height and width attributes from the HTML | |
http://www.alistapart.com/articles/fluid-images/ | |
*/ | |
img, object, embed, video { | |
max-width: 100%; | |
} | |
/* IE 6 does not support max-width so default to width 100% */ | |
.ie6 img { | |
width:100%; | |
} | |
/* | |
Dreamweaver Fluid Grid Properties | |
---------------------------------- | |
dw-num-cols-mobile: 5; | |
dw-num-cols-tablet: 8; | |
dw-num-cols-desktop: 10; | |
dw-gutter-percentage: 25; | |
Inspiration from "Responsive Web Design" by Ethan Marcotte | |
http://www.alistapart.com/articles/responsive-web-design | |
and Golden Grid System by Joni Korpi | |
http://goldengridsystem.com/ | |
*/ | |
/* Mobile Layout: 480px and below. */ | |
.gridContainer { | |
margin-left: auto; | |
margin-right: auto; | |
width: 87.36%; | |
padding-left: 1.82%; | |
padding-right: 1.82%; | |
} | |
#LayoutDiv1 { | |
clear: both; | |
float: left; | |
margin-left: 0; | |
width: 100%; | |
display: block; | |
} | |
#LayoutDiv2 { | |
clear: both; | |
float: left; | |
margin-left: 0; | |
width: 100%; | |
display: block; | |
} | |
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ | |
@media only screen and (min-width: 481px) { | |
.gridContainer { | |
width: 90.675%; | |
padding-left: 1.1625%; | |
padding-right: 1.1625%; | |
} | |
#LayoutDiv1 { | |
clear: both; | |
float: left; | |
margin-left: 0; | |
width: 100%; | |
display: block; | |
} | |
#LayoutDiv2 { | |
clear: both; | |
float: left; | |
margin-left: 0; | |
width: 100%; | |
display: block; | |
} | |
} | |
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ | |
@media only screen and (min-width: 769px) { | |
.gridContainer { | |
width: 88.2%; | |
max-width: 1232px; | |
padding-left: 0.9%; | |
padding-right: 0.9%; | |
margin: auto; | |
} | |
#LayoutDiv1 { | |
clear: both; | |
float: left; | |
margin-left: 0; | |
width: 48.9795%; | |
display: block; | |
} | |
#LayoutDiv2 { | |
clear: both; | |
float: left; | |
margin-left: 0; | |
width: 28.5714%; | |
display: block; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment