Layout template [sidebars\columns]

19 views
Skip to first unread message

Peter Flannery

unread,
Jul 14, 2013, 5:37:40 PM7/14/13
to object-or...@googlegroups.com
Hi

For sidebars should we continue using the same approach as the older oocss library. 
Because I noticed that the newer _template.scss doesn't contain any sidebars

the older oocss example: 

/* ====== Columns ====== */
.leftCol{float:left;width:250px;_margin-right:-3px;}
.rightCol{float:right;width:300px;_margin-left:-3px;}
/* extend columns to allow for common column widths */
.gMail{width:160px;}
.gCal{width:180px;}
.yahoo{width:240px;}
.myYahoo{width:300px;}


Appreciate anyone's input. thanks

Abd Al-Ala Camara

unread,
Jul 16, 2013, 9:01:19 AM7/16/13
to object-or...@googlegroups.com
Hi Peter,

If I am right, I think it should be the same. If you don't need a sidebar on a project don't include it else include it if you need. 


the way i use to implement this is like so:
HTML

sample three col content

<div class="content">
<!-- 
if you don't need a column remove it- it does not affect the presentation
      -->
<div class="leftcol">

</div><!-- /leftcol -->

<div class="rightcol">

</div><!-- /rightcol -->

<div class="main">

</div><!-- /main -->

</div><!-- /content -->

sample twocol content

<div class="content">
<!-- 
if you don't need a column remove it- it does not affect the presentation
      -->
<div class="leftcol">

</div><!-- /leftcol -->

<div class="main">

</div><!-- /main -->

</div><!-- /content -->

sample onecol content

<div class="content">

</div><!-- /content -->


CSS
                 .content { overflow: hidden;  }
.leftcol, .rightcol { float:left;  }
.leftcol { width:250px; _margin-right:-3px; }
.rightcol { width:300px; _margin-left:-3px; }
.main {}

.gMail {width:160px;}
.gCal {width:180px;}
.yahoo {width:240px;}
.myYahoo {width:300px;}


i hope that helps otherwise let me know - and for others let me know if am wrong pls

Cheers



--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to object-oriented...@googlegroups.com.
To post to this group, send email to object-or...@googlegroups.com.
Visit this group at http://groups.google.com/group/object-oriented-css.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Address:
P.O.Box 2397 Serrekunda,
The Gambia.


Tel:   
P:    +220 3777578 / +220 6677578

Online @:
S:      abddev

Reply all
Reply to author
Forward
0 new messages