Front end stlyes guide
-
Upload
miguel-frias -
Category
Technology
-
view
175 -
download
0
description
Transcript of Front end stlyes guide
![Page 1: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/1.jpg)
FrontEnd Style GuideBy: Miguel Frias y Alex Osunas
![Page 2: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/2.jpg)
HTML
![Page 3: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/3.jpg)
Doctype
Always use html5 doctype
![Page 4: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/4.jpg)
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.
Enconding
![Page 5: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/5.jpg)
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
![Page 6: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/6.jpg)
Quoting Attributes
The HTML5 specification defines quotes around attributes as optional. For consistency with attributes that accept whitespace, all attributes should be quoted.
![Page 7: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/7.jpg)
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.
![Page 8: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/8.jpg)
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.
![Page 9: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/9.jpg)
Always use semantic
Use strong instead of em, and use em instead of b
![Page 10: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/10.jpg)
HTML5 Boilerplate
![Page 11: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/11.jpg)
CSS
![Page 12: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/12.jpg)
CSS Box Model
Alphabetize
Classes vs. IDs
Naming Conventions for Selectors
Specificity
Shorthand
Font-face
Sprites
Rems
![Page 13: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/13.jpg)
Box Model
![Page 14: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/14.jpg)
Alphabetize
Order your css alphabetically
![Page 15: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/15.jpg)
ID for unique elements
Classes for elements that can repeat over and over again.
Classes vs. IDs
![Page 16: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/16.jpg)
Instead
Classes vs. IDs (continue)
![Page 17: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/17.jpg)
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
![Page 18: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/18.jpg)
Instead
Naming Conventions for Selectors (continue)
Or even...
![Page 19: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/19.jpg)
Specifity is the number of elements that are affected by a given rule.
Specifity is evil! Avoid it!
Specificity
![Page 20: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/20.jpg)
Instead
Reduce specificity
![Page 21: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/21.jpg)
Use shorthands
Always use shorthands
![Page 22: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/22.jpg)
Use shortand (continue)
Instead
![Page 23: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/23.jpg)
If your are loading fonts, use a bullet proof code: http://www.fontsquirrel.com/tools/webfont-generator
Fonts
![Page 24: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/24.jpg)
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
![Page 25: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/25.jpg)
Use sprites (continue)
But please, don´t do this:
![Page 26: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/26.jpg)
Use sprites (continue)
Instead
![Page 27: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/27.jpg)
SMACSS
1. Base2. Layout3. Module4. State5. Theme
![Page 28: Front end stlyes guide](https://reader031.fdocuments.us/reader031/viewer/2022013011/558fc96c1a28ab6f198b4618/html5/thumbnails/28.jpg)
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/
Links