SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 44 of 44

Thread: Reusing Modules

  1. #26
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    It would make sense to use a class for the common properties (like class="box") and an id for individual ones (id="services") would it not?

    HTML Code:
    <div class="box" id="services">
    ...
    </div>
    It would make most sense, but being that everything is CMS'd or reused by 'backenders' without any knowledge , this is not an option...

  2. #27
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where I work, the editors just want reusable snippets

    Basically, they want various reusable containers to drop in anywhere and get the certain 'presentational' value.

    @Eric - I have been using your approach...
    @Rochow - I do see what you are talking about. If box1 was removed and there was only box2 and box3, that could be confusing.

  3. #28
    SitePoint Zealot somecallmejosh's Avatar
    Join Date
    Sep 2006
    Location
    CT
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I typically use the following - assuming a two column layout:

    Code:
    <div id="masthead">
      Banner information
    </div>
    <ul id="main-navigation">
      <li><a href="#">link</a></li>
    </ul>
    <div id="content">
      <div id="primary-content">
         the main content on the page
      </div>
      <div id="secondary-content">
         typically reserved for sidebar information
      </div>
    </div><!-- end content container -->
    <div id="site-info">
         this is where I put the copyright and other business information
    </div>
    For a three column, I'll do something like this:
    Code:
    <div id="masthead">
      Banner information
    </div>
    <ul id="main-navigation">
      <li><a href="#">link</a></li>
    </ul>
    <div id="content">
      <div id="primary-content">
         the main content on the page
      </div>
      <div id="secondary-content">
         <div id="page-navigation">...</div>
         <div id="advertisements">...</div>
      </div>
    </div><!-- end content container -->
    <div id="site-info">
         this is where I put the copyright and other business information
    </div>

    I hope this helps.
    Joshua K. Briley
    Website Design and Front End Development

  4. #29
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by somecallmejosh View Post
    I typically use the following - assuming a two column layout:

    Code:
    <div id="masthead">
      Banner information
    </div>
    <ul id="main-navigation">
      <li><a href="#">link</a></li>
    </ul>
    <div id="content">
      <div id="primary-content">
         the main content on the page
      </div>
      <div id="secondary-content">
         typically reserved for sidebar information
      </div>
    </div><!-- end content container -->
    <div id="site-info">
         this is where I put the copyright and other business information
    </div>
    For a three column, I'll do something like this:
    Code:
    <div id="masthead">
      Banner information
    </div>
    <ul id="main-navigation">
      <li><a href="#">link</a></li>
    </ul>
    <div id="content">
      <div id="primary-content">
         the main content on the page
      </div>
      <div id="secondary-content">
         <div id="page-navigation">...</div>
         <div id="advertisements">...</div>
      </div>
    </div><!-- end content container -->
    <div id="site-info">
         this is where I put the copyright and other business information
    </div>

    I hope this helps.
    Looks good...

    If you are wanting to reuse 3 different modules for there presentational value, what would you name them?

    e.g.
    module-1, module-2, module-3 ?

    Imagine 3 different rounded corner shells being used to nest anything you can imagine hehe...

  5. #30
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This technique is very good. It saves a lot of time and space. But the problem is if you have too much, it lower sthe loading times.

  6. #31
    SitePoint Zealot somecallmejosh's Avatar
    Join Date
    Sep 2006
    Location
    CT
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good...

    If you are wanting to reuse 3 different modules for there presentational value, what would you name them?

    e.g.
    module-1, module-2, module-3 ?

    Imagine 3 different rounded corner shells being used to nest anything you can imagine hehe...
    Hi Cooper.semantics,

    I usually try to avoid the presentational references in the HTML. Of course, it's not a perfect situation. I have used a couple of different techniques over the years to accomplish this task.

    In one scenario, I would use an additional class, or combined class situation to accomplish the presentational stuff. I usually combine that with an ID for the sake of relevance. Like I said, it's not perfect.

    In other scenarios I rely on inheritance and advanced selectors to pin the style on an element based on it's relation to other HTML elements within a given document. This helps minimize the need for the class="module-x" situation. It's a balancing act, for sure.

    Transcending CSS by Andy Clarke has been an amazing reference for minimizing the presentational references inside the HTML. I'd recommend this book to anyone looking for some interesting ways to minimize their presentational markup through the use of compound HTML (XHTML, really) and inheritance. Andy Budd's CSS Mastery also discusses this situation in great detail - combining classes to help minimize markup. Both books, IMHO, are a must have for the front end guys/gals.
    Joshua K. Briley
    Website Design and Front End Development

  7. #32
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by somecallmejosh View Post
    Hi Cooper.semantics,

    I usually try to avoid the presentational references in the HTML. Of course, it's not a perfect situation. I have used a couple of different techniques over the years to accomplish this task.
    Yeah, I am looking for a way that includes ie6 to pull this off
    Quote Originally Posted by somecallmejosh View Post
    In one scenario, I would use an additional class, or combined class situation to accomplish the presentational stuff. I usually combine that with an ID for the sake of relevance. Like I said, it's not perfect.
    Yeah, in my case this seems not to be the case given to me. The editors just want a shell to plop in anywhere given the 'presentational' box.
    Quote Originally Posted by somecallmejosh View Post
    In other scenarios I rely on inheritance and advanced selectors to pin the style on an element based on it's relation to other HTML elements within a given document. This helps minimize the need for the class="module-x" situation. It's a balancing act, for sure.
    Not ie6 friendly hehe, but in the perfect world, this would be the ideal situation.
    Quote Originally Posted by somecallmejosh View Post
    Transcending CSS by Andy Clarke has been an amazing reference for minimizing the presentational references inside the HTML. I'd recommend this book to anyone looking for some interesting ways to minimize their presentational markup through the use of compound HTML (XHTML, really) and inheritance. Andy Budd's CSS Mastery also discusses this situation in great detail - combining classes to help minimize markup. Both books, IMHO, are a must have for the front end guys/gals.
    Yeah, this is a great book. He does contradict some of his teachings though. Being that sometimes you have too, like in my situation, I do not look down on it.

    Too add on, if you can think of a naming convention to replace module/box, It would be most appreciated.

  8. #33
    SitePoint Zealot somecallmejosh's Avatar
    Join Date
    Sep 2006
    Location
    CT
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Cooper.Semantics,

    True, most of this is not inherent in IE6. Dean Edwards wrote a script a few years back that actually helps modernize the browser a bit. Check out http://dean.edwards.name/IE7/.

    As far as your naming convention is concerned, it seems like you've been backed into a "presentational" corner. It is what it is. I would simplify things by going the multiple class route. By creating a class called "box" you can define the major parameters of the style. By assigning an additional class like "hilite1", "hilite2", etc., you can apply the appropriate colors, borders, backgrounds, etc. without having to reconstruct the dimensions every time.

    For instance:
    Code:
    <div id="whatever" class="box hilite1">
      ...
    </div>
    
    your CSS could look something like this:
    .box {width: 100px; height:100px; margin: 1em; padding:.5em; etc.}
    .hilite1 {background: #000 url(image1.gif) repeat-x; color: #fff; border:#ccc 2px solid;"}
    .hilite2 {background: #ccc url(image2.gif) repeat-x; color: #333; border:#000 2px solid;}
    Are you using a CMS on this project? I know this kind of functionality is built right in to Joomla, and can be pulled off in Drupal with ease.
    Last edited by somecallmejosh; Oct 26, 2008 at 14:10. Reason: content error
    Joshua K. Briley
    Website Design and Front End Development

  9. #34
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone following this thread might be interested to know that Jon Tan wrote an article (or is 'blog post' more semantically correct? ha!) that discusses using class names that reflect new elements that are available in HTML5. Among the new elements are 'header', 'footer', 'section', and 'article'. He proposes using these as class names (among others) for reusable modules.

    Link: Preparing for HTML5 with Semantic Class Names

  10. #35
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using a CMS on this project? I know this kind of functionality is built right in to Joomla, and can be pulled off in Drupal with ease.
    Drupal.

    Link: Preparing for HTML5 with Semantic Class Names
    Very cool
    This is exactly what I was looking for. Golden!

  11. #36
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    This is exactly what I was looking for. Golden!
    cool! And it doesn't hurt that Jon Tan's site is a design, typography, html, and css masterpiece!

  12. #37
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  13. #38
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I include the class as a parameter in the function call.
    That way you can use the same function more nimbly.

  14. #39
    SitePoint Addict bsmbahamas's Avatar
    Join Date
    Sep 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i simply use box1, box2, box3 in the html, and i use comments in the stylesheet

    .box1 {} /* descr of box 1 */
    .box2 {} /* descr of box 2 */

    #box3 {} /* descr of box 3 */

    so my html stays pretty ambiguous/generic, and my stylesheet reminds me what 'box' was for.

  15. #40
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,051
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    However, box doesn't describe content. Unless… the content is actually about a box. Then a guess its a win win.

  16. #41
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neither does article, module, content, or anything else that's extremely vague.

  17. #42
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,051
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Actually a article or content is less vague then box. The information is content and a article is merely a object of a specified type or separate part of a document. Module can also be less vague because it implies a relationship.

  18. #43
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div class="content">
    </div>

    Ok, what's in that div then? All of the generic names are as vague as the next, and are used purely for divs that are wrapping content for style to be applied - if they weren't, they'd have a name that actually describes the content. The divs are merely presentational, they don't have "relationship" or any rubbish. If you actually believe that the divs are serving any sort of semantic purpose, you need a bit of a reality check.

    <div class="box"><div><div>
    because I need round corners
    </div></div></div>

    <div class="module"><div><div>
    because I need round corners
    </div></div></div>

    No matter what vague name its called, it only serves the one purpose - presentation.

  19. #44
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    Usually, when developing a html page, we try to reuse as much html as possible. My question to everyone is, 'if you are reusing a module(aka box) that is visually being used throughout the entire website in different 'containers' of coding, what would you name these?'

    A. box
    B. module
    c. article
    e. neither

    If specified neither, throw out some suggestions.

    I tend to work on larger based projects, and a lot of the time the same rounded corner box is used on several occasions.

    You could use group selectors but, if there are over 20 cases of this being reused it can become a headache.
    I might use "box".

    But "reusing a ... box ... in different containers" implies the box inherits. In this case, I would have tried to suck up all the common attributes into one style sheet with <div>'s based on common page-relative positions, then use another style sheet containing overrides on descendant selectors for "box ... in different containers".

    Eg. the page 'inventory.html' might contain,

    <head>
    <link rel="stylesheet" type="text/css" href="css/MainCSS.css"
    media="all" />
    <link rel="stylesheet" type="text/css" href="css/parts.css"
    media="all" />
    </head>
    <body>
    <div id="content">

    <table class="partslist">
    ...
    </table>

    </div>
    etc....

    where 'table' and '#content' are defined in MainCSS.css, and #content table.partslist is defined in parts.css.

    I guess you might say the semantics of the page drive the names in my override style sheets.


Bookmarks

Posting Permissions

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