Aravind Shenoy - Jumpstart UIKit: Learn to Build Enterprise-Level, Feature-Rich Websites that Work Elegantly with Minimum Fuss

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 .

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.

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 .

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.