It was only a few years ago that HTML tables were being used heavily for web page layout. Tables have rows and columns; they can stretch vertically and horizontally; rows and columns can be combined into larger spaces. In short, HTML tables made it possible to lay out content on web pages using an underlying grid.
Then along came CSS. Tables were confining, bloated, and did not separate content from presentation, the CSS advocates argued. Style sheets were separate from content. They freed the designer to place content anywhere they wanted on a web page. See the Zen Garden website, http://www.csszengarden.com, for a demonstration of how CSS can be used to present the same content in different ways.
Proponents of tables argued that tables were simpler and more predictable than CSS. If you wanted structure on your website, and if you appreciated an underlying grid, it was hard to give up tables. And for all the advantages of using CSS to place content on a web page, it was often used to fix content in place, assuming that all websites would be displayed on a typical computer display (laptop or desktop).
Take a look at the Zen Garden website again, this time from your mobile phone or a very narrow browser view. Most of the views are fixed. Those views were not designed for small devices. Either a page is so compressed that you cannot ready it or you have to scroll horizontally and vertically to see a page.
How do web designers address this dilemma? The natural inclination is to design and maintain two websites, one for regular displays and one for small devices. Many organizations have done exactly that. The .mobi top-level domain was created to give companies an opportunity to make it clear that they were delivering content specifically for mobile devices.
Today there are toolkits that make it easier to design websites using an underlying grid structure using CSS and make those sites adaptable to mobile, desktop, and other displays. Now we have the benefits of a grid layout with all the capability of CSS, the best of both worlds. Zurb Foundation is one—some would argue the best—of those toolkits.
Welcome to Foundation, an amazing toolkit that helps you architect, design, and develop your website. You get a grid system, numerous CSS components and JavaScript plugins, and you have style sheets coded in SASS to ease design and customization.
Chapter 1, Get the Most from the Grid System, explains the Foundation grid system, introduces various grid features included in Foundation, shows by example how to apply layout techniques, and offers tips to deal with special cases.
We'll discover how to work with cells, rows, and columns. We'll look at nesting rows in columns. We'll learn about gutters, page width, and row height. We'll see how to apply the grid to small and large devices, use built-in styles to tweak your layout, and also learn what to expect when you put images in your grid.
Throughout the chapter we'll include a few tips and tricks that show how, with just a few styles in a custom style sheet, you can have a nice effect on your design.
Chapter 2, Pick and Choose CSS Components, explains the components that only require style sheets.
Foundation components are bits of Cascading Style Sheets (CSS) code that help you style and present website content. Rather than starting from scratch and styling everything yourself, you can start with Foundation's components. Often these will be sufficient as they are; however, sometimes you will want to override or add to the built-in styles to customize a component for your needs.
The only JavaScript you need is the modernizr.js package at the top of your page.
We'll cover the following components: typography, visibility, miscellaneous components (keystrokes, inline lists, tables, labels, and vCards), navigation components (breadcrumbs, pagination, side nav, and sub nav), buttons, block grids, thumbnails, panels, flex video, pricing tables, and progress bars. Enjoy!
Chapter 3, Pick and Choose JavaScript Plugins, explains that there are several other components available that also require JavaScript—software that runs in the browser. JavaScript plugins can do a lot to enhance the capability of your website, but with all the wonderful features you also get more complexity.
Troubleshooting HTML markup and CSS is one problem. Digging into problems with JavaScript is much more of a challenge. Having said this, Foundation's plugins will work and do amazing things for you, provided you set them up as the plugin expects. This chapter will help you with that.
The plugins we'll cover in this chapter are Alerts, Tooltips, Dropdown, Sections, Top bar, Magellan, Joyride, Orbit, Clearing, Reveal, Interchange, Forms, and Abide.
Chapter 4, Advance with SASS, helps you advance with Foundation's SASS. After a brief look at what SASS is about, we'll see how to install Foundation with SASS.
When you download Foundation from the website, you can selectively choose which components to include. We'll show you how to do that after you have installed Foundation with SASS.
Then we'll see how to customize your CSS with SASS variables, how to work with SASS functions and mixins, and how to extend classes using SASS. Each of these allows you greater flexibility and control of your style sheets.
In the last section of this chapter we'll introduce you to designing with SASS. That's where you can take your HTML markup and quickly apply Foundation's grid mixins to style it into the layout you desire.
Whether you want to use all of Foundation's components or just a few, you can download and install them from the Zurb website. Here is the simplest case:
In your browser go to the Foundation download page. It is http://foundation.zurb.com/download.php at the time of this writing.
Click on the download button. This will download all of Foundation with the default settings to your PC.
Unzip the downloaded file and copy the resulting foundation folder to the location where you want it installed.
Verify the download by opening the
index.htmlfile that you find in the root of the foundation folder. You should see Welcome to Foundation as a bold heading, This is version x.x.x. in regular font just below that, and much more.
By default, the grid system along with all Foundation components and plugins are installed. Use the index.html file that you just loaded from the foundation folder as a model for your own pages.
If you already have a website where you want to install Foundation, you can copy the subfolders in your Foundation download into the root folder of your website. That includes the css, img, and js folders. With the current version of Foundation, the img folder is empty so it doesn't matter. If your website uses the css and js folders already, that's good. You can just merge Foundation's files with yours. Just be sure there are no files with the same name so you don't overwrite one with another.
This can be a bit confusing when getting started, and later on it can be hard to remember which files came from Foundation and which came from another source. So you may want to copy the entire foundation folder into the root directory of your website and keep it separate. When you do that, remember to change the links to CSS and JavaScript files.
For example, let's assume you copied the entire Foundation folder into your root directory and named it foundation. Copy the index.html file from the foundation folder to your root folder and call it model.html. Edit that in your favorite text editor. Replace all occurrences of js/ with foundation/js/ and all occurrences of css/ with foundation/css/. Open model.html in your browser. If everything went well, you will see exactly the same thing you had seen on opening index.html from the foundation folder.
Now use model.html as the model for loading your CSS and JavaScript files.
Note
One thing is critical for the maintenance of your website, never edit the Foundation files you downloaded from the website. Always keep them intact so you can install a new version of Foundation without wiping out your changes.
When you want to override or customize something in Foundation, do it in a separate folder, or at least a separate file. In this book we'll refer to your custom style sheet. It is recommended that you create a custom style sheet (for example, custom.css) where you add any tweaks or overrides that you want to make to Foundation's styles.
Put the custom style sheet wherever it makes sense for your website. That could be in Foundation's css folder or your own folder. Then for every web page you create, load the custom style sheet immediately after loading Foundation's style sheet.
On Foundation's download page you may have noticed a couple of other download buttons. Ignore the third one for now. We'll cover SASS installation in a later chapter. But the second button, Customize Foundation, gives you the option of setting some variables and selecting which components and plugins to install.
When working through the examples in this book it is recommended that you install all components and plugins. But as you get ready to move a website into production, you can optimize it by loading only the CSS and JavaScript that you use. The simplest way to do that is to do a custom download.
When you set variables or selectively install components and plugins, remember your choices. You'll want to go back for an update at some later date and use the same values.
To do an update of Foundation, download a newer version—using the same values if it is a custom download—unzip and copy the new folders over the existing ones, replacing the current installation. It is best to copy the entire website into a test area first, test the update there, and verify that nothing has changed that will break your website. Only when you are satisfied that nothing breaks, or you have fixes in place, should you replace the production Foundation files with a newer version. That's just good practice.
To get the best results with Foundation, include the following style sheets in this sequence in every web page:
normalize.cssfoundation.csscustom.css
Foundation ships with the normalize.css style sheet, which is part of the HTML5 Boilerplate package. We will not cover the specifics of normalize.css. There is documentation in the file itself and on the HTML5 Boilerplate website. Suffice to say that it normalizes styles for many HTML elements, corrects cross-browser inconsistences, fixes bugs, and generally improves usability.
The file foundation.css contains Foundation's styles and custom.css will contain your customizations.
The book will be useful to web architects, designers, and builders. While it helps to be a programmer, it isn't necessary. The reader should be familiar with the basic principles of responsive web design and have a desire to create a professional website that looks great on mobile devices and regular displays. A mind that's open to discovering the techniques and components that are available, and a will to put them to work, is all that's required.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Use small-n and large-n when you want to control the view on small and large devices independently."
A block of code is set as follows:
<div class="row">
<div class="small-10 small-centered column">
<!-- centered -->
</div>
</div>When we wish to draw your attention to a particular part of a code block, the relevant lines or items are highlighted:
<div class="row">
<div class="small-10 small-centered column">
<!-- centered -->
</div>
</div>Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "The third installation option on that download page is Install Foundation SCSS."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title through the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.