43,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Maximize the potential of Bootstrap with a collection of real-world site projects for better, faster, more responsive web applications
About This Book
- Build Bootstrap projects quickly and easily with Harp.js, Node, and Less
- Learn how to extend Bootstrap with the use of open source JavaScript and icon web font libraries
- Get acquainted with building complex social networking, wiki, and dashboard projects with Bootstrap
Who This Book Is For
Bootstrap Site Blueprints Volume II is geared for developers of all experience levels. It is written in a concise, easy-to-understand way. Each project follows a step-by-step process that anyone can understand. Some experience with Bootstrap beforehand would definitely be an asset but is not required.
What You Will Learn
- Customize and extend existing Bootstrap JavaScript components
- Combine the Google Material Design look and feel with Bootstrap
- Use flexbox and other cutting-edge CSS3 techniques in Bootstrap
- Implement and customize open source JavaScript chart libraries in Bootstrap
- Optimize and implement an optimal user experience for all your projects
- Implement the Disqus commenting platform into your projects
In Detail
Bootstrap is the most popular open source project on GitHub today. With a little bit of know-how, this massively popular CSS framework can leveraged for any type of complex web application or website. Bootstrap Site Blueprints Volume II will teach you to build these types of projects in an easy-to-understand fashion.
The key to any complex Bootstrap project is a strong development foundation for your project. The book will first teach you how to build a Bootstrap development environment using Harp.js, Node, and Less. In the next chapters, we'll build on this foundation by creating restaurant and mobile-first aggregator projects. Once you're warmed up, we'll move on to more complex projects such as a wiki, a new magazine, a dashboard, and finally a social networking website. Whether you are brand new to Bootstrap or a seasoned expert, this book will provide you with the skills you need to successfully create a number of popular web applications and websites.
Style and approach
This book takes a step-by-step approach to building each project, explained in a conversational and easy-to-follow style. We start by designing a development environment that will be used in all of the book's projects. The projects start from an easy-intermediate level and progress to advanced as the book goes on.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 301
Veröffentlichungsjahr: 2016
Ähnliche
Table of Contents
Bootstrap Site Blueprints Volume II
Bootstrap Site Blueprints Volume II
Copyright © 2015 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: December 2015
Production reference: 1211215
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78528-109-9
www.packtpub.com
Credits
Author
Matt Lambert
Reviewer
Sherwin Robles
Commissioning Editor
Sarah Crofton
Acquisition Editor
Aaron Lazar
Content Development Editor
Sumeet Sawant
Technical Editor
Utkarsha S. Kadam
Copy Editor
Vikrant Phadke
Project Coordinator
Shweta H Birwatkar
Proofreader
Safis Editing
Indexer
Tejal Daruwale Soni
Production Coordinator
Aparna Bhagat
Cover Work
Aparna Bhagat
About the Author
Matt Lambert is a designer and developer with more than 15 years of experience. He currently works full time as a senior software engineer for CA Technologies in Vancouver, British Columbia, Canada. In his free time, he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products side by side. To date, Matt has self-published three additional development books titled Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
About the Reviewer
Sherwin Robles is a web application developer from the Philippines with a solid 4 years of experience in designing, developing, and implementing automated solutions. Most of his projects have been built with the CakePHP framework with the help of Bootstrap, which makes development even faster. In April 2015, he joined INIGOTECH, a company aimed at making people's ideas into reality.
Sherwin's expertise is rooted in research and development endeavors on how to achieve improved levels of dependability on the Internet and computing systems.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Preface
In 2011, Mark Otto and Jacob Thornton were working at Twitter on a number of projects. The two creators of the Bootstrap framework needed a way to achieve consistency across them all. The solution they developed was the Bootstrap CSS framework. Over time, more developers came on board and the project quickly became the most popular repository on GitHub. As time has passed, the framework has become the backbone of websites and web applications across the Internet. Other companies have tried to emulate their success by creating their own internal frameworks, but Bootstrap still remains the gold standard of open source CSS frameworks.
Bootstrap provides developers with all the CSS tools that they need to quickly develop websites. It has a deep feature set, is easy to learn, is mobile-first, and is cross-browser compatible. Hundreds of additional components and plugins have been developed by programmers, making it the go-to tool for web designers everywhere.
Bootstrap Site Blueprints Volume II provides you with detailed instructions on how to develop some of the most common website and web application types on the Internet. If you have struggled with using Bootstrap in the past or applying a custom look and feel to your projects, this book will give you the foundation that you need to become a Bootstrap master.
What this book covers
Chapter 1, Advanced Bootstrap Development Tools, is a quick introduction to Bootstrap. This chapter also covers some advanced development tools that can be used to make Bootstrap site development easier, such as Less, Node.js, EJS, and Harp.js.
Chapter 2, Building a Restaurant Website, is where we take our Harp.js development environment and build a restaurant website. This will include building more page templates, introducing Google web fonts, customizing Bootstrap components, and much more.
Chapter 3, Mobile-First Bootstrap, covers how to do the following: create a mobile-first website using Bootstrap, design a mobile-first website, use Google material design colors and styles, do advanced customizations on the Bootstrap modal component, use jQuery to make a search bar hide/show effect, and create a static, single-page app using Bootstrap.
Chapter 4, Bootstrap Wiki, tells us how to create a wiki layout with Bootstrap and how to add multiple templates to a project in Harp. You also get to learn how to customize the navigation modal you made in the previous chapter, how to use Harp partials for more than just the header and footer, and how to code your template in a modular fashion to save time and produce Less code.
Chapter 5, Bootstrap News Magazine, illustrates the creation of a magazine website using Bootstrap, and a new way to lay out a header using inline divs. Here, we see how to construct a complex footer using multiple parts, how to use flexbox with a Bootstrap grid, and how to use a basic jQuery to improve the experience of your article page. We also implement a Disqus-powered comments section.
Chapter 6, Bootstrap Dashboard, teaches you how to code a dashboard using Bootstrap, how to create a project with a dark look and feel, and how to implement and customize the Chartist JavaScript library. In this chapter, we customize the Bootstrap panels component, the Bootstrap table component, and the Boostrap nav and navbar components. We also see how to use a mobile nav outside of the default navbar.
Chapter 7, Bootstrap Social Network, covers the coding of a social network using Bootstrap. We customize the Bootstrap well component, the Bootstrap navbar component, and the Bootstrap alert and button components. Finally, we see how to create a highly modular design for easy reuse of code and components.
What you need for this book
To run the pieces of example code outlined in this book, you'll need a modern browser, such as Google Chrome, Apple Safari, Mozilla Firefox or Microsoft Internet Explorer. To work with the projects outlined in each chapter, you'll also need the following:
Who this book is for
This book is for developers who are interested in learning how to build common website and web application projects with the Bootstrap CSS framework. Basic knowledge of HTML, CSS, and JavaScript is required to get the most out of this book. It will also be helpful to have some experience with a command-line tool.
By reading this book, you'll learn the syntax and inner workings of Bootstrap (the latest version 3.3.4 at the time of publishing this book), Less, Harp.js, HTML, and CSS. You'll also learn a bit about JavaScript and jQuery.
Conventions
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, folder names, filenames, file extensions, pathnames, and dummy URLs s are shown as follows:
A block of code is set as follows:
Any command-line input or output is written as follows:
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Choose the Share or Embed Map option from the menu."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
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 via 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.
Customer support
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.
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Downloading the color images of this book
We also provide you a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from: https://www.packtpub.com/sites/default/files/downloads/1099OS_ColorImages.pdf.
Errata
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/submit-errata, selecting your book, clicking on the erratasubmissionform link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
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.
Questions
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.
Chapter 1. Advanced Bootstrap Development Tools
Although Bootstrap is the most popular CSS framework on the block, which polarizes web developers of all skill levels, one of the main complaints against it is that it's too large and hard to use. The primary goal of this book is to give you an advanced set of tools to make building websites with Bootstrap easier and even enjoyable. We'll start out by showing you how to create a development environment and workflow that is easy to set up and reuse in all your Bootstrap projects. From there on, we'll tackle a number of common website designs to get you comfortable with the advanced techniques. Finally, we'll include some JavaScript libraries and really take our Bootstrap projects to the next level. Sit back, fire up your code editor of choice, and get ready to dive into some advanced Bootstrap blueprints.
In this chapter, you'll learn:
Theming is hard!@
I won't lie. Bootstrap theming can be really challenging. There is a large library of components that take some time to understand, and learning the best ways to customize them also takes time. But what if there was an easier way? I'm happy to say that I've designed a workflow using some modern frontend development tools that make it much easier to work with Bootstrap. The problem with frontend languages such as HTML and CSS is that they lack some core programming features, such as variables and includes. Thanks to tools such as Less for CSS and Harp.js for templating, these missing features are now available for building static websites.
Harp.js – the static web server with built-in preprocessing
The title says it all, and it is taken from the official http://harpjs.com/ website. Harp is an open source project from some of the same people who brought us PhoneGap, and it is my tool of choice for any static website project I work on. Why is Harp so great? Here are just a few reasons:
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Creating a development environment
Everything that I outlined earlier basically creates a development environment for your Bootstrap websites. The advantage of using a development environment is that you can use tools such as Harp to make your website development faster and easier. It provides you with a working copy on your local computer, and you can use that copy to develop your projects. When you're done, you can compile it into the production version and deploy it on the Internet. It's a good idea to get into the habit of creating a development environment because it's a better coding practice and makes it easier to maintain your project in the future. This is because the production code is totally separate from the source development files. Running a localhost server for testing also allows you to build new features without having to worry about negatively affecting your live production website.
Installing Node.js
The web server that is built into Harp runs on Node.js. Therefore, you will need to install Node on your computer before you can set up Harp. If you don't have Node already installed, head over to the following link to download the version you need:
http://nodejs.org/download/
Once you've downloaded and installed Node, you'll have to open and use the command line to test the installation. If you're on a Mac, I'd recommend that you use the terminal or an app such as iTerm to access the command line. If you're working on Windows, you can use Cygwin. Once you've opened up your command-line app, type in the following line:
If you have installed Node correctly, the number of the version you have installed should be printed on the terminal. You should see something like this:
Great! Now we can move on to installing Harp.
Installing Harp.js
Actually, setting up Harp.js is really easy. If you have closed your terminal, open it again. Insert this command if you're on a Mac:
If you're on Windows, use the following command:
After you execute this command, you should see a bunch of packages being installed in the terminal window. Once everything stops loading, Harp is installed. To verify that it has worked, enter the following in the terminal and hit Enter:
This should give you the version number, which means that Harp was successfully installed.
Since Less preprocessing is included with Harp, we don't need to install anything special to use Less. This is great news, because we don't need to rely on less.js or a standalone compiler app. Once we compile our Harp project and run the web server, any changes to Less files will be picked up automatically. For now, just celebrate, and we'll cover compiling Less in more detail a little later.
Setting up a boilerplate project
For the rest of this chapter, I'm going to teach you how to set up a Bootstrap boilerplate project in Harp. Moving forward, this boilerplate will be the basis for all the projects in the book. One of the great things about Harp is that you can simply copy and paste a project to create a new instance of it on your local machine. There are also some other commands that you can run to generate project scaffolding, and I welcome you to check them out at http://harpjs.com/docs/. However, for this book, we aren't going to take any shortcuts, and I'm going to show you how to manually set up a project. The best practice is to do it the hard way first so that you learn how it works. This will save you a headache down the road if you are troubleshooting a problem. The first thing you should do is navigate to a directory on your computer where you want to store your project. In the directory you created the following files and sub directories. For the time being, just leave the .json and .ejs files blank. We'll fill them in a little later. Take a look at the following image to see how your project directory should look.
Note
Note that there is a project boilerplate available for download or forking from GitHub at https://github.com/cardeo/booterator.
This is the root of our project, and here we'll find everything at a high level:
Note
The Embedded JavaScript (EJS) template language is very similar to HTML and is therefore really easy to grasp. The advantage of using EJS is that it allows the use of elements such as variables.
Setting up the CSS
Now that the root of our project is set up, let's set up the subdirectories. We'll start with the CSS directory by adding the following files. Now would be a good time to download the latest version of Bootstrap from http://getbootstrap.com if you haven't done so already. Again, just leave theme.less blank for now.
Within the components directory, create a Less file and name it _variables.less. Leave this file blank for the time being.
Note
Starting a file with an underscore in Harp will mark it as a template file that should not be a straight copy to the production directory. It is file that should be compiled into another to create a full HTML page or CSS style sheet.
Let's quickly walk through the files in the /css directory:
Setting up the fonts
Bootstrap comes with Glyphicons out of the box, which is fine. I, however, prefer to use font awesome because their license is more flexible. To add font awesome to your project, head tohttp://fontawesome.io and download the package. Unzip it into your computer after downloading and copy the contents of the /fonts directory to your project's /fonts directory. Next, go to the /css folder and copy font-awesome.min.css to your project's /css directory. For now, that's all you need to do; we'll hook up everything else a little later. The /fonts directory should now look like this:
Setting up the JavaScript
For our boilerplate, all that we need to do is copy bootstrap.min.js to our /js directory. Like the Bootstrap CSS, there are a few JavaScript files included in the download package. You can ignore the other files as we won't need them.
Setting up the partials
The last directory that we need to set up is our partials. If you come from the PHP world, note that partials are includes. They are little snippets of code that are reused across all or many of your pages, such as your header, footer, and navigation. Partials are one of the best features of Harp because you can update these template pieces in one place when changes occur, instead of updating on every page! For now, create two files in your /partial directory, called _header.ejs and _footer.ejs.
Now that we've finished setting up the basic structure of our project, we can move on to actually filling in some code for our .json and .ejs files.
Setting up _harp.json
I'm going to start with _harp.json before _data.json. This is because the first file deals with the global settings for our project. In this case, we're going to use _harp.json to set up a global variable that will map to the website name for our project. Later on, we'll insert this variable into our layout so that it appears on every page of our website. Enter the following code and save it:
What we've done here is set up a global variable named siteTitle and set its value to My Bootstrap Boilerplate. Once we insert this variable into our layout, the title will be shown on every page of our project.
Note
This is only a fraction of what you can do here. Check out http://harpjs.com/docs/development/globals to learn more about globals.
Configuring _data.json
If _harp.jsonapplies to all the pages in our website, _data.json contains page-specific data for our project. In this case, I'm going to set up a variable that can be used to insert the page name for each page of my project:
Here's how this data works:
Again, there is more that you can do with metadata in Harp, but at this point, this is all that we need. To learn more about Harp metadata, visit http://harpjs.com/docs/development/metadata.
Setting up the layout
As I mentioned previously, _layout.ejs is the wrapper file for my index.ejs page template. Layouts can be reused, and pages will always default to using _layout.ejs unless you tell them otherwise. If you want to create a second layout for use on a specific page, you simply have to create a new file called something like _layout-two.ejs. Then, in your _data.json file, you have to add a second line to your template declaration that points to the new layout:
Note
When you're working with your .json file, file extensions are not required.
Now, that's an example of how to use multiple layouts. For our boilerplate, we'll need only one layout. A layout file can be written in mostly normal HTML, but we need to insert a yield property to tell Harp where to insert the content from the page file (index.ejs). We also need to insert the variables that we defined in _harp.json and _data.json. Open up your _layout.ejs file in the root of the project and insert the following <head> code:
The preceding code is the standard Bootstrap header with some small changes:
Note
Make sure you use the CSS extension here for all your files. Once theme.less is compiled, it will turn into theme.css. Therefore, we need to name it correctly so that it's picked up by the browser.
Inserting the variables
If you look at the <title> tag in <head>, you'll notice a couple of variables. These are the two variables that we set up in _harp.json and _data.json. On compiling, pageTitle and siteTitle will be inserted into the page layout. Depending on the page, the proper pageTitle variable will be inserted.
Now that we have the <head> element of our layout set up, let's enter the code for <body>:
Now, the <body> code is going to look a little different from what we are used to with Bootstrap and HTML. Let me go through each part of the layout:
Setting up the header
To set up the header, we need to edit the _header.ejs file that we created earlier in this chapter. Head to the /partial directory and open up _header.ejs. Then paste the following in the Bootstrap navbar code:
The code for the header is pretty straightforward, except for one thing; it's your standard Bootstrap navbar. One more thing that is different is that I've used the siteTitle global variable again so that siteTitle will automatically be inserted into the navbar brand for each page upon compilation. This is a simple example of how you can reuse variables in your templates.
Setting up the footer
Next, open up the _footer.ejs file, which is in the same /partial
