blueyoghurt / bootstrap-mockups

[css, bootstrap]

Bootstrap Mockup

Bootstrap's pre-defined classes allow developers to quickly create prototypes of web pages. These prototypes can then be customized with additional CSS. Let's try prototyping the layout for an actual site using Bootstrap.

Getting Started

• Fork and clone this repository
• Run npm install to install dependencies
  • npm start - start the BrowserSync server
  • npm run lint:css - lint CSS
  • npm run lint:js - lint JS
• Include the CDN links for Bootstrap where appropriate
• Start laying out the site!

Requirements

• Recreate the following site: https://www.microsoft.com/en-us/
• Use Bootstrap to recreate the layout of the page. Initially, it's ok if things aren't exactly the same. We'll be focusly mainly on layout and responsiveness.
• For pictures, you can find the sources on Microsoft's website, or use image placeholder services. Our favorites:
  • http://lorempixel.com
  • https://placekitten.com/
  • http://www.fillmurray.com/

Deliverable

See the site link above (Microsoft)

Bonus

• Now that you've used Bootstrap, add an external stylesheet and make your site look as un-Bootstrappy as possible by overriding styles. While Bootstrap is a great framework for scaffolding ideas quickly, nobody likes a plain-ol-Bootstrap site
  • Take advantage of the Chrome inspector to see what selectors you need to override

Additional Resources

• Bootstrap documentation: http://getbootstrap.com
• Font Awesome Icons (for more fonts than the provided Glyphicons): http://fontawesome.io/

---

Licensing

1. All content is licensed under a CC-BY-NC-SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [e-mail].