• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Pro CSS and HTML Design Patterns

 
Ranch Hand
Posts: 3389
Mac MySQL Database Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hello Michael,

I am aware of the term 'Design Patterns' and used it in Java perspective.

To what extent the Design Patterns in HTML sense is covered here?

What kinda patterns are generally required and in use for a good, efficient design in HTML? I have not come across some patterns in web designing.

Thank you.
 
Author
Posts: 42
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
How do CSS and HTML Design Patterns compare to Design Patterns in Object-oriented languages?

This is a great question.

CSS and HTML are not object-oriented languages; and, thus, there are no direct corollaries between their design patterns.

There is a whole school of thought wrapped around "design patterns." In academic circles, a design pattern has four parts: name, problem, solution, and tradeoffs. In other words, a "design pattern" is a process for naming a pattern, describing a problem, showing a generalized solution, and discussing the pros and cons of the solution.

In my book, Pro CSS and HTML Design Patterns, I apply this process to create patterns. The patterns show how to use XHTML structurally and semantically and how to style and layout XHTML with CSS. All the patterns use best practices, are accessible, and are valid XHTML and CSS.

The name of the book is also a play on words, since the book is about using patterns to help us design web pages.

Below is a concrete example of an XHTML/CSS design pattern. It is the Section design pattern and it is the basic building block of all web pages. It is discussed in detail in chapter 13.

<div class="section TYPE">
<HEADING> content </HEADING>
<BLOCK> content </BLOCK>
</div>

*.section { STYLES }
*.section.TYPE { STYLES }
*.section.TYPE HEADING { STYLES }
*.section.TYPE BLOCK { STYLES }
*.section *.section { STYLES }

Notice that the pattern is pseudo-code for XHMTL and CSS code. HEADING and BLOCK are not XHTML elements but are placeholders for any XHTML heading or block element. TYPE is also not a CSS class, but is a placeholder for a class that specifies a semantically meaningful identifier of the section, such as "introduction", "content", "example", etc. Thus, you can see that a pattern is generalized to work with a variety of XHTML elements and CSS classes.

The CSS code in the pattern is interesting because it shows that CSS does have some "object-oriented" capabilities, such as subclassing and inheritance. These selectors are discussed in detail in Chapter 3.

My book contains concrete examples of each design pattern, such as the following:

<div class="section introduction">
<h2>Introduction</h2)
<p>This paragraph is about the introduction.</p>
</div>

The 300+ examples in my book are posted at my website http://cssdesignpatterns.com

There is so much more to this topic. If you are the kind of programmer that enjoys Java design patterns, you will love Pro CSS and HTML Design Patterns.
 
Raghavan Muthu
Ranch Hand
Posts: 3389
Mac MySQL Database Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thank you so much for the kind and detailed reply Michael. So sweet of you.


... The patterns show how to use XHTML structurally and semantically and how to style and layout XHTML with CSS. All the patterns use best practices, are accessible, and are valid XHTML and CSS.



Is it somehow to have a generalized template across all pages so that it will afford a single point of change and consistency across all the pages? Looks like to me so.


..The CSS code in the pattern is interesting because it shows that CSS does have some "object-oriented" capabilities, such as subclassing and inheritance.



Yes, i am aware of it based on my little experience on few CSS stuff.


My book contains concrete examples of each design pattern, such as the following:



Thank you. I could get a small glimpse of it. I am sure the complete book has a lot information in store for people like me.


...If you are the kind of programmer that enjoys Java design patterns, you will love Pro CSS and HTML Design Patterns.



Yes, you are right. I love applying some patterns to an extent possible to as to have a minimal work towards any enhancement.

Once again, a big thanks to you for having replied in detail Michael.
 
girl power ... turns out to be about a hundred watts. But they seriuosly don't like being connected to the grid. Tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic