LAYOUT
NINJA
What is a view made OF?
HTML
USE
DOCTYPE
DON'T
<html>
<body>
</body>
</html>
DO
<!DOCTYPE html>
<html>
<body>
</body>
</html>
DEFINE
ENCODING
DON'T
<html>
<head>
</head>
</html>
DO
<html>
<head>
<meta charset="UTF-8">
</head>
</html>
Always close your tags!
DON'T
<ul>
<li> first item
<li> second item
<li> third item
</ul>
DO
<ul>
<li> first item </li>
<li> second item </li>
<li> third item <li>
</ul>
KEEP TAG NAMES
IN LOWERCASE
DON'T
<DIV>
<h1>Title</h1>
</DIV>
DO
<div>
<h1>Title</h1>
</div>
USE LISTS FOR NAVIGATION
DON'T
<div>
<a href="#">Home</a>
<a href="#">Blog</a>
</div>
DO
<ul>
<li>
<a href="#">Home</a>
</li>
</ul>
USE RELEVANT
TAGS
DON'T
<span class="heading">
<strong>Title>/strong></span>
DO
<h1>Title</h1>
AVOID
DIVITIS
DON'T
<div class="container">
<div class="wrapper">
<span>Item</span>
</div>
</div>
DO
<span>Item</span>
CSS
ALWAYS PLACE
CSS LINK IN HEAD
DON'T
<body>
<link href="reset.scss">
</body>
DO
<head>
<link href="reset.scss">
</head>
USE A CSS
RESET
DON'T
<head>
<style>
* {
margin: 0;
}
</style>
</head>
DO
<head>
<link href="reset.scss">
</head>
NEVER USE
INLINE STYLES
DON'T
<p style="color: red;">
Text
</p>
DO
<p class="alert">
Text
</p>
USE
PROPER NAMING
DON'T
<span class="RED_BOX">
Alert!
</span>
DO
<span class="alert">
Alert!
</span>
ONE DECLARATION PER LINE
DON'T
span.alert, div.alert {
color: red;
}
DO
span.alert,
div.alert {
color: red;
}
USE
SHORTHAND
DON'T
div.content {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
DO
div.content {
margin: 0;
}
DROP UNITS
FROM 0
DON'T
div.content {
margin: 0px;
}
DO
div.content {
margin: 0;
}
Resources
-
http://caniuse.com/
-
http://www.w3schools.com/
-
https://css-tricks.com/
PRACTICE
Layout Nina
By Alex Albu
Layout Nina
- 595
