We are living in a rapidly changing time because of the way we use the Web. To follow up on this currently changing paradigm, the development cycle finds its way to follow this new scenario. The frontend community is building amazing tools to make it possible to deal with so many changes. In the past, we had to deal with browsers that did not respect the standards. Now, we are dealing with new devices with a wide range of features. The Web is going mobile. With so many limitations on one side, and the power of flexibility on another side, the mobile and tablet just cannot be a substitute for the huge and wide desktop screens. The mobile needs are complementary to the desktop's standard nature. On the other hand, there's a brand new opportunity with its mobile use and simplicity that makes us see an ongoing challenge to expand our business. This way we have a presence in the ever-growing online market. The Web is not only limited to a desktop anymore. We have to think wider.
The most famous frontend frameworks also have to undergo a deep change to meet this demand. They are radical. In the new Bootstrap release, they decided to get their learning from the oldest version and redesign from scratch, but the focus is now on Mobile First as a user environment. Why do you have to focus on the mobile environment now?
Well, in the new paradigm, we will just get a Mobile First framework for simple development like we used to. We have to follow it up and see how powerful an online product cross device with no disturbing complexity can be, even though it sounds complicated.
We know that Bootstrap is not a silver bullet, but it's a great option to start your development cycle for Mobile First. It makes things simple, and we should know how it does it, because this Version 3 is based on a lot of contributions from Bootstrap developers. This is a strong reason for you to follow the same principles.
You may have already used Bootstrap or visited sites that use it. It's not hard to identify Bootstrap's basic template in a lot of websites around here, for example, the documentation APIs of open source projects. Research of the meanpath shows that Bootstrap is present in 1 percent of the 150-million websites worldwide, powering 1 percent of the Web (http://blog.meanpath.com/twitter-bootstrap-now-powering-1-percent-of-the-web/). So, we know the power of its use and the amazing things we can do, but now we can do even more, and you have a chance to explore its new capabilities.
In this book, we will not just look at the Bootstrap changes, but also cover the mindset that makes us think mobile and go through an efficient multidevice development. We will develop a sample short message app that will be called Cochichous, which users can check the nearest messages sent by other users using Twitter API. We will explore HTML5 and JavaScript capabilities, as well the grid and the Bootstrap plugins. Besides that, we will also discover what has changed with this new important release.
Chapter 1, Bootstrap 3.0 is Mobile First, introduces you to the Mobile First development, and makes you understand why Bootstrap was redesigned to this new approach and the reasons we should take care of. We will get a little vision about the responsive design and how Mobile First works with it. Then, we will get in contact with Bootstrap documents to start checking the new documentation and make tests to familiarize ourselves with a Mobile First website.
Chapter 2, Designing Stylesheet in Bootstrap 3, gets us started with the CSS structure and the main grid changes, as well as showing us an example on how to make decisions about breakpoints using Bootstrap grid classes. We will get an overview of how the navigation deals with Mobile First, and how to get forms optimized to different devices.
Chapter 3, JavaScript, the Behavior in Mobile First Development, will lay the foundation of stylesheets, and we will get in touch with JavaScript. In Bootstrap, this is represented by JavaScript plugins using jQuery that's almost intact in this version. It's a great opportunity to learn how to adapt the Bootstrap JavaScript plugins to work with a new device's capability and how to explore its pattern to build your own plugins. There's a clear explanation about progressive enhancement that we probably have already heard before, but now we are focused on applying Mobile First techniques.
Chapter 4, Getting it All Together – a Simple Twitter App, will get all the pieces already learned to make a real Mobile First sample and a simple product to allow us to have an overall idea of how to develop a Mobile First new product from scratch. We start to deal with the capability offered by the mobile browser to deliver a better experience on mobiles for our users. Then, we get all the points that surround the decision about a web app or a native app.
Chapter 5, Performance Matters, will cover what needs to be done to have our mobile experience optimized, how this optimization affects the accuracy still present in the desktop, and how the Mobile First development can be a powerful tool to make our website faster. We will learn three main techniques: optimizing images, loading components on demand, and the use of fonts to render icons.
You will just need a computer and an Internet connection. Use your favorite development tool that you are already using to develop your HTML/CSS/JavaScript layers from your application. It would be good to have a mobile phone to test your projects and feel how your site works on a mobile.
This book assumes that you are already familiar with Bootstrap to understand the huge differences in this third version. But, if you're discovering Bootstrap right now, don't worry, just get into the documents and use the book as a guide to use Mobile First development with Bootstrap. If you are already familiar with mobile web app development, this book is helpful in allowing you to use this knowledge with Bootstrap as a frontend framework for your Mobile First needs. Bootstrap is for everyone, so if you are familiar with frontend technologies such as JavaScript, HTML, and CSS, you will have a chance to customize and use it as a strong frontend tool or even use Bootstrap as the style guide for your projects in your company. But, if you are not familiar with frontend, for example, if you are a designer, Bootstrap could be helpful, and you just need notions of HTML to use Bootstrap for your websites. This is possible just with the lessons learned from the book and the Bootstrap documentation.
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 are shown as follows: "The following lines of code apply a conditional statement to the $(window) object that checks its width against a value greater then 960 and them makes a loop in each image to change the attribute source accordingly with this condition."
A block of code is set as follows:
if($(window).width() > 960) {
$('img').each(function(){
$(this).attr('src', $(this).data('desktop'));
});
}Any command-line input or output is written as follows:
grunt
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: "In your account that you just created, go to your account menu and click on Create a new application".
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.
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.
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.
There is a web page for the example chapter at http://cochichous.herokuapp.com with all the code used in Chapter 4, Getting all together – a Simple Twitter App so you can explore the whole example.
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 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 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 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.