S 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 Introducing Zurb Foundation 6 Aravind Shenoy 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/. 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. 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 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 ■ 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 ■ 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 ■ Contents Motion UI ���������������������������������������������������������������������������������������������125 Foundation Forums and Support ���������������������������������������������������������125 Foundation for Apps ����������������������������������������������������������������������������125 Envoi ����������������������������������������������������������������������������������������������������125 Index ����������������������������������������������������������������������������������������������127 x 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
Description: