Testing HTML elements is a web designer must

Let’s say you’ve got a brand new HTML template you’ve just chopped up from a Photoshop document. You’ve styled the body content’s footer, headers, paragraphs, and maybe some pseudo lipsum text that match the Photoshop document. But when you hand it off to a developer to integrate into a content management system, is it ready for all the variable content HTML has to offer?

There’s one way to be sure templates are up to the snuff, and that’s making sure you’ve tested as many basic HTML elements that can be fit into  editable content regions. HTML5 Boilerplate is a “professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site” and gives quite a few documents for HTML designers to work with when building templates.

One of the files HTML5 Boilerplate provides is a demo HTML page of various HTML elements including: form labels and inputs, paragraphs and headings, tables, strong and em, captions, lists, and much more.

I’ve stripped down the demo page HTML5 Boilerplate provides down to just the elements and none of the head, body, and other stuff. You can view the DEMO PAGE or download it below.
Be sure to leave the commented credit to HTML5 Boilerplate where credit is due.

VIEW THE ELEMENTS TESTING TEMPLATE (13kb)

DOWNLOAD THE TEMPLATE (4kb)

Downloaded 285 times.

Screenshots:

The free SharePoint theme is designed with one thing in mind, simplicity. It strips out most of the default SharePoint background images in favor for solid colors. The three main colors used is vivid definable red, soft light brown, and soft medium brown.

The theme comes with 8 files:

• LAYOUTS/
  • 1033/
    • STYLES/
      • visionary/
        • globaltitlearea.gif
        • logo.png
        • navshape.jpg
        • topnav.gif
        • topnavhover.gif
      • visionary.css
    • SPTHEMES.XML
• THEMES/
  • VISIONARY/
    • theme.css
    • VISIONARY.INF

The Visionary Free SharePoint theme is a hybrid theme and utilizes file placement out of the normal SharePoint theme folder. SharePoint uses an internal caching of CSS and image files when a theme is activated on a site. If for example you wanted to update the theme’s font color, text size, or background image normally you would have to reset the Internet Information Service and reapply the theme.

With the hybrid, the CSS and background images are loaded through CSS imports from the LAYOUTS folder. Ultimately if you were to make a change the site, it would update as expected; with a simple refresh.

It’s an additional step, but if you’re like me and apply the theme to multiple sites at a time… you’re saving yourself headache and time by using a hybrid.

Installation Instructions:

1. Copy the “THEMES/VISIONARY” folder to “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\VISIONARY”
2. Copy the “LAYOUTS/1033/SPTHEMES.XML” to “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033″
3. copy both the “LAYOUTS/1033/STYLES/visionary.css” and “LAYOUTS/1033/STYLES/visionary/” to “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES”
4. In your SharePoint site, apply the theme by going to “Site Actions -> Site Settings -> Modify All Site Settings-> Look and Feel -> Site Theme” and select the “Visionary” theme at the bottom, and click “Apply”.

Download Free Visionary SharePoint Theme for MOSS 2007 (9.32kb)
Downloaded 756 times.

The template is tailored towards a company providing a service such as hosting. The logo is raw text inside of an H1 tag and can be changed. The layout uses a fixed width of 950px, but the design can be adapted to any fixed width size. It was created to be fluid, however, the coda slider doesn’t support a CSS width percentage.

The theme comes with 2 HTML files

• index.html
• examples.html

The index.html is the screenshot you see above, while examples.html has numerous predefined styles showcased. The predefined styles range from alerts, dialogs, lists, and emphasis blocks.

Other features:

• To navigation list items have example background (aka, perfect rounded corners no matter how big)
• Rounded outer container (adjusts to users width preference)
• Text-based logo and slogan
• jQuery Coda Slider (click Solution by industry for example)
• Valid XHTML 1.0 Strict
• Valid CSS 2.1
• Works in every major browser (Firefox 2+3, IE 7, 8, Safari, Opera, Chrome)

Download BlueEarth 001 Free XHTML / CSS Template
Downloaded 534 times.