• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

HTML Desgin Patterns & JS

 
Amit Arora
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi

I have never heard about the design patterns in HTML. Will this book provide some information on that?

Will this book provide information on advanced JS. Like how to use it to make your UI more attractive?
 
Mike Bowers
Author
Ranch Hand
Posts: 42
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What is "Pro CSS and HTML Design Patterns"?

It is CSS book written for developers. It is full of patterns you can use to code web pages. Each pattern is a building block that you can combine with other patterns to create web pages.

By using these patterns, you will dramatically increase your productivity, your web pages will work reliably in all major browsers, and you will be following the best practices because you will be creating XHTML that is semantic and structural and using CSS to create styles and layouts.

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 of my book.

<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>

*.section.introduction { padding:10px; }
*.section.introduction p { margin-top:5px; }
*.section.introduction h2 { margin-bottom:10px; }
*.section.introduction { background-color:gold }
*.section.introduction *.section { margin-bottom:0; }

The 300+ examples in my book are posted at my website http://cssdesignpatterns.com
 
Mike Bowers
Author
Ranch Hand
Posts: 42
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Does "Pro CSS and HTML Design Patterns" cover JavaScript?

Pro CSS and HTML Design Patterns does not teach JavaScript and it is not about JavaScript, but it does contain a few design patterns that use JavaScript. The purpose of these patterns is to show best practices for using JavaScript to style XHTML using CSS.

One best practice for using JavaScript with CSS is to use JavaScript to modify the class attributes of an element to dynamically change how the element is styled. This is the best way for JavaScript to modify the style of an element: CSS defines the style through a class and JavaScript dynamically assigns classes to elements.

As a complement to the best practice of using JavaScript to modify only the class attributes of elements, my book advocates selecting XHTML elements in JavaScript using the CSS selector syntax. This approach allows you to use the same CSS selectors to select elements in CSS and in JavaScript. Using the same selector syntax makes CSS and JavaScript code more intuitive and more maintainable. You have to read Chapter 17 of my book to see how cool this is.

To select elements in JavaScript using CSS selector syntax, you need a JavaScript library. I provide just such a library in my book. It is modular and extensible, and it makes it easy to dynamically style elements using this technique.

Lastly, I show you in the book how to use JavaScript without inserting a single line of JavaScript into the body of an HTML document! This is really cool stuff and makes for a very clean separation of design (CSS), structure (XHTML), and interaction (JavaScript)!
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65128
92
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by Mike Bowers:
Lastly, I show you in the book how to use JavaScript without inserting a single line of JavaScript into the body of an HTML document!

Indeed -- this is an increasingly popular methodology becoming known as Unobtrusive JavaScript. Libraries such as jQuery strongly recommend adhering to this principle.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic