Table Of ContentS
BOOKS FOR PROFESSIONALS BY PROFESSIONALS® h
e
n
o
y
Introducing Zurb Foundation 6
This book is your easy-to-digest brief introduction to this exciting technology for
building responsive and mobile-fi rst websites. Introducing Zurb Foundation 6,
you’ll understand the basics of the latest iteration which comes with new and
Introducing Zurb
exciting features. You will understand how to incorporate Foundation into your
HTML fi le and the various options you have, including typography, utility classes,
media, forms, buttons and much more.
Introducing Zurb Foundation 6 will jumpstart your knowledge with an easy-to-
Foundation 6
follow approach so you can come to grips with the latest version of the framework.
I
n
A downloadable code bundle is also included for you to play with, and therefore t
r
o
understand, the subtle nuances of the latest version.
d
u
c
in
g
Z
u
r
b
F
o
u
n
d —
a
t
io
n Aravind Shenoy
6
US $29.99
Shelve in:
ISBN 978-1-4842-1795-5
52999 WebDevelopment/General
User level:
Beginning
9781484217955 SOURCE CODE ONLINE
www.apress.com
www.it-ebooks.info
Introducing Zurb
Foundation 6
Aravind Shenoy
www.it-ebooks.info
Introducing Zurb Foundation 6
Copyright © 2016 by Aravind Shenoy
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part
of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations,
recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission
or information storage and retrieval, electronic adaptation, computer software, or by similar or
dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are
brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for
the purpose of being entered and executed on a computer system, for exclusive use by the purchaser
of the work. Duplication of this publication or parts thereof is permitted only under the provisions
of the Copyright Law of the Publisher's location, in its current version, and permission for use must
always be obtained from Springer. Permissions for use may be obtained through RightsLink at the
Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law.
ISBN-13 (pbk): 978-1-4842-1795-5
ISBN-13 (electronic): 978-1-4842-1796-2
Trademarked names, logos, and images may appear in this book. Rather than use a trademark
symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and
images only in an editorial fashion and to the benefit of the trademark owner, with no intention of
infringement of the trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they
are not identified as such, is not to be taken as an expression of opinion as to whether or not they are
subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of
publication, neither the authors nor the editors nor the publisher can accept any legal responsibility
for any errors or omissions that may be made. The publisher makes no warranty, express or implied,
with respect to the material contained herein.
Managing Director: Welmoed Spahr
Lead Editor: Louise Corrigan
Development Editor: Jim Markham
Technical Reviewer: Ian Devlin
Editorial Board: Steve Anglin, Pramila Balen, Louise Corrigan, Jim DeWolf,
Jonathan Gennick, Robert Hutchinson, Celestin Suresh John, Michelle Lowman,
James Markham, Susan McDermott, Matthew Moodie, Jeffrey Pepper, Douglas Pundick,
Ben Renow-Clarke, Gwenan Spearing
Coordinating Editor: Jill Balzano
Copy Editor: April Rondeau
Compositor: SPi Global
Indexer: SPi Global
Artist: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail
[email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC
and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc).
SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional
use. eBook versions and licenses are also available for most titles. For more information, reference
our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this text is available to
readers at www.apress.com. For detailed information about how to locate your book’s source code,
go to www.apress.com/source-code/.
www.it-ebooks.info
First and foremost, I would like to thank my mother Vatsala for standing
beside me throughout my career and while writing this book. She has been my
inspiration and motivation. She is my rock, and I dedicate this book to her.
www.it-ebooks.info
Contents at a Glance
About the Author ������������������������������������������������������������������������������xi
About the Technical Reviewer ��������������������������������������������������������xiii
Acknowledgments ���������������������������������������������������������������������������xv
Introduction �����������������������������������������������������������������������������������xvii
■ Chapter 1: Quick Start with Foundation �����������������������������������������1
■ Chapter 2: Grid System and Utility Classes ������������������������������������9
■ Chapter 3: Typography, Navigation, and Media Attributes �����������29
■ Chapter 4: CSS Components ���������������������������������������������������������49
■ Chapter 5: JavaScript Components ����������������������������������������������83
■ Chapter 6: Intro to Foundation with Sass �����������������������������������107
■ Chapter 7: Foundation Hub ���������������������������������������������������������119
Index ����������������������������������������������������������������������������������������������127
v
www.it-ebooks.info
Contents
About the Author ������������������������������������������������������������������������������xi
About the Technical Reviewer ��������������������������������������������������������xiii
Acknowledgments ���������������������������������������������������������������������������xv
Introduction �����������������������������������������������������������������������������������xvii
■ Chapter 1: Quick Start with Foundation �����������������������������������������1
Responsive Web Design and CSS Frameworks ���������������������������������������1
Getting Started with Foundation 6 ����������������������������������������������������������2
Summary �������������������������������������������������������������������������������������������������7
■ Chapter 2: Grid System and Utility Classes ������������������������������������9
Set the Base Correctly with Foundation ������������������������������������������������10
Understanding the Grid Layout ��������������������������������������������������������������11
Responsiveness in Foundation �������������������������������������������������������������������������������12
Adding Custom Width for the Small and
Large Screen Resolutions ���������������������������������������������������������������������������������������15
Nested Columns �����������������������������������������������������������������������������������������������������16
Offsets ��������������������������������������������������������������������������������������������������������������������17
Block Grids �������������������������������������������������������������������������������������������������������������18
Visibility Classes �����������������������������������������������������������������������������������������������������20
Utility Classes ���������������������������������������������������������������������������������������������������������22
Summary �����������������������������������������������������������������������������������������������27
vii
www.it-ebooks.info
■ Contents
■ Chapter 3: Typography, Navigation, and Media Attributes �����������29
Typography ��������������������������������������������������������������������������������������������29
Navigation ���������������������������������������������������������������������������������������������30
Menu Component ���������������������������������������������������������������������������������������������������31
Dropdown Menu �����������������������������������������������������������������������������������������������������34
Top Bar��������������������������������������������������������������������������������������������������������������������36
Breadcrumbs ����������������������������������������������������������������������������������������������������������39
Media Components �������������������������������������������������������������������������������40
Slick Carousel ���������������������������������������������������������������������������������������������������������40
Thumbnail ���������������������������������������������������������������������������������������������������������������44
Flex–Video ��������������������������������������������������������������������������������������������������������������45
Labels ���������������������������������������������������������������������������������������������������������������������46
Badges ��������������������������������������������������������������������������������������������������������������������47
Summary �����������������������������������������������������������������������������������������������48
■ Chapter 4: CSS Components ���������������������������������������������������������49
Buttons ��������������������������������������������������������������������������������������������������49
Button with contextual colors ���������������������������������������������������������������������������������50
Buttons with Hollow style ���������������������������������������������������������������������������������������51
Button Sizes ������������������������������������������������������������������������������������������������������������52
Button Groups ���������������������������������������������������������������������������������������������������������53
Tables ����������������������������������������������������������������������������������������������������59
Progress bars ����������������������������������������������������������������������������������������62
Callout Panels ����������������������������������������������������������������������������������������63
Range Sliders ����������������������������������������������������������������������������������������66
viii
www.it-ebooks.info
■ Contents
Switches ������������������������������������������������������������������������������������������������68
Checkbox switches �������������������������������������������������������������������������������������������������68
Radio Switches �������������������������������������������������������������������������������������������������������70
Forms ����������������������������������������������������������������������������������������������������72
Summary �����������������������������������������������������������������������������������������������81
■ Chapter 5: JavaScript Components ����������������������������������������������83
Tabs �������������������������������������������������������������������������������������������������������84
Accordions���������������������������������������������������������������������������������������������87
Dropdowns ��������������������������������������������������������������������������������������������90
Data-Interchange ����������������������������������������������������������������������������������92
Equalizers ����������������������������������������������������������������������������������������������94
Modals ���������������������������������������������������������������������������������������������������98
ToolTips �����������������������������������������������������������������������������������������������102
Data-Toggler ����������������������������������������������������������������������������������������104
Summary ���������������������������������������������������������������������������������������������105
■ Chapter 6: Intro to Foundation with Sass �����������������������������������107
Getting started with Foundation with SaaS �����������������������������������������107
Summary ���������������������������������������������������������������������������������������������118
■ Chapter 7: Foundation Hub ���������������������������������������������������������119
Foundation HTML Templates and Themes �������������������������������������������119
Building Blocks ������������������������������������������������������������������������������������120
Resources��������������������������������������������������������������������������������������������124
Panini ��������������������������������������������������������������������������������������������������124
ix
www.it-ebooks.info
■ Contents
Motion UI ���������������������������������������������������������������������������������������������125
Foundation Forums and Support ���������������������������������������������������������125
Foundation for Apps ����������������������������������������������������������������������������125
Envoi ����������������������������������������������������������������������������������������������������125
Index ����������������������������������������������������������������������������������������������127
x
www.it-ebooks.info
About the Author
Aravid Shenoy is a senior technical writer by profession.
Aravind’s core interests are technical and content
writing, content development, web design, and business
analysis. An engineering graduate from the Manipal
Institute of Technology and an author of several books,
he is a keen learner and believes that there is always a
steep learning curve as life is all about learning.
He was born and raised in Mumbai and resides there.
A music buff - he loves listening to Rock n’ Roll and
Rap. Oasis, R.E.M, The Doors, Dire Straits, Coldplay,
Jimi Hendrix and Michael Jackson rule his playlists. He is
a firm believer in the quote “Do one thing and do it very
well indeed” and in his own words “The most important
thing is to be happy.”
xi
www.it-ebooks.info
Description:Introduction to Zurb Foundation 6 is your easy-to-digest brief introduction to this exciting technology for building responsive and mobile-first websites. Using this book, you'll understand the basics of the latest iteration which comes with new and exciting features. You will understand how to inco