Jump Start Foundation

130 Pages·2015·6.401 MB·English

by  Syed Fazle Rahman, Joe Hewitson

ALL SOURCE CODE AVAILABLE FOR DOWNLOAD
GET A JUMP START ON BUILDING
APPLICATIONS WITH FOUNDATION TODAY!
JUMP START
F
Developed by Zurb, Foundation is a hugely popular CSS framework
YOUR AUTHORS O
that’s making the once-arduous process of crafting responsive
U
FOUNDATION
web designs a breeze! Foundation was the first open-source
SYED N
front end framework to be responsive, the first to be semantic,
D
FAZLE
as well as the first to take a mobile first approach. Read this A
RAHMAN
book and discover why Foundation is fast becoming a favorite T
tool of top web designers. Syed Fazle Rahman is a passionate IO
web developer and technical writer BY SYED FAZLE RAHMAN
from India. He is the co-founder of N
devmag.io, a community for software
What’s inside? developers to hang out and talk JOE HEWITSON
about programming. Syed is also the
author of the book Jump Start
• Install Foundation and set up your projects Bootstrap, published by SitePoint.
When not programming, Syed can be
• Master Foundation’s grid system: create responsive, mobile first found reading books and playing
games. J
layouts that work on any device
U
JOE
• Use Foundation’s components to easily add responsive features M
HEWITSON
like panels, navigation, and forms to your sites P

• Add interactivity without writing a line of JavaScript S
Growing up with a love for coding,
Joe delights in staying on the cutting T
• Customize Foundation with Sass to create unique designs
edge of software development, A
especially web technology. This has
• See how Foundation compares with other front-end frameworks lead him to professional success R
ranging from the creation of web
based, healthcare applications to T
And much more… dynamic CMS frameworks. He
spends much of his free time F
exploring new web technologies and O
sharing the knowledge he’s gained
with those kind enough to listen. U
N
D
WEB DEVELOPMENT
A
PRINT ISBN: 978-0-9924612-7-0
SITEPOINT BOOKS
EBOOK ISBN: 978-0-9943469-0-2 T
Advocate best practice techniques I
O
Lead you through practical examples
N
Provide working code for your website
Make learning easy and fun
HR
EA
WH GET UP TO SPEED WITH FOUNDATION IN A WEEKEND
USD29.95 CAD $34.95 ITSMA
Visit us on the Web at sitepoint.com or for sales and support email [email protected] ONN &

Safety Area: All Text, Logos & Barcode should remain inside the Pink Dotted Lines
www.it-ebooks.info
Bleed Area: All Backgrounds should extend to, but not past, the Blue Dotted Lines
Summary of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
1. Building a Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2. Getting Started With Foundation's Grid System . . . . . . . . . . . . . . . . . . . . . . 13
3. Laying Out a Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
4. Content Is King . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
5. Handling Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
6. Working With Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
7. Customizing Foundation Using Sass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
www.it-ebooks.info
www.it-ebooks.info
JUMP START
FOUNDATION
BY SYED FAZLE RAHMAN
& JOE HEWITSON
www.it-ebooks.info
iv
Jump Start Foundation
bySyedFazleRahmanandJoeHewitson
Copyright©2015SitePointPty.Ltd.
Product Manager:SimonMackie English Editor:KellySteele
Technical Reviewer:RyanReese Cover Designer:AlexWalker
Notice of Rights
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystemortransmitted
inanyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecase
ofbriefquotationsembodiedincriticalarticlesorreviews.
Notice of Liability
Theauthorandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.
However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimplied.
NeithertheauthorsandSitePointPty.Ltd.,noritsdealersordistributorswillbeheldliableforany
damagestobecausedeitherdirectlyorindirectlybytheinstructionscontainedinthisbook,orbythe
softwareorhardwareproductsdescribedherein.
Trademark Notice
Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonly
inaneditorialfashionandtothebenefitofthetrademarkownerwithnointentionofinfringementof
thetrademark.
PublishedbySitePointPty.Ltd.
48CambridgeStreetCollingwood
VICAustralia3066
Web:www.sitepoint.com
Email:[email protected]
ISBN978-0-9924612-7-0(print)
ISBN978-0-9943469-0-2(ebook)
PrintedandboundintheUnitedStatesofAmerica
www.it-ebooks.info
v
About Syed Fazle Rahman
SyedFazleRahmanisapassionatewebdeveloperandtechnicalwriterfromIndia.Heisthe
co-founderofdevmag.io,acommunityforsoftwaredeveloperstohangoutandtalkabout
programming.SyedisalsotheauthorofthebookJumpStartBootstrap1,publishedbySite-
Point.Whennotprogramming,Syedcanbefoundreadingbooksandplayinggames.
About Joe Hewitson
Growingupwithaloveforcoding,Joedelightsinstayingonthecuttingedgeofsoftware
development,especiallywebtechnology.Thishasledhimtoprofessionalsuccessranging
fromthecreationofwebbased,healthcareapplicationstodynamicCMSframeworks.He
spendsmuchofhisfreetimeexploringnewwebtechnologiesandsharingtheknowledge
he'sgainedwiththosekindenoughtolisten.
About SitePoint
SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforweb
professionals.Visithttp://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,
andcommunityforums.You’llfindastackofinformationonJavaScript,PHP,Ruby,mobile
development,design,andmore.
1http://www.sitepoint.com/store/jump-start-bootstrap/
www.it-ebooks.info
www.it-ebooks.info
Tomylovelyparents,troublesome
brother,cutesister,andmybest
buddy,Sandeep.
—Syed
Toallthosestillhungryfor
knowledge,maythisbookonly
whetyourappetite.
—Joe
www.it-ebooks.info
www.it-ebooks.info
Table of Contents
Preface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Want to take your learning further? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Chapter 1 Building a Foundation . . . . . . . . . . . . . . . . . . 1
Introduction to CSS Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Becoming Acquainted with Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Setting up a Foundation Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Chapter 2 Getting Started With Foundation's
Grid System
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Laying the Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Setting up a Foundation Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Getting Our Hands Dirty with the Grid System . . . . . . . . . . . . . . . . . . . . . 19
Offsets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Foundation’s Responsive Nature . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Chapter 3 Laying Out a Prototype . . . . . . . . . . . . . . . . 29
The Importance of a Good Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Building a Basic Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
www.it-ebooks.info