Aravind Shenoy
Jumpstart UIKit
Learn to Build Enterprise-Level, Feature-Rich Websites that Work Elegantly with Minimum Fuss
1st ed.
Aravind Shenoy
Mumbai, Maharashtra, India
Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the books product page, located at www.apress.com/9781484260289 . For more detailed information, please visit http://www.apress.com/source-code .
ISBN 978-1-4842-6028-9 e-ISBN 978-1-4842-6029-6
https://doi.org/10.1007/978-1-4842-6029-6
Aravind Shenoy 2020
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.
The use of general descriptive names, registered names, trademarks, service marks, etc. in this publication does not imply, even in the absence of a specific statement, that such names are exempt from the relevant protective laws and regulations and therefore free for general use.
The publisher, the authors and the editors are safe to assume that the advice and information in this book are believed to be true and accurate at the date of publication. Neither the publisher nor the authors or the editors give a warranty, expressed or implied, with respect to the material contained herein or for any errors or omissions that may have been made. The publisher remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, New York, NY 10004. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail orders-ny@springer-sbm.com, 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.
I dedicate this book to my uncleRamanath N. Kamath, who has been my rock since childhood. Also, heartfelt gratitude toProfessor Dange, an ex-IIT mentor, who guided me on the Theory of Machines and laid a solid foundation for my perception about engineering and technology 20 years ago.
Acknowledgments
I would like to thank the entire team at Apress, including Louise; Nancy; Jim; and specifically the technical reviewer,Anselm Bradford, for their exemplary work on this 12th book of mine. It has indeed been awesome collaborating with them on this book, and their efforts mean a lot when it comes to making this book a success.
A special thanks to my sister Aruna, too, remembering our childhood times, and for tolerating my idiosyncrasies while growing up.
Table of Contents
About the Author
Aravind Shenoy
A senior content writer by profession, Aravind Shenoys core interests are technical writing, content writing, content development, web design, and business analysis. He was born and raised in Mumbai and currently 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, 3 Doors Down, Chemical Brothers, U2, Guns n Roses, and Michael Jackson rule his playlists. 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. In summary, as he quips, The most important thing is to be happy - its all that matters. After all, we are here for a good time, not a long time.
About the Technical Reviewer
Anselm Bradford
is a front-end web developer passionate about open source projects for government, nonprofits, and higher education.
Currently, he is developing tools to help protect consumers from misleading and illegal financial practices. He has experience working on social services discovery for Code for America, user research at Imgur, and digital media curriculum development at Auckland University of Technology.
Anselm is the lead author on the book HTML5 Mastery (Apress, 2011).
Aravind Shenoy 2020
A. Shenoy Jumpstart UIKit https://doi.org/10.1007/978-1-4842-6029-6_1
1. QuickStart UIkit
Aravind Shenoy
(1)
Mumbai, Maharashtra, India
UIkit is a lightweight web design framework with modular components that help you rapidly design robust user interfaces. It comes with a slew of ready-to-use elements like cards, buttons, and navigation helpers among other power-packed utilities to build clean and fully functional web pages. Responsive by default, it removes the guesswork out of developing mobile-friendly layouts in a minimalistic way. The set of tools that is ingrained in this front-end framework is quite simple to use, customize, and extend. It enables you to create consistent feature-rich sites, without the bloat or clutter associated with popular heavyweight frameworks like Bootstrap and Foundation.
Before we take our first steps in UIkit , lets look at the evolution of responsive web design .
Evolution of Responsive Web Design
Web design initially started with sites built for a screen size. As a result, the output resulted in web pages optimized for that device/screen size only. When the resulting output was viewed on smaller or wider screens, it looked inappropriate in terms of readability, aesthetics, and usability. The layout showed congested content on smaller screens and excessive whitespace on larger screens. This led to a shabby user experience when designers attempted to present more information on the web page.
Apart from a fixed width, the other alternative approach during that era was liquid design wherein the web pages would flow and stretch depending on the browser space. However, designers had to compromise on aesthetics due to the irregular display of content and excessive whitespace. In addition, this caused usability issues. More so, the elastic nature of the output made designing quite difficult. The guesswork resulted in designers performing innumerable testing procedures just to get the basic view right.
With the massive technological advances in mobile phones, more users started using the mobile platform . Then a new trend began with web designers creating two sites: one for the desktop and the other for the mobile phone with different URLs (read Web Addresses ). Multiple sites caused usability issues as end users expected the mobile platform to display all the attributes and features found in the desktop version of the site.