Poco

Raramente

 

Nel punto giusto

 
(Michel Pistor, fondatore della Mesoterapia)

CORSO BASE E MASTER DI MESOTERAPIA

Sabato e Domenica 5-6 Settembre 2015

a Darfo Boario Terme (BS)

Hotel Brescia Via Zanardelli 

Why?

Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We've been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for our best practices to catch up, and we thought we'd put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it's a good starting place that anyone can make their own.

About Version 2

A before and after view of the file structure.

The biggest change is to our stylesheets. We've been using the browser-specific style sheets less and less often in our work so we eliminated them, which saves us the overhead of additional downloads. In their place we're now using Paul Irish's conditional comments technique to add IE-specific classes to the HTML tag — creating IE-specific styles is now as easy as .ie body { IE styles go here }.

In the same spirit, we've also moved our print styles into the main stylesheet and added a mobile/small display style block (including blocks for orientation). The end result is a faster-downloading page.

Also in the sprirt of simplifiction, we've eliminated the "Bare Bones" version and are now only offering one set of fully-commented files. (We assume everyone is tweaking the files for their own use anyway, so go ahead and strip the comments out at your leisure!)

Finally, and sigificantly, we're hosting the files on GitHub (yay!) for better issue and version tracking.

The WordPress Theme

The HTML5 Reset WordPress Theme Poster

With the assistance of Digging Into WordPress and their BLANK WordPress Theme, we're excited to present the HTML5 Reset WordPress Theme — a style-free theme designed to help get your custom WordPress project off the ground. The theme includes:

  1. Semantic HTML5 markup
  2. Starter CSS declarations for the basic WordPress elements
  3. A widget-ready sidebar
  4. jQuery, Modernizr and Analytics built in

Oh — and we've gone ahead and made the single post pages conform to the hNews Microformat, for better integration with services like Google News and Readability.

The theme is brand new, and probably not fully baked yet; we hope you've got ideas for making it better and help us build a best-of-breed starting point for any WordPress developer. Talk to us on GitHub.

The Code

What's in the package is a folder structure representing an embryo of a web site. (What's in the WordPress package is an embyro of a WordPress Theme.)

There is an HTML file that contains a rudimentary HTML5 document structure, with all the everyday stuff like title, header, footer, etc. It uses conditional comments to add IE-specific classes to the html tag, and calls in some popular JavaScript tools like jQuery and Modernizr. We've also included the standard Google Analytics snippet — have you ever launched a site, then scrambled because you forgot to stick this in? We have, but no more!

All supporting files are stored in a parent “_” folder, which keeps the view in our file manager uncluttered. We could call it something like “assets,” but we prefer to give it a name that ensures it stays at the top of the list, no matter what editor we're using. (Oddly, Transmit puts folders at the top but Coda doesn't.)

In the style.css file are styles designed to reduce the visual output in any browser to its most basic state. This frees you from the annoyance of overcoming the native styling that each browser wants to apply to HTML elements such as h1, p, and ul. From this starting point it's very easy to establish your own standards for type size, margins, and other measurements.

There are also a lot of other goodies like fixes for IE (image resizing and flickering), a .clickable class, some fun things for Mobile Safari, et cetera, et cetera. Make sure to read through all the comments!

Download the Templates — Now on GitHub!

TITOLO

Testo Testo Link to keep on top of updates and new releases.

TITOLO

Testo Testo Link to keep on top of updates and new releases.

TITOLO

Testo Link.

TITOLO

Testo Link.

TITOLO

Testo Link.

TITOLO

Testo Link.