Published on February 28, 2014
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
CSS Box Model Alphabetize Classes vs. IDs Naming Conventions for Selectors Specificity Shorthand Font-face Sprites Rems
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: http://www.fontsquirrel.com/tools/webfont-generator
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 http://isobar-idev.github.io/code-standards/ http://24ways.org/2011/front-end-style-guides/ http://smacss.com/ http://html5boilerplate.com/ http://www.youtube.com/watch?v=c-kav7Tf834 http://coding.smashingmagazine.com/2007/07/ 27/css-specificity-things-you-should-know/
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...
The End. How To Write A Novel In 30 Days (The Cartel Publications Presents) [T Styles] on Amazon.com. *FREE* shipping on qualifying offers. Learn how to ...
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 ...
SAP Front End Installation Guide Applies to: SAP GUI 710 with BEx. For more information, visit the Standards homepage. Summary This documentation describes ...
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 ...
Search; Home; Documents; SAP Front End Installation Guide
Sap Front End Installation Guide. by vvenkata-ssubrahmanyam. on Jul 07, 2015. Report Category: Documents
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.
About Documentation Styles. What are documentation styles? What do I need to document? How should I gather information for documenting sources?