Skip to content

Commit

Permalink
grids using overflow auto rather than hidden (for lindsay with input …
Browse files Browse the repository at this point in the history 
…from Matt Sweeney and Theirry Koblentz), removed media from grids (it was a printing disaster in FF), and a bit of random clean-up
  • Loading branch information
@stubbornella
stubbornella committed Jul 23, 2009
1 parent 8e6c6e7 commit e67db49
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 23 deletions.
7 changes: 2 additions & 5 deletions css/grids.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* **************** GRIDS ***************** */
.line, .lastUnit {overflow: hidden;_overflow:visible;_zoom:1; }
.line, .lastUnit {overflow: auto;_overflow:visible;_zoom:1; }
.unit{float:left;_zoom:1;}
.unitExt{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
Expand All @@ -12,6 +11,4 @@
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit {float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}
/* extending grids to allow a unit that takes the width of its content */
.media{width:auto;}
.lastUnit {float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}
6 changes: 4 additions & 2 deletions css/mod.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ version: 0.2
/* **************** BLOCK STRUCTURES ***************** */
/* mod */
.mod{margin:10px;}
.hd,.bd,.ft,{overflow:hidden;_overflow:visible; _zoom:1;}
.mod .inner{background: url(skin/transparent.png) repeat left top;}
.hd,.bd,.ft{overflow:hidden;_overflow:visible; _zoom:1;}
.inner{position:relative;}
b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-index:10;}
.tl, .tr, .bl, .br{height:10px; width:10px;float:left;}
Expand All @@ -15,12 +16,13 @@ b{display:block;background-repeat:no-repeat;font-size:1%;position:relative;z-ind
.bl{background-position: left bottom;}
.br{background-position: right bottom;}
.br,.tr{float:right;}
.tr, .tl{overflow:hidden;margin-bottom:-32000px;}/* margin bottom needs to be < -9px */
.bl,.br{margin-top:-10px;}
.top{background-position:center top;}
.bottom{background-position:center bottom;_zoom:1;}/* this zoom required for IE5.5 only*/
/* complex */
.complex{overflow:hidden;*position:relative;*zoom:1;}/* position/zoom required for IE7, 6, 5.5 */
.complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;overflow:hidden;}
.complex .tl, .complex .tr{height:32000px; margin-bottom:-32000px;width:10px;}
.complex .bl, .complex .br{/*margin-top:0;*/}
.complex .top{height:5px;}
.complex .bottom{height:5px;/*margin-top:-10px;*/}
Expand Down
52 changes: 37 additions & 15 deletions css/mod_skins.css
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
/* **************** BLOCK SKINS ***************** */
/* ====== Contour blocks ====== */
/* remove *background-image:" to default to square corners for IE */
/* ----- simple extends the mod ----- */
/* remove background-image:" to default to square corners for IE */
/* ----- simple (extends mod) ----- */
.simple .inner {border:1px solid #D7D7D7;/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/}
.simple b{background-image:url(skin/mod/simple_corners.png);}
/* ----- basic extends the mod ----- */
/* ----- basic (extends mod) ----- */
.basic .inner {/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/}
.basic b{background-image:url(skin/mod/round.png);}
/* ----- simpleExt (extends mod) ----- */
.simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px; }
.simpleExt .inner{border-color:#fff; border-width:4px; background-color:#e2e2e2;}
.simpleExt b{*background-image:url(skin/mod/simple_extended.png);}
.simpleExt,.simpleExt .inner{border:1px solid #c7c7c7;/*-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;*/ }
.simpleExt .inner{border-color:#fff; border-width:4px; /background-color:#e2e2e2;*/}
.simpleExt b{background-image:url(skin/mod/simple_extended.png);}
.simpleExt .tl{left:-1px;top:-1px;height:12px; width:12px;}
.simpleExt .tr{right:-1px;top:-1px;height:12px; width:12px;}
.simpleExt .bl{left:-1px;bottom:-1px;height:12px; width:12px;margin-top:-12px;}
Expand All @@ -34,8 +34,20 @@
/* ----- grab (extends mod) ----- */
.grab .inner{border: 3px solid #00477a; border-bottom-width:10px;}/* can't be done w border radius */
.grab b{background-image:url(skin/mod/grab.png);}
.grab .tl, .grab .tr{height:10px; width:10px;}
/*.grab .tl, .grab .tr{height:10px; width:10px;}*/
.grab .bl, .grab .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
/* ----- faq (extends mod) ----- */
.faq .inner{border: 3px solid #b20029; border-bottom-width:10px;}/* can't be done w border radius */
.faq b{background-image:url(skin/mod/faq.png);}
.faq .bl, .faq .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
/* ----- onlinestore (extends mod) ----- */
.onlinestore .inner{border: 3px solid #9a9800; border-bottom-width:10px;}/* can't be done w border radius */
.onlinestore b{background-image:url(skin/mod/store.png);}
.onlinestore .bl, .onlinestore .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
/* ----- about (extends mod) ----- */
.about .inner{border: 3px solid #494949; border-bottom-width:10px;}/* can't be done w border radius */
.about b{background-image:url(skin/mod/about.png);}
.about .bl, .about .br{height:16px;/*if height is set, margin set*/margin-top:-16px;}
/* ----- talk (extends mod) ----- */
.talk,.talk .inner{border:1px solid #c7c7c7;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/}
.talk .inner{border-color:#ededed;}
Expand All @@ -56,9 +68,9 @@
.flow .inner{padding:0 4px;}
.flow .top{height:4px;}
.flow .bottom{height:4px;margin-top:-4px;}
.flow .br,.flow .bl{height:10px;margin-top:-6px;}/* margin top = bottom height - corner height */
.flow .br,.flow .bl{margin-top:-6px;}/* margin top = bottom height - corner height */
/* ----- shadow test (experimental attempt to match "flow" cross browser w no img)----- */
.boo{-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33);-moz-box-shadow: black 2px 2px 2px 2px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border:solid 1px #949494;background:#fff;}
.boo{-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,33);-moz-box-shadow: black 2px 2px 2px 2px;/*-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;*/border:solid 1px #949494;background:#fff;}
/* ----- .excerpt (extends complex) ----- */
.excerpt b{background-image:url(skin/mod/excerpt.png);}
.excerpt .top{height:1px;}
Expand All @@ -67,21 +79,31 @@
/* ----- sommers (extends pop) ----- */
.sommers .inner{_border:3px solid #D7D7D7;}/*IE6 backup no alpha transparency */
.sommers,.sommers .inner,.sommers b{background-image:url(skin/mod/glow_7px.png);_background-image:none;}
.sommers{/*margin:3px 10px 10px 3px;*/}
.sommers{margin:3px 20px 20px 3px;}
/* ----- gonzalo ----- */
.gonzalo, .gonzalo .inner, .gonzalo b{background-image:url(skin/mod/gc.png);}
/* ====== Background blocks ====== */
.sale .inner{background-color:red;}
.nicole .inner{background-color:#c01c41; color:#fff;}
.sale .inner{background:red none;}
.nicole .inner{background:#c01c41 none; color:#fff;}
.nicole *, .login *{ color:#fff;}
.highlight .inner{background-color:#e3e36f;}
.highlight .inner{background:#e3e36f none;}
.universe .inner{background:url(skin/mod/universe.png) repeat left top;}
.foo .inner{background: url(skin/mod/universe_gray.png) repeat left top;}
.login .inner{background: url(skin/mod/universe_login.png) repeat left top;}
.comment .inner{background-color:#e2e2e2;}
.comment .inner{background:#e2e2e2 none;}
/* ====== Block headers and footers ====== */
.hd h1, .hd h2, .hd h3, .hd h4, .hd h5, .hd h6{padding: 5px 10px;}
.section{background: #e9e9e9 url(skin/mod/header.png) repeat-x left bottom; color:#de2c72;font-size:120%;padding:5px 10px;}
.section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#de2c72;padding:0;}
.act{background-color:#e9e9e9;}
.topper{background: #fff url(skin/mod/header_gradient_light.png) repeat-x left bottom;color: #4D4D4D;font-size:120%;padding:5px 10px;}
.topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4D4D4D;padding:0;}
.bam{background: #00477a url(skin/mod/header_glossy.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}
.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;}
.gonz{background:url(skin/mod/gc_header.png) no-repeat left top;}/* messed up */
.online{background: #9a9400 url(skin/mod/online.png) repeat-x left top;color: #000;font-size:120%;padding:5px 10px;}
.online h1,.online h2,.online h3,.online h4,.online h5,.online h6{font-size:100%;color:#000;padding:0;}
.help{background: #b20029 url(skin/mod/help.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
.help h1,.help h2,.help h3,.help h4,.help h5,.help h6{font-size:100%;color:#fff;padding:0;}
.info{background: #636363 url(skin/mod/info.png) repeat-x left top;color: #fff;font-size:120%;padding:5px 10px;}
.info h1,.info h2,.info h3,.info h4,.info h5,.info h6{font-size:100%;color:#fff;padding:0;}
21 changes: 20 additions & 1 deletion module.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
--></head>
<body>
<div class="page">

<h1>Modules</h1>
<h2>Block Structures</h2>
<p>There are three basic block structures that you can build from. Examine how the structures work in Firebug, Dragonfly, or by applying the stylesheet mod_debug.css</p>
Expand Down Expand Up @@ -157,7 +158,7 @@ <h3>me</h3>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod basic nicole">
<div class="mod basic">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd">
Expand Down Expand Up @@ -235,6 +236,18 @@ <h3>sommers</h3>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
<div class="mod pop gonzalo">
<b class="top"><b class="tl"></b><b class="tr"></b></b>
<div class="inner">
<div class="hd gonz">
<h3>gonzalo</h3>
</div>
<div class="bd">
<p>Body</p>
</div>
</div>
<b class="bottom"><b class="bl"></b><b class="br"></b></b>
</div>
</div>
</div>
<h2>Background Objects</h2>
Expand Down Expand Up @@ -329,5 +342,11 @@ <h2>Block Footers</h2>
<div class="ft act">button here</div>

</div>
<!--<script type="text/javascript" src="http://webbits.pl/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="http://webbits.pl/yui/build/dom/dom.js"></script>
<script type="text/javascript">
var currentStyles = YAHOO.util.Dom.getStyle(document.body, 'backgroundColor');
console.log(currentStyles);
</script>-->
</body>
</html>
2 changes: 2 additions & 0 deletions template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<!--<link rel="stylesheet" type="text/css" media="all" href="css/template_debug.css" />-->
<link rel="stylesheet" type="text/css" media="all" href="css/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/content.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/mod.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/mod_skin.css" />
</head>
<body>
<h1>Template</h1>
Expand Down

0 comments on commit e67db49

Please sign in to comment.