Building With Bootstrap

View Github Repository Open presentation in a new window

gdiminneapolis

See all presentation from gdiminneapolis

Building With Bootstrap

0 0

building-with-bootstrap

Introducing the Bootstrap framework to help design and build responsive websites quickly.

On Github gdiminneapolis / building-with-bootstrap

Building with Bootstrap

July 30, 2016 | GDI MPLS | Clare O’Neill

You can put speaker / student notes with a slide. Use the class "notes" in whatever div-like thing you want to put your notes in. They won't show on the slide, but you'll be able to see them on the print out.

Welcome!

  • Who are you?
  • What do you do?
  • How did you hear about Girl Develop It?
  • Have you used Bootstrap before?

Meet your instructor: Clare O’Neill

  • ✨Designy developer✨
  • Loves making the internet a happy, inclusive place to hang out
  • Currently a Front End Developer at Pixel Farm

What we will be covering in this workshop

Downloading Bootstrap and adding it to an HTML document Working with Bootstrap’s responsive grid system Styling images and buttons with Bootstrap classes Working with Bootstrap’s reusable user interface components If we have time: incorporating one of Bootstrap’s JavaScript plugins into a website

What this workshop will NOT be covering

Custom Bootstrap theme development Styling CSS on top of what comes default with Bootstrap Using every Bootstrap component and JavaScript plugin

Download workshop files

If you have not already downloaded the files for this workshop, please download them at file location.

What is Bootstrap?

Bootstrap is a front-end framework that helps speed up the development of responsive websites.

What is Bootstrap?

It’s one of the most popular front-end frameworks with 95,000+ stars and over 41,000 forks.

Bootstrap is an open source project on GitHub, meaning it is free to use and anyone can contribute to its progress.

What is a front-end framework?

A front-end web framework is a collection of flexible, production-ready HTML, CSS, and JavaScript that we can use when we develop websites and applications.

What is a front-end framework?

Keep in mind that Bootstrap is not just a CSS grid. It also comes with components to build a fully-functional, visually-consistent website.

Why would I want to use Bootstrap?

Bootstrap is designed to be responsive, which means that your HTML elements will respond to changes in screen size.

So this desktop design:

Also looks great on a tablet:

And rad on a smartphone!

Why would I want to use Bootstrap?

Bootstrap is also mobile-first, which means that it prioritizes ease of viewing at a mobile level and builds progressively for larger screen sizes.

Why would I want to use Bootstrap?

Best of all, Bootstrap allows designers & developers of all levels to build sites quickly!

What comes with Bootstrap?

Download files

You can download all the necessary Bootstrap files from getbootstrap.com or from the Bootstrap repo on GitHub.

(We included all of these in your demo-files folder, so no need to download from Bootstrap today!)

The File Structure