SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    New York, NY
    0 Post(s)
    0 Thread(s)

    Blueprint grid.css

    I believe it would be helpful for developers to fully understand the pros/cons of using this framework. I've seen various posters that use blueprint, but don't really know whats under the hood.

    If anyone could contribute their opinions of this framework, and most importantly the issues it can cause, I think it would be very helpfully for everyone.

    One area off the bat that caught my eye:

    [small | large]
    This assumes the presentation of the content being encompassed will always be small or large.

    As well, the span system fits into this same criteria. I personally think this framework is just full of assumptions.

    Code CSS:
    /* -----------------------------------------------------------------------
     Blueprint CSS Framework 0.8
       * Copyright (c) 2007-Present. See LICENSE for more info.
       * See README for instructions on how to use Blueprint.
       * For credits and origins, see AUTHORS.
       * This is a compressed file. See the sources in the 'src' directory.
    ----------------------------------------------------------------------- */
    /* reset.css */
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
    body {line-height:1.5;}
    table {border-collapse:separate;border-spacing:0;}
    caption, th, td {text-align:left;font-weight:normal;}
    table, td, th {vertical-align:middle;}
    blockquote:before, blockquote:after, q:before, q:after {content:"";}
    blockquote, q {quotes:"" "";}
    a img {border:none;}
    /* typography.css */
    body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}
    h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
    h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
    h2 {font-size:2em;margin-bottom:0.75em;}
    h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
    h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
    h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
    h6 {font-size:1em;font-weight:bold;}
    h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
    p {margin:0 0 1.5em;}
    img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
    img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
    a:focus, a:hover {color:#000;}
    a {color:#009;text-decoration:underline;}
    blockquote {margin:1.5em;color:#666;font-style:italic;}
    strong {font-weight:bold;}
    em, dfn {font-style:italic;}
    dfn {font-weight:bold;}
    sup, sub {line-height:0;}
    abbr, acronym {border-bottom:1px dotted #666;}
    address {margin:0 0 1.5em;font-style:italic;}
    del {color:#666;}
    pre {margin:1.5em 0;white-space:pre;}
    pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
    li ul, li ol {margin:0 1.5em;}
    ul, ol {margin:0 1.5em 1.5em 1.5em;}
    ul {list-style-type:disc;}
    ol {list-style-type:decimal;}
    dl {margin:0 0 1.5em 0;}
    dl dt {font-weight:bold;}
    dd {margin-left:1.5em;}
    table {margin-bottom:1.4em;width:100%;}
    th {font-weight:bold;}
    thead th {background:#c3d9ff;}
    th, td, caption {padding:4px 10px 4px 5px;}
    tr.even td {background:#e5ecf9;}
    tfoot {font-style:italic;}
    caption {background:#eee;}
    .small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
    .large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
    .hide {display:none;}
    .quiet {color:#666;}
    .loud {color:#000;}
    .highlight {background:#ff0;}
    .added {background:#060;color:#fff;}
    .removed {background:#900;color:#fff;}
    .first {margin-left:0;padding-left:0;}
    .last {margin-right:0;padding-right:0;}
    .top {margin-top:0;padding-top:0;}
    .bottom {margin-bottom:0;padding-bottom:0;}
    /* forms.css */
    label {font-weight:bold;}
    fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
    legend {font-weight:bold;font-size:1.2em;}
    input[type=text], input.text, input.title, textarea, select {background-color:#fff;border:1px solid #bbb;}
    input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;}
    input[type=text], input.text, input.title, textarea, select {margin:0.5em 0;}
    input.text, input.title {width:300px;padding:5px;}
    input.title {font-size:1.5em;}
    textarea {width:390px;height:250px;padding:5px;}
    input[type=checkbox], input[type=radio], input.checkbox, {position:relative;top:.25em;}
    form.inline {line-height:3;}
    form.inline p {margin-bottom:0;}
    .error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
    .error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
    .notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
    .success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
    .error a {color:#8a1f11;}
    .notice a {color:#514721;}
    .success a {color:#264409;}
    /* grid.css */
    .container {width:950px;margin:0 auto;}
    .showgrid {background:url(src/grid.png);}
    .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
    .last, div.last {margin-right:0;}
    .span-1 {width:30px;}
    .span-2 {width:70px;}
    .span-3 {width:110px;}
    .span-4 {width:150px;}
    .span-5 {width:190px;}
    .span-6 {width:230px;}
    .span-7 {width:270px;}
    .span-8 {width:310px;}
    .span-9 {width:350px;}
    .span-10 {width:390px;}
    .span-11 {width:430px;}
    .span-12 {width:470px;}
    .span-13 {width:510px;}
    .span-14 {width:550px;}
    .span-15 {width:590px;}
    .span-16 {width:630px;}
    .span-17 {width:670px;}
    .span-18 {width:710px;}
    .span-19 {width:750px;}
    .span-20 {width:790px;}
    .span-21 {width:830px;}
    .span-22 {width:870px;}
    .span-23 {width:910px;}
    .span-24, div.span-24 {width:950px;margin:0;}
    input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17, input.span-18, textarea.span-18, input.span-19, textarea.span-19, input.span-20, textarea.span-20, input.span-21, textarea.span-21, input.span-22, textarea.span-22, input.span-23, textarea.span-23, input.span-24, textarea.span-24 {border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;}
    input.span-1, textarea.span-1 {width:18px!important;}
    input.span-2, textarea.span-2 {width:58px!important;}
    input.span-3, textarea.span-3 {width:98px!important;}
    input.span-4, textarea.span-4 {width:138px!important;}
    input.span-5, textarea.span-5 {width:178px!important;}
    input.span-6, textarea.span-6 {width:218px!important;}
    input.span-7, textarea.span-7 {width:258px!important;}
    input.span-8, textarea.span-8 {width:298px!important;}
    input.span-9, textarea.span-9 {width:338px!important;}
    input.span-10, textarea.span-10 {width:378px!important;}
    input.span-11, textarea.span-11 {width:418px!important;}
    input.span-12, textarea.span-12 {width:458px!important;}
    input.span-13, textarea.span-13 {width:498px!important;}
    input.span-14, textarea.span-14 {width:538px!important;}
    input.span-15, textarea.span-15 {width:578px!important;}
    input.span-16, textarea.span-16 {width:618px!important;}
    input.span-17, textarea.span-17 {width:658px!important;}
    input.span-18, textarea.span-18 {width:698px!important;}
    input.span-19, textarea.span-19 {width:738px!important;}
    input.span-20, textarea.span-20 {width:778px!important;}
    input.span-21, textarea.span-21 {width:818px!important;}
    input.span-22, textarea.span-22 {width:858px!important;}
    input.span-23, textarea.span-23 {width:898px!important;}
    input.span-24, textarea.span-24 {width:938px!important;}
    .append-1 {padding-right:40px;}
    .append-2 {padding-right:80px;}
    .append-3 {padding-right:120px;}
    .append-4 {padding-right:160px;}
    .append-5 {padding-right:200px;}
    .append-6 {padding-right:240px;}
    .append-7 {padding-right:280px;}
    .append-8 {padding-right:320px;}
    .append-9 {padding-right:360px;}
    .append-10 {padding-right:400px;}
    .append-11 {padding-right:440px;}
    .append-12 {padding-right:480px;}
    .append-13 {padding-right:520px;}
    .append-14 {padding-right:560px;}
    .append-15 {padding-right:600px;}
    .append-16 {padding-right:640px;}
    .append-17 {padding-right:680px;}
    .append-18 {padding-right:720px;}
    .append-19 {padding-right:760px;}
    .append-20 {padding-right:800px;}
    .append-21 {padding-right:840px;}
    .append-22 {padding-right:880px;}
    .append-23 {padding-right:920px;}
    .prepend-1 {padding-left:40px;}
    .prepend-2 {padding-left:80px;}
    .prepend-3 {padding-left:120px;}
    .prepend-4 {padding-left:160px;}
    .prepend-5 {padding-left:200px;}
    .prepend-6 {padding-left:240px;}
    .prepend-7 {padding-left:280px;}
    .prepend-8 {padding-left:320px;}
    .prepend-9 {padding-left:360px;}
    .prepend-10 {padding-left:400px;}
    .prepend-11 {padding-left:440px;}
    .prepend-12 {padding-left:480px;}
    .prepend-13 {padding-left:520px;}
    .prepend-14 {padding-left:560px;}
    .prepend-15 {padding-left:600px;}
    .prepend-16 {padding-left:640px;}
    .prepend-17 {padding-left:680px;}
    .prepend-18 {padding-left:720px;}
    .prepend-19 {padding-left:760px;}
    .prepend-20 {padding-left:800px;}
    .prepend-21 {padding-left:840px;}
    .prepend-22 {padding-left:880px;}
    .prepend-23 {padding-left:920px;}
    div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
    div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
    .pull-1 {margin-left:-40px;}
    .pull-2 {margin-left:-80px;}
    .pull-3 {margin-left:-120px;}
    .pull-4 {margin-left:-160px;}
    .pull-5 {margin-left:-200px;}
    .pull-6 {margin-left:-240px;}
    .pull-7 {margin-left:-280px;}
    .pull-8 {margin-left:-320px;}
    .pull-9 {margin-left:-360px;}
    .pull-10 {margin-left:-400px;}
    .pull-11 {margin-left:-440px;}
    .pull-12 {margin-left:-480px;}
    .pull-13 {margin-left:-520px;}
    .pull-14 {margin-left:-560px;}
    .pull-15 {margin-left:-600px;}
    .pull-16 {margin-left:-640px;}
    .pull-17 {margin-left:-680px;}
    .pull-18 {margin-left:-720px;}
    .pull-19 {margin-left:-760px;}
    .pull-20 {margin-left:-800px;}
    .pull-21 {margin-left:-840px;}
    .pull-22 {margin-left:-880px;}
    .pull-23 {margin-left:-920px;}
    .pull-24 {margin-left:-960px;}
    .pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}
    .push-1 {margin:0 -40px 1.5em 40px;}
    .push-2 {margin:0 -80px 1.5em 80px;}
    .push-3 {margin:0 -120px 1.5em 120px;}
    .push-4 {margin:0 -160px 1.5em 160px;}
    .push-5 {margin:0 -200px 1.5em 200px;}
    .push-6 {margin:0 -240px 1.5em 240px;}
    .push-7 {margin:0 -280px 1.5em 280px;}
    .push-8 {margin:0 -320px 1.5em 320px;}
    .push-9 {margin:0 -360px 1.5em 360px;}
    .push-10 {margin:0 -400px 1.5em 400px;}
    .push-11 {margin:0 -440px 1.5em 440px;}
    .push-12 {margin:0 -480px 1.5em 480px;}
    .push-13 {margin:0 -520px 1.5em 520px;}
    .push-14 {margin:0 -560px 1.5em 560px;}
    .push-15 {margin:0 -600px 1.5em 600px;}
    .push-16 {margin:0 -640px 1.5em 640px;}
    .push-17 {margin:0 -680px 1.5em 680px;}
    .push-18 {margin:0 -720px 1.5em 720px;}
    .push-19 {margin:0 -760px 1.5em 760px;}
    .push-20 {margin:0 -800px 1.5em 800px;}
    .push-21 {margin:0 -840px 1.5em 840px;}
    .push-22 {margin:0 -880px 1.5em 880px;}
    .push-23 {margin:0 -920px 1.5em 920px;}
    .push-24 {margin:0 -960px 1.5em 960px;}
    .push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}
    .prepend-top {margin-top:1.5em;}
    .append-bottom {margin-bottom:1.5em;}
    .box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
    hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;} {background:#fff;color:#fff;}
    .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
    .clearfix, .container {display:block;}
    .clear {clear:both;}

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Brazil, Minas Gerais. But i'm from Belgium.
    0 Post(s)
    0 Thread(s)
    Well, first off: the naming conventions are horrible: span-5, prepend-11.....That isn't quite handy if someone else has to work on your code some moment in time.

    Second: locking those elements in px also doesn't seem handy to me
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Victoria, Australia
    28 Post(s)
    2 Thread(s)
    I actually don't mind it, but some negatives are:

    Stuck at a fixed width layout of 960px
    24 units seems a bit excessive, you could probably get by with a lot less
    Take's some of the creativity out of layout design, it has the potential to come out looking a lot more like a newspaper than a creative layout.


    Simple to learn
    Consistent cross-browser grid

    Off Topic:

    3,000 helpful/unhelpful posts

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    England, UK
    0 Post(s)
    1 Thread(s)
    Most frameworks are nothing more than a CSS reset with some class or ID "hooks" to apply generic style to a portion of a website (either automatically, by default or by attribution). There's not really much in the way of upsides or downsides (excluding the naming conventions used), it's just a methodology of providing pre-packaged libraries of code. I think the main problem with frameworks is how they are perceived (as excuses not to code for yourself).

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    179 Post(s)
    6 Thread(s)
    I'm just starting (today) building a layout based on the grid 960 css system for a client.

    They specifically requested that I use this grid because they have a team of developers who will work on the templates I create and want to have a documented structure for adding elements and making changes. All their designs have been made with the grid in mind and as effectively their site is a newspaper style site it will actually fit into a grid quite nicely in most places.

    I've always been dead set against using grids as they add another framework on top of css which is it's own framework. It will actually take me longer to develop initially because I have to use the grid exactly and keep to the format specified. It also makes it harder because I can't use my arsenal of "css tricks" to create special effects (equal columns, inline-blocks and overflow collapsing sections etc.).

    It is also harder to add shadows to elements because the shadows are outside the grid and I therefore have to create extra over-riding rules to create new grids to apply these shadows. There are also elements that stick out of the grid and will need their own over-riding rules also.

    It seems that I will need to construct extra grid elements to cater for everything that doesn't fit into the grid.

    However, the client is adamant that I must use this grid so I will reserve judgement until I've finished and then I'll let you know what my thoughts are after having worked with a grid.

    The benefits the client perceives are they they will not have to learn my code but can simply refer to the grid structure and add elements as per the grid instructions and all being well things it will just fit. I have to code re-usable elements that can be dropped into the grid and take their width from the element they are placed in so it could be interesting.

    With previous designs the client would need to know my structure and how to close columns and rows but the grid already documents this behaviour.... but the proof of the pudding etc...

    I'll let you know how I get on.

  6. #6
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    England, UK
    0 Post(s)
    1 Thread(s)
    Paul, you will probably find my comments on another post fairly explanatory to the situation of frameworks (I myself am in the same group as you):

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Brazil, Minas Gerais. But i'm from Belgium.
    0 Post(s)
    0 Thread(s)
    The problem with frameworks is just that: they provide a framework but in the end also call for a separate sheet where you put your arsenal of tricks if you can't touch the framework. So you end up with, like in the case of blueprint, a sheet for the framework, a sheet for the typo, a sheet for the reset .... which sometimes could be avoided when you just have your own custom sheet to work for. But frameworks do have their usefulness i guess, although it's not my cup of tea...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts