O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mobile First Bootstrap

Book Description

If you know the basics of Bootstrap this book will show you how to use it for websites that start from a mobile perspective. Create sites that are user-friendly for all mobile devices.

  • Get to grips with the essentials of mobile-first development with Bootstrap
  • Understand the entire process of building a mobile-first website with Bootstrap from scratch
  • Packed with screenshots that help guide you through how to build an appealing website from a mobile-first perspective with the help of a real-world example

In Detail

Bootstrap changes the way we develop websites in the frontend, and mobile web development has grown incredibly over the past few years. There are over 1.2 billion mobile web users in the world, and 25% of those mobile web users are exclusively mobile. Now, Bootstrap has also gone mobile-first. The mobile-first version of Bootstrap lets you first think about the mobile site and then think about how it expands to larger screens. To build websites for mobile devices that improve the overall experience of your customers, you need to be skilled at using the mobile-first feature of Bootstrap.

Mobile-first Bootstrap covers the new features in Bootstrap 3 and focuses on how they affect development from a mobile-first perspective. It will show you how to use Bootstrap 3 for developing websites for mobile and how to use that knowledge for your own development projects.

The book starts by highlighting the new changes that have been made to Bootstrap 3. After learning about these new features, you will discover how to easily build websites for mobile. You will learn how to run Bootstrap 3 Docs to customize Bootstrap for your needs. You will then be introduced to the new mobile grid system, the responsive utilities, and how to use mobile-first for navigation. Then, using JavaScript, you will explore the power of data attributes and progressive enhancement before starting to develop a web project from scratch. The last section of the book will discuss the main issues that affect the performance of Bootstrap as well as the issues that arise while dealing with responsive images.

Mobile-first Bootstrap guides you through everything you need to know about Bootstrap 3 and helps you to understand and use the mobile-first approach in your own projects with the help of an example project.

Table of Contents

  1. Mobile First Bootstrap
    1. Table of Contents
    2. Mobile First Bootstrap
    3. Credits
    4. About the Author
    5. Acknowledgements
    6. About the Reviewers
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
      2. Why Subscribe?
      3. Free Access for Packt account holders
      4. Instant Updates on New Packt Books
    8. Preface
      1. What this book covers
      2. What you will need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Web page for the book
        3. Errata
        4. Piracy
        5. Questions
    9. 1. Bootstrap 3.0 is Mobile First
      1. Bootstrap reviewed
      2. Desktop to responsive
      3. The new mindset – Mobile First
      4. Practical example – The responsive dropdown
      5. Now Bootstrap uses Bower and Jekyll
      6. Running the docs
        1. Version 3 in progress in the Github repository
        2. Installing Jekyll
      7. Bower
        1. First step to responsiveness
      8. Making changes in the Bootstrap source code
        1. Running tests
      9. Summary
    10. 2. Designing Stylesheet in Bootstrap 3
      1. The grid system
        1. Semantic grids
        2. The grid framework
        3. Breakpoints and completely fluid layouts
        4. Predefined classes to control responsive flow
      2. Forms in different resolutions
      3. The icon library
      4. Responsive utilities
        1. Responsive classes
        2. Semantic grid variables and functions
      5. Relative units
      6. Navigation
      7. Summary
    11. 3. JavaScript, the Behavior in Mobile First Development
      1. The carousel example
        1. A touch of enhancement
      2. Data attributes
      3. Mobile First and progressive enhancements
        1. Be semantic in your HTML markup
      4. Unobtrusive JavaScript
      5. Follow the Bootstrap tips about accessibility
        1. Test a site in a lynx browser
      6. Namespace events
      7. JavaScript on the server
      8. Summary
    12. 4. Getting it All Together –a Simple Twitter App
      1. Bootstrapping our application
        1. Inserting a customizable version of Bootstrap
        2. The project template
      2. The Bootstrap modal component example
      3. Geolocation
      4. The Twitter API search
        1. Make a search
      5. Going from a tablet device to desktop screen resolution
      6. The choice between a web app and mobile application
      7. Summary
    13. 5. Performance Matters
      1. Responsive images
      2. Load on demand
      3. Optimizing icons
      4. Summary
    14. Index