52Framework -|- community revision - <script src="/html5.js"></script> <link rel="stylesheet" type="text/css" href="/reset.css" media="screen" title="Reset by Eric Meyer modified by Angel Grablev for HTML5 interaction"> <link rel="stylesheet" type="text/css" href="/general.css" media="screen"> <link rel="stylesheet" type="text/css" href="/grid.css" media="screen"> <style> * {outline:none !important;} html, body { height: 100%; } .wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -185px; /* the bottom margin is the negative value of the footer's height */ } footer, .push { height: 185px; /* .push must be the same height as .footer */ } body {font-family: Arial, Helvetica, sans-serif; } header {height:80px; position:relative; margin-bottom:5px;} header nav {height:29px;} nav ul {list-style:none; float:right; margin-top:10px; font-size:1.3em;} nav ul li {float:left; margin-left:5px;} nav ul li a {display:block; color:#01547f; text-decoration:none; padding:5px 8px; margin-top:8px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} nav ul li a:hover, nav ul li.active a {background-color:#01547f; color:#fff;} section.main {width:968px; height:355px; position:relative; background:#fff url(/images/main.jpg); margin:0 auto;} .main article {margin-top:150px; color:#01547f; line-height:1.2em;} .main .html5 { width:193px; margin-left:20px;} .main .css3 { width:210px; margin-left:45px; } .main .what_else { width:319px; margin-left:52px; font-size:1.2em;} .main .buttons {margin-right:12px;} section.contribute { border-bottom:1px solid #01547f;} .brief_features {list-style:none;} .brief_features li {padding-left:20px; background:url(/images/tick.png) no-repeat left; margin-left:5px;} .features_brief {border-top:1px solid #6dcdf5; padding-top:10px;} .features_brief blockquote {margin-top:25px;} footer {height:185px; font-size:.8em; width:100%; background: url(/images/footer_repeater.jpg) repeat-x bottom; margin-top:10px;} footer .inner_wrap {background:url(/images/footer.jpg) no-repeat center; height:100%; margin:0 auto;} footer .enavu_network img {margin-top:40px;} footer section { margin-top:35px; color:#01547e;} .the_network {float:right; margin-top:60px; list-style:none;} .the_network li {float:left; width:110px;} .the_network li a {display:block; padding:3px 5px; font-size:1.2em; font-weight:600; text-decoration:none; color:#01547e; border:1px dashed #fff; background:url(/images/px.png) repeat;} .the_network li a:hover {background:#fff;} .the_network li a span {font-size:.8em; display:block; font-weight:normal; line-height:1.152em;} </style> <script type="text/javascript" src="/scripts/shCore.js"></script> <script type="text/javascript" src="/scripts/shBrushBash.js"></script> <script type="text/javascript" src="/scripts/shBrushCss.js"></script> <script type="text/javascript" src="/scripts/shBrushDiff.js"></script> <script type="text/javascript" src="/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="/scripts/shBrushPlain.js"></script> <script type="text/javascript" src="/scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> <script src="/js/jquery-1.3.2.min.js"></script> <script src="/js/jquery.autogrow.js"></script> <script> $(document).ready(function(){$(".grow").autogrow();}); </script> <body> <section class="wrap"> <section class="wrap_16"> <header> <div class="logo left"><a href="/"><img src="/images/logo.jpg" alt="52framework" /></a></div> <nav> <ul> <li><a href="/home">home</a></li> <li><a href="http://demo.52framework.com">demo</a></li> <li><a href="/blog">blog</a></li> <li class="active"><a href="/community">community</a></li> <li><a href="/documentation">documentation</a></li> <li><a href="/user">login/signup</a></li> </ul> </nav> <div class="clear"></div> </header> </section> <section class="features wrap_16"> <div class="col_10"> <div class="back_to_docs" style="margin-bottom:10px;"><a href="/community"><< Back to community</a></div> <div class="section" style="margin-bottom:10px; border-bottom:1px solid #ccc; padding-bottom:10px;"> <h1>Grid.css - append and prepend classes</h1> <p>Posted By: <b><u>km0r3</u></b> | Date Posted: Sunday, Feb 7th 2010</p> <div class="overv"><h3>Overview</h3> <p>I think it’s useful to provide append and prepend classes in the grid.css for fast positioning. Demo provided. </p> </div> <div class="reas"><h3>Reason</h3> <p>I just recently needed this and instead of writing boilerplate code, why don’t ship this with the framework? Maybe you could put this in a folder like plugins/position.css, or whatever, to give the user the chance to choose if he wants this extra functionality. A lot of other frameworks provide similar patterns. </p> </div> <div class="chang"><h3>Change</h3> <code>+++ b/52fw_beta_0.5/grid.css Sat Feb 06 23:51:12 2010 -0300<br /> @@ -43,7 +43,7 @@<br /> <br /> +<br /> +.prepend_1 { padding-left:40px; } <br /> +.prepend_2 { padding-left:100px; }<br /> +.prepend_3 { padding-left:160px; }<br /> +.prepend_4 { padding-left:220px; }<br /> +.prepend_5 { padding-left:280px; }<br /> +.prepend_6 { padding-left:340px; }<br /> +.prepend_7 { padding-left:400px; }<br /> +.prepend_8 { padding-left:460px; }<br /> +.prepend_9 { padding-left:520px; }<br /> +.prepend_10 { padding-left:580px; }<br /> +.prepend_11 { padding-left:640px; }<br /> +.prepend_12 { padding-left:700px; }<br /> +.prepend_13 { padding-left:760px; }<br /> +.prepend_14 { padding-left:820px; }<br /> +.prepend_15 { padding-left:880px; }<br /> +.prepend_16 { padding-left:940px; }<br /> +<br /> +<br /> +.append_1 { padding-right:40px; } <br /> +.append_2 { padding-right:100px; }<br /> +.append_3 { padding-right:160px; }<br /> +.append_4 { padding-right:220px; }<br /> +.append_5 { padding-right:280px; }<br /> +.append_6 { padding-right:340px; }<br /> +.append_7 { padding-right:400px; }<br /> +.append_8 { padding-right:460px; }<br /> +.append_9 { padding-right:520px; }<br /> +.append_10 { padding-right:580px; }<br /> +.append_11 { padding-right:640px; }<br /> +.append_12 { padding-right:700px; }<br /> +.append_13 { padding-right:760px; }<br /> +.append_14 { padding-right:820px; }<br /> +.append_15 { padding-right:880px; }<br /> +.append_16 {padding-right:940px; }<br /> <br /> <br /> @demo.html<br /> <!DOCTYPE html><br /> <br /> <html lang="en"><br /> <br /> <head><br /> <br /> <meta charset=utf-8><br /> <br /> <title>52Framework -- brought to you by the enavu network</title><br /> <br /> [removed][removed]<br /> <br /> <link rel="stylesheet" type="text/css" href="reset.css" media="screen" title="Reset by Eric Meyer modified by Angel Grablev for HTML5 interaction" /><br /> <br /> <link rel="stylesheet" type="text/css" href="general.css" media="screen" /><br /> <br /> <link rel="stylesheet" type="text/css" href="grid.css" media="screen" /><br /> <br /> <style><br /> <br /> body {font-family: Arial, Helvetica, sans-serif; letter-spacing:.01em;}<br /> <br /> <br /> <br /> div p{ background: grey; }<br /> <br /> </style><br /> <br /> </head><br /> <br /> <body><br /> <br /> <header><br /> <h1>This is just a demo to demonstrate the functionality of the `prepend` and `append` classes.</h1><br /> </header><br /> <br /> <div class="prepend_1"><br /> <br /> prepend_1<br /> <br /> </div><br /> <br /> <div class="prepend_2"><br /> <br /> prepend_2<br /> <br /> </div><br /> <br /> <div class="prepend_3"><br /> <br /> prepend_3<br /> <br /> </div><br /> <br /> <div class="prepend_4"><br /> <br /> prepend_4<br /> <br /> </div><br /> <br /> <div class="prepend_5"><br /> <br /> prepend_5<br /> <br /> </div><br /> <br /> <div class="prepend_6"><br /> <br /> prepend_6<br /> <br /> </div><br /> <br /> <div class="prepend_7"><br /> <br /> prepend_7<br /> <br /> </div><br /> <br /> <div class="prepend_8"><br /> <br /> prepend_8<br /> <br /> </div><br /> <br /> <div class="prepend_9"><br /> <br /> prepend_9<br /> <br /> </div><br /> <br /> <div class="prepend_10"><br /> <br /> prepend_10<br /> <br /> </div><br /> <br /> <div class="prepend_11"><br /> <br /> prepend_11<br /> <br /> </div><br /> <br /> <div class="prepend_12"><br /> <br /> prepend_12<br /> <br /> </div><br /> <br /> <div class="prepend_13"><br /> <br /> prepend_13<br /> <br /> </div><br /> <br /> <div class="prepend_14"><br /> <br /> prepend_14<br /> <br /> </div><br /> <br /> <div class="prepend_15"><br /> <br /> prepend_15<br /> <br /> </div><br /> <br /> <div class="prepend_16"><br /> <br /> prepend_16<br /> <br /> </div><br /> <br /> <br /> <br /> <br /> <br /> <div class="append_1"><br /> <br /> append_1<br /> <br /> </div><br /> <br /> <div class="append_2"><br /> <br /> append_2<br /> <br /> </div><br /> <br /> <div class="append_3"><br /> <br /> append_3<br /> <br /> </div><br /> <br /> <div class="append_4"><br /> <br /> append_4<br /> <br /> </div><br /> <br /> <div class="append_5"><br /> <br /> append_5<br /> <br /> </div><br /> <br /> <div class="append_6"><br /> <br /> append_6<br /> <br /> </div><br /> <br /> <div class="append_7"><br /> <br /> append_7<br /> <br /> </div><br /> <br /> <div class="append_8"><br /> <br /> append_8<br /> <br /> </div><br /> <br /> <div class="append_9"><br /> <br /> append_9<br /> <br /> </div><br /> <br /> <div class="append_10"><br /> <br /> append_10<br /> <br /> </div><br /> <br /> <div class="append_11"><br /> <br /> append_11<br /> <br /> </div><br /> <br /> <div class="append_12"><br /> <br /> append_12<br /> <br /> </div><br /> <br /> <div class="append_13"><br /> <br /> append_13<br /> <br /> </div><br /> <br /> <div class="append_14"><br /> <br /> append_14<br /> <br /> </div><br /> <br /> <div class="append_15"><br /> <br /> append_15<br /> <br /> </div><br /> <br /> <div class="append_16"><br /> <br /> append_16<br /> <br /> </div><br /> <br /> <br /> </body><br /> <br /> </html><br /> </code> </div> </div> <style> .comments {list-style:none;} .comments li {margin-left:0; margin-bottom:10px; border-bottom:1px solid #eaeaea; border-right:1px solid #ccc;} .comments li .comment_content {font-family:Georgia, "Times New Roman", Times, serif; color:#333;} .comments li .header {font-size:1.1em;} </style> <h3>Comments</h3> <ul class="comments"> <li style="position:relative;"><p class="header">By <b>agrublev</b> </p> <span style="position:absolute; right:0; top:0; background-color:#eaeaea; border-left:1px solid #ccc; padding-left:5px; padding-right:5px; padding-top:2px;"> Sunday, Feb 7th 2010 </span> <span class="comment_content"><p>Personally i never saw use for this feature, but i assume it can be useful. I should mention that if i decide to implement it, i might go ahead and use what ive seen which was either absolute positioning or margins… i think 960.gs does it with margin. </p></span> </li> </ul> <h3>Add Comment</h3> Please <a href="/user">Login/Signup</a> to add Comments