Skip to content
This repository has been archived by the owner on Jun 21, 2022. It is now read-only.

Styles and Bootstrap

Jump to bottom
Kevin Chien edited this page Sep 28, 2017 · 4 revisions

Every (well-designed and written) website uses some sort of CSS to give it consistent styling. We use Bootstrap and SASS, where Jekyll has built-in support for SASS.

Bootstrap

What is Bootstrap?

Bootstrap is basically a bunch of CSS classes and styling that you can quickly use to build a modern, responsive, good-looking web page/app relatively quickly. We use Bootstrap v3.5.5, with the css docs here and components here. Whenever you are interested in some sort of component, such as a pop-up modal or an accordian, just look at the docs, or Google "bootstrap modal" and you should find how to use it. It's also worth reading through the components page to get a general idea of what kind of components there generally are.

Bootstrap

Primary Features

Here are some things that are the primary features of Bootstrap, and things I consider essentials that you should learn, or at least know of.

  • Grid system: Allows you tile multiple items in rows, and have them responsively stack or change order when the screen size changes.
  • Responsive components: These components allow you to resize something based on screen size. Vital for making something mobile friendly.
  • Components: All the Bootstrap components. Read over them to get a general view of what components people use for modern web development.

Styling + SASS

Sass is basically a superset of CSS. It adds the power of variables and functions to CSS.

  • _sass/bootstrap/_variables.scss: contains all the global variables that are populated throughout Bootstrap, such as $pie-blue. It determines button colors, etc.
  • _sass/styles.scss: All our custom made component styles are here. For example, the styling for the timeline in compete/rc-spring.html is here.

Study questions

  • How would you make a component <div class="c1"> be visible in small views, but switch to <div class="c2"> for wider views?
  • How do you build a row with 3 items (columns) in it, that span the full width?
  • What is the value (hex color code) of $pie-gold?
  • How do you use SASS with the darken function to make $pie-blue a little darker (e.g. for a button hover)?

Extras

  • Here is a CSS guide on viewports and a responsive grid system, implemented from scratch.
  • See AirBNB style guide for SASS files.
Clone this wiki locally