CSS create snippets and boilerplates by ojp13483


									         .net technique css

         CSS create snippets
         and boilerplates                                                                                                                                                                       l CD
                                                                                                                                                                                Your essentia uire
                                                                                                                                                                                          ’ll req
                                                                                                                                                                                All the files you
                                                                                                                                                                                for the tutorial
                                                                                                                                                                                found on this
                                                                                                                                                                                                  can be
                                                                                                                                                                                                issue’s CD

         Craig Grannell shows you how to speed up your web design and hand-coding
         by creating template documents that can be reused on new projects
          Knowledge needed Intermediate CSS and HTML
                                                                                                            Expert tip Keep up to date
          Requires A text editor
          Project time 20 minutes                                                                             Browsers come and go, and web standards and guidelines are regularly
                                                                                                              updated. Also, new techniques for achieving good typography, layout and
                                                                                                              design arrive with alarming regularity. With this in mind, always ensure
                   Have you ever stopped to consider how, every time you work on a new                        that your boilerplates are up to date. Seeing as they’re intended as the
                   site, you could speed things up by creating boilerplate documents as a                     foundation for each new project, you don’t want to have old-fashioned
                   starting point? This issue, I’m going to explore the part of my brain that                 techniques peppered around. It’s also a good idea to keep your boilerplates
         houses how I get my own projects off to a running start, enabling you to have                        “clean” – avoid using any hacks or deprecated elements and attributes.
         the same advantage and save time in the process. So, let’s dive straight in.                         You can use the W3 validation services to sanity check your creations.
             Every website is different – even nasty, evil “clone” sites aren’t identical to the
         sites they’re ripping off. However, tear off a site’s “skin” and you’ll find that many
         elements are shared. It’s likely that in the early stages of projects, you’re often               <body>
         doing the same things time and time again, which makes no sense at all.                           </body>
             Most web design applications offer some kind of starting point for web pages –                </html>
         typically a default page with the DOCTYPE declaration happily in place, along with
         a partially populated head section (which helpfully adds a meta tag to define the                 This code block is what a default XHTML Strict document from Dreamweaver looks
         character set for the page, and a title element), and an empty body section, as per               like. It’s bare-bones, though, and every project I work on makes vast use of CSS,
         the following code:                                                                               and then has to cater for the inadequate support for CSS displayed by various
                                                                                                           versions of Internet Explorer. With that in mind, it makes sense to add a default
         <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”                                          style block to the boilerplate, which includes a style element to import the main
           “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>                                            style sheet, a link element to import a print style sheet, plus conditional comments
         <html xmlns=”http://www.w3.org/1999/xhtml”>                                                       to deal with various releases of IE. Typically, I add three of these: one for IE7, one
         <head>                                                                                            for IE6 and below, and one for “less than” IE6, which is mostly used to deal with
          <meta http-equiv=”content-type” content=”text/html; charset=utf-8” />
          <title>Untitled Document</title>

         Design by default Decent text editors, such as BBEdit, enable you to define defaults for          Stay in synch If you’re setting defaults for layout or spacing, make sure they match your
         each type of document, or to create stationery that can be used as the starting point for files   boilerplate documents. This is CSSEdit’s Source Editing Preferences pane, with rules defined

         70     .net august 2007

NET165.tut_css 70                                                                                                                                                                                            7/6/07 11:08:43 am
                                                                                                                                                                    .net technique css

                                                                                                                    Create boilerplates
                                                                                                                    for Dreamweaver
                                                                                                                    Get Adobe’s star program singing to your tune
                                                                                                                    “Great,” you’re thinking. “This is all very well, Craig, but I use Dreamweaver
                                                                                                                    for all my design work. Are you really suggesting that I load up some
                                                                                                                    boilerplate document each time, rather than making a selection from the
                                                                                                                    New Document dialog? Are you? ARE YOU?” Firstly, calm down, dear. It’s
                                                                                                                    only a tutorial. Secondly, it’s actually easy enough to muck about with
                                                                                                                    Dreamweaver’s default files (though strangely, few designers do).
                                                                                                                       The first thing you need to do is locate where the files are hiding. On
                                                                                                                    Windows, you’ll find them happily nestling in C:\Program Files\Macromedia\
                                                                                                                    Dreamweaver 8\Configuration\DocumentTypes\NewDocuments. On the
                                                                                                                    Mac, they lurk in /Applications/Macromedia Dreamweaver 8/Configuration/
                                                                                                                    DocumentTypes/NewDocuments. (These locations are for Dreamweaver 8
                                                                                                                    – amend accordingly for other major releases of the program.) It’s probably
                                                                                                                    worth backing up ‘Default.css’ and ‘Default.html’ in case anything goes
                                                                                                                    horribly wrong. After that point, copy your CSS boilerplate into ‘Default.css’.
                                                                                                                       For web pages, things aren’t quite so simple. Copy the head content after
                                                                                                                    the title element of your boilerplate into the head section of ‘Default.html’,
                                                                                                                    and then copy across the body content. Don’t replace the entire document,
              Speedy navigation If your CSS editor provides a list of styles, heading comments make                 because Dreamweaver adds a DOCTYPE and content meta tag based on your
              fast work of navigating the list. If it doesn’t, the headings still make it easier to find rules      preferences settings and the Document Type (DTD) choice you make in the
                                                                                                                    New Document dialog.
              the site-centring and box-model issues that affect IE5.5. For more on conditional
              comments, see my tutorial in .net issue 157. If you work with JavaScript, it’s useful
              to bung a script element underneath all those CSS-oriented ones, too.                              <div id=”wrapper”>
                                                                                                                  <div id=”masthead”>
              <style type=”text/css” media=”screen”>                                                               Masthead
              /* <![CDATA[ */                                                                                      <div id=”logo”>Logo</div>
              @import url(x.css);                                                                                  <div id=”navContainer”>
              /* ]]> */                                                                                              Nav container
              </style>                                                                                               <div id=”navigation”>
              <link rel=”stylesheet” rev=”stylesheet” href=”x-print.css” type=”text/css”                               <ul>
              media=”print” />                                                                                          <li><a href=”#”>Nav item</a></li>
              <!--[if IE 7]>                                                                                           </ul>
               <link rel=”stylesheet” type=”text/css” href=”ie-7-hacks.css” media=”screen” />                        </div>
              <![endif]-->                                                                                         </div>
              <!--[if lte IE 6]>                                                                                  </div>
               <link rel=”stylesheet” type=”text/css” href=”ie-6lte-hacks.css” media=”screen” />                  <div id=”content”>Content</div>
              <![endif]-->                                                                                        <div id=”footer”>Footer</div>
              <!--[if lt IE 6]>                                                                                  </div>
               <link rel=”stylesheet” type=”text/css” href=”ie-5-hacks.css” media=”screen” />
              <![endif]-->                                                                                       The text labels (‘Masthead’, ‘Logo’, ‘Nav container’, and so on) are there as
              <script src=”x.js” type=”text/javascript”></script>                                                temporary flags, and are handy when testing embryonic sites that have missing
                                                                                                                 components. It’s also useful to place a dummy navigation item in the navigation
              Documents whose names will change for each site just have ‘x’ and the file                         list, as this can be rapidly duplicated and each list item edited accordingly.
              extension for their temporary filenames. You could use a longer string in place of                     Once you get past this point, you need to think in a more modular way,
              ‘x’, but it will take longer to delete when you come to use the boilerplate later.                 because projects will have fewer common components. Generally, however, many
                                                                                                                 make use of columns in the content area, perhaps utilising a sidebar and main
              Populating the document body                                                                       content area. Rather than coding these things each time, save them as snippets –
              Adding default elements to a boilerplate’s body section is a little less clear-cut,                small text files to copy and paste into multiple documents. How you go about
              mainly because there’s more potential for variation than in the head section.                      saving them is up to you. Personally, I favour a ‘columns’ text file that contains
              That said, most of my layouts tend to contain several core elements: a wrapper                     a number of HTML snippets that are followed by associated CSS rules (see the
              that contains the page layout (typically restricting its width and then centring the               following code block for an example), but you may prefer each item – ‘two
              entire design); a masthead, which contains a div for the site’s logo and navigation,               columns’ HTML, ‘two columns’ CSS, ‘three columns’ HTML, and so on – to be a
              the latter of which tends to be marked up as an unordered list; a content div                      standalone file. For Mac OS X users, dragging blocks of text from a text editor
              (for the page’s content); and a footer. This little lot can be added as shown in                   to named folders can rapidly produce a decent set of draggable snippets.
              the following code block.
                Rather than coding these things                                                                  <div id=”mainContent”>Main content</div>
                                                                                                                 <div id=”sidebar”>Sidebar</div>

                each time, save them as snippets                                                                 CSS
                                                                                                                 #mainContent {
                – text files to copy and paste                                                                            float: left;

                                                                                                                                                                   .net august 2007 71          next>

NET165.tut_css 71                                                                                                                                                                                7/6/07 11:08:44 am
         .net technique css

                                                                                                             Resources Find out more online

                                                                                                                W3C Markup Validation                      The Flock web browser
                                                                                                                W3C’s validation services enable           The rather groovy upstart browser,
                                                                                                                you to validate markup via URL,            Flock, makes a big deal out of its
                                                                                                                file upload or direct input. A CSS         “social networking” features, but
                                                                                                                validation service is also provided,       its Snippets pane can be handy for
                                                                                                                which is handy for weeding out             collecting useful bits of info and
                                                                                                                broken rules and typos.                    code for study at a later date.
                                                                                                                validator.w3.org                           www.flock.com

                                                                                                           the style sheet. Property/value pairs and the rule’s closing bracket are indented by
                                                                                                           two tabs, which makes it easy to vertically scan the document for a rule. Note that
         Rapid scanning By making use of tabbing and indenting the property/value pairs, the               rules have a clear line between them to aid the readability of a document.
         left-hand edge of a style sheet houses only selectors and heading edges, making it easy to scan
                                                                                                           /* --------- 1. defaults --------- */
                                    width: px;
                                    }                                                                      *{
                                                                                                                    margin: 0;
         #sidebar {                                                                                                 padding: 0;
                         float: left;                                                                               }
                         width: px;
                         }                                                                                 body {
                                                                                                           It makes sense to populate the style sheet with any elements common across all
         It’s worth spending a few minutes figuring out which things you regularly work                    designs you work on. I always zero margins and padding for all elements, hence
         with on sites, and making snippets accordingly. Galleries, for example, often have                the universal selector rule shown above. Elsewhere, various separators are defined
         similar code, as do pullquotes and images with captions.                                          for clearing floated content, along with the clearFix rule from Position is
                                                                                                           Everything. Should you employ a default method for sizing fonts, this can also be
         Creating a CSS boilerplate                                                                        included in the boilerplate (see section four of the example document on the CD).
         Jump into your souped-up De Lorean and let’s take a trip back to the late 1990s.                      For complex style sheets, including boilerplates, it may be necessary to flag a
         Back then, CSS files tended to be somewhat simpler than they are now, with most                   selection of elements and group them under a subheading. A subheading must
         designers using them for styling fonts and the odd bit of layout. Today, web                      stand out, but should not be more prominent than the section headings. I tend to
         designers use CSS for almost all aspects of layout. In the past, you’d just bung each             tab these in to the same level as the property/value pairs, and ensure that there’s
         new CSS rule into the style sheet as you created it, but these days, that’s a recipe              a clear line above and below. Hyphens at each side help the line to stand out.
         for pain. If you have dozens of rules, you need to be able to find them fast. Your
         CSS files need to be well ordered, well structured and, as we’ll see, well tabbed.                         /* -- sub-heading -- */
            Because CSS files are text documents that are cached, adding a few extra lines
         that aren’t technically required makes no discernable difference to site download                 rule {/* a comment about this rule */
         and rendering speeds, and so my boilerplate begins with a hefty, multiple-line CSS                        property: value;
         comment. If you open ‘boilerplate.css’ from the CD, you’ll see that the first few                         }
         lines of the comment include a note about what website the style sheet is for
         (handy for when you’re working on several projects simultaneously), an author                     Note the comment after the opening curly bracket. When creating boilerplates for
         credit and a URL. Next is a basic table of contents that outlines each of the                     someone who may not be familiar with CSS, use comment rules to state what
         document’s main sections. These sections relate to a particular group of styles:                  they’re for. I favour this for comments directed at a single rule, as it’s obvious what
         ‘defaults’, ‘structure’, ‘links and navigation’, ‘typography’, ‘images’ and so on.                the comment applies to and it doesn’t distract from headings and subheadings.
                                                                                                              The completed boilerplates for web pages and CSS documents are both on this
         ToC                                                                                               issue’s CD, so from this point onwards, feel free to use and abuse them at will!

                 1. defaults
                 2. structure
                                                                                                                                    About the author
                 3. links and navigation                                                                                           Name Craig Grannell
                 [etc.]                                                                                                            Site www.snubcommunications.com
                                                                                                                                   Areas of expertise Information architecture, site concepts,
         The section names and numbers are then matched in the rest of the document. A                                             graphics, interface and front-end design
         single-line comment is used to head each section, and a string of dashes either                                           Clients Swim~, Rebellion, IDG
         side of the section’s name creates a horizontal separator that defines each area of                                       Favourite holiday destination Anywhere without web!

         <prev          72        .net august 2007

NET165.tut_css 72                                                                                                                                                                                7/6/07 11:08:45 am

To top