Front end stlyes guide

0 %
100 %
Information about Front end stlyes guide

Published on February 28, 2014

Author: Micky2



Frontend Style Guide. HTML, CSS and Javascript

FrontEnd Style Guide By: Miguel Frias y Alex Osunas


Doctype Always use html5 doctype

Enconding All markup should be delivered as UTF-8, as its the most friendly for internationalization. Before HTML5 *It should be designated in both the HTTP header and the head of the document.

Prevent Compatibility Mode Sometimes IE can have a mind of its own and will switch to compatibility mode without you knowing. Include the following in the site <head> to prevent your site from defaulting to compatibility mode

Quoting Attributes The HTML5 specification defines quotes around attributes as optional. For consistency with attributes that accept whitespace, all attributes should be quoted.

Always use semantic • • • • Use actual P elements for paragraph delimiters as opposed to multiple BR tags. Make use of DL (definition lists) and BLOCKQUOTE, when appropriate. Items in list form should always be housed in a UL, OL, or DL, never a set of DIVs or Ps. Use label fields to label each form field, the for attribute should associate itself with the input field, so users can click the labels. cursor:pointer; on the label is wise, as well.

Always use semantic • • • • • Do not use the size attribute on your input fields. The size attribute is relative to the font-size of the text inside the input. Instead use css width. Place an html comment on some closing div tags to indicate what element you're closing. It will help when there is lots of nesting and indentation. Tables shouldn't be used for page layout. Use microformats and/or Microdata where appropriate, specifically hCard and adr. Make use of THEAD, TBODY, and TH tags (and Scope attribute) when appropriate.

Always use semantic Use strong instead of em, and use em instead of b

HTML5 Boilerplate


CSS Box Model Alphabetize Classes vs. IDs Naming Conventions for Selectors Specificity Shorthand Font-face Sprites Rems

Box Model

Alphabetize Order your css alphabetically

Classes vs. IDs ID for unique elements Classes for elements that can repeat over and over again.

Classes vs. IDs (continue) Instead

Naming Conventions for Selectors It is always preferable to name something, be it an ID or a class, by the nature of what it is rather than by what it looks like. For instance, a class name of bigBlueText for a special note on a page is quite meaningless if it has been changed to have a small red text color. Using a more intelligent convention such as noteText is better because when the visual style changes it still makes sense.

Naming Conventions for Selectors (continue) Instead Or even...

Specificity Specifity is the number of elements that are affected by a given rule. Specifity is evil! Avoid it!

Reduce specificity Instead

Use shorthands Always use shorthands

Use shortand (continue) Instead

Fonts If your are loading fonts, use a bullet proof code:

Use sprites CSS Sprites basically take a number of image assets and merge them together into a singular image file. Each part of it is revealed using CSS background-position.

Use sprites (continue) But please, don´t do this:

Use sprites (continue) Instead

SMACSS Base 2. Layout 3. Module 4. State 5. Theme 1.

Links 27/css-specificity-things-you-should-know/

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

The End. How To Write A Novel In 30 Days (The Cartel ...

The End. How To Write A Novel In 30 Days (The Cartel Publications Presents) [T Styles] on *FREE* shipping on qualifying offers. Learn how to ...
Read more

Window Styles Guide -

Window Styles Guide. ... Towards the end of this guide one will find some examples that are often confused as window styles and where to find the ...
Read more

SAP Front End Installation Guide - Documents

SAP Front End Installation Guide Applies to: SAP GUI 710 with BEx. For more information, visit the Standards homepage. Summary This documentation describes ...
Read more

Hairstyle - Wikipedia, the free encyclopedia

A hairstyle, hairdo, or haircut ... By the end of the 1970s the Afro had fallen out of favour among African-Americans, ... A Guide Through the American ...
Read more

SAP Front End Installation Guide - Documents

Search; Home; Documents; SAP Front End Installation Guide
Read more

Sap Front End Installation Guide - Documents

Sap Front End Installation Guide. by vvenkata-ssubrahmanyam. on Jul 07, 2015. Report Category: Documents
Read more

Adding a Custom View Style to Windows SharePoint Services

Adding a Custom View Style to Windows SharePoint Services. ... On the Start menu of the front-end Web server, click Run and then type iisreset.
Read more

About Documentation Styles - UW Writing Center

About Documentation Styles. What are documentation styles? What do I need to document? How should I gather information for documenting sources?
Read more