Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account? Log In

CSS best-practices, Zohar Arad by Mind Map: CSS best-practices, Zohar Arad
5.0 stars - 1 reviews range from 0 to 5

CSS best-practices, Zohar Arad

wrap fields with block (p/div)

wrapping block has meaningful class

form_row

inside it label & input

class=label

class=field, class="text field"

see forms.css & html source example

display block

use fieldset & legend elements

grouping of fields

columns retain proportions

even on mobile

border left

.nav_item_.nav_item a

liquid/flexible layout

see flexible.css & .html example source code

supports accessibility

proportional to font size, em based, Untitled, cascading, 62.5% ~ 10px on most browsers

form design

simple gallery

html

use ul, collection of things that look & behave the same

wrapping div

class per li

css

#gallery, width & height, padding

.gallery_item, width & height, padding, float left, margin

based on CSS box model

general

override typography of main elements

will avoid browser cascading style on all

yields consistency

image replacement

purpose, text exists for semantic/SEO/accessibility purposes but we don't it to be seen, have h1 for title with text for SEO but show logo

.rep, text-indent: 1000px, overflow hidden, text-align

background image

.bg, background-image, background-repeat no-repeat

clear fix

.clr, display block, width 100%, height

navigation bars

html, nested UL & li's

css, .nav_item, float left, position relative, padding, #sub_nav, .nav_item:hover #sub_nav

see nav.css & .html example source code

CSS3

use

degrades gracefully

nice & useful visual effects, rounded corners, gradient, shaddows

best way to use

copy

slight browser differences in syntax

see combined example

css3.css

Source code

http://www.zohararad.com/demos/tricks.zip

qqq