Академический Документы
Профессиональный Документы
Культура Документы
SOME METADATA
Women Who
"2
I AM...
Melanie Archer, @mejarc! a
front-end Web developer (the HTML/CSS/JavaScript person)! employee of Sungevity, Inc., bringing affordable solar power to the people one home at a time
an
"3
visual or interaction designer wanting to make Web prototypes in markup! back-end developer who learned a little about CSS, not really enough to make your life easier! CSS pro! A stylesheet guru! And youre sick of re-inventing the wheel
"4
ASSUMPTIONS
Youve Youve
"5
GitHub!
"6
collection of prefab stylesheets, HTML, and even JavaScript les that apply a set design to your Web page! provide ornate visual styles (a blog theme), or utilitarian ones (jQuery UI)
can
"7
people with varying levels of CSS skill work on the same templates! in browsers/usage situations you might not have access to, such as mobile
Tested
"8
framework requires that you put certain class names on HTML elements! like: LEGO blocks. Youre given blocks of a certain size to construct your page
Its
"9
WHATS FOUNDATION?
1. a package of CSS, JavaScript, and image les created by ZURB ! 2. a quick way to create a exible layout for a Web page, using the principles of responsive design !
! !
"10
WHOS ZURB?*
! ! ! ! !
A team of T-shaped interaction designers and design strategists who help grow businesses
"12
What were building: a twocolumn layout. Header, footer, side menu, main content area.!
"13
OUR TOOLS
A Web browser, such as Chrome, Firefox,
Safari...even Internet Explorer!
"14
to http://cupcakeipsum.com/!
Generate
content for your page: 3-5 paragraphs! the content to a new text le in your favorite text editor
Copy
"15
INSTALL FOUNDATION
Go
to where youve placed the Foundation download! it there, or move the archive to your working folder! the archive
"16
Keep
Unzip
HTML
!
index.html! javascripts! robots.txt! stylesheets
"17
your Web browser, open index.html! out all this helpful default content
check
"18
"19
"20
your editing software, open index.html! three rows inside div.container to correspond to the Header, Main Content Area, and Footer! your changes
"21
Add
Save
What
"22
your editing software, open index.html! one div with the class values twelve columns inside the rst div.row! & paste a paragraph from your content le into this div
"23
Add
Cut
add 2 divs inside the next div.row! one div the class values of eight columns. Give the next div the class values of four columns! divs and paste content into these
Give
Cut
"24
your editing software, open index.html! one div with the class values twelve columns inside the last div.row! & paste a paragraph from your content le into this div
"25
Add
Cut
What
"26
BREAK SOMETHING
Change the class name on one of the HTML elements. For
example: <div class=Row>, or <div class=for columns>! What changed?
"27
FIX IT
"28
ET VOIL!
Heres your layout!
"29
Add Do
"30
Boilerplate!
Other
"31
THANKS
Sasha
Michael
"32
FURTHER READING
Foundation Docs! foundation.zurb.com/docs/! W3C Web Standards Curriculum: CSS! www.w3.org/wiki/Web_Standards_Curriculum#CSS! Design By Grid: yet more CSS frameworks for layout! www.designbygrid.com! Dev Opera: Grid Design Basics! tinyurl.com/grid-design-basics! InstaCSS: search for CSS properties! instacss.com! Responsive Web Design, by Ethan Marcotte! http://www.alistapart.com/articles/responsive-web-design/! Beginners Guide to Responsive Web Design! thinkvitamin.com/design/beginners-guide-to-responsive-web-design/
"33