Instructions

1. Set it Up

   • Create a repo (or folder, if working locally only) named "mysassybase" with a sub-folder named "scss"
   • Inside of the "scss" folder, create a style.scss and define at least one variable at the top (for SASS compliling/testing purposes).
   • Create an index.html file that links to a css/style.css file (that has yet to be compiled).
   Step 1 Demo Step 1 on GitHub Step 1 Video Lesson

2. Sass it Up

   • Use a compiler (e.g. Gulp, PrePros, etc.) to watch your "scss" folder for changes in your SASS files (*.scss) and auto-compile them into a destination "css" folder as native CSS (.css).
   • Inside of the "scss" foler, create a sub folder named "partials" then create a _toc.scss file inside with your CSS table of contents.
   • Import your new partial file into your main style.scss file (e.g. @import "partials/toc";).
   Step 2 Demo Step 2 on GitHub Step 2 Video Lesson

3. Style it Up

   • Once your SASS setup is tested and working, start styling by setting your base typography via a new partial file entitled "_typography.scss"
   • Set your base typography and add support for webfonts (e.g. Google Fonts) if you are using any and any helpers that you might need (e.g. for unique type specimens).
   • Consider adding a max-width to your paragraphs to limit the number of characters per line.
   • Create a new _buttons.scss partial file as an example of a how to add a component.
   Step 3 Demo Step 3 on GitHub Step 3 Video Lesson

4. Make it Responsive

   • Create a new partial named _media.scss and make all of your images responsive.
   • Create a new partial named _layout.scss and use variables to define the breakpoints for your responsive media queries then test it by resizing your body type for small and large screens.
   • Add a reusable container (wrapper) that will scale from fluid width (on small screens) to a fixed width on larger screen.
   • Use box-sizing: border-box;
   Step 4 Demo Step 4 on GitHub Step 4 Video Lesson

5. Flex Your Layout Muscles

   • Set up a reusable grid system (rows and columns) inside of a new partial named _grid.scss but instead of using a float-based grid, use CSS grid and/or flexbox and experiment with the different approaches, such as using a grid with or without semantic classnames (e.g. class="one-third column")
   • Consider using flexbox and/or CSS grid on a case-by-case basis, section-by-section, component-by-component, for a more custom approach to layout
     • Use flexbox to position your structural site elements (e.g. header, footer, and navigation).
     • Use flexbox to layout your main content using various approaches and design patterns (e.g. right, left, and centered content, centered cards, image thumb grids, etc.).
   Step 5 Demo Step 5 on GitHub Step 5A Video Step 5B Video

Typography

Typographic Scale

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6

This is a paragraph. This is italic. This is bold. This is a link. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, a amet. Velit, quos impedit illo doloremque quasi tempore quidem mollitia, aliquid voluptas dolorum error placeat culpa numquam quae, nemo itaque. Dolore ullam corporis a animi neque nobis cum, temporibus consectetur similique asperiores nulla soluta perspiciatis, qui autem enim ratione suscipit.

This is a second paragraph. Consequuntur amet tenetur quibusdam id aperiam quae quos odit, doloribus totam cumque delectus fuga animi nostrum saepe ipsum inventore ipsam eaque molestias voluptas quam dolores ut corrupti in suscipit. Optio quas officia recusandae amet aut. Id ratione ipsam nihil voluptatem.

---

Type Specimen

Large Headline

Light Subheader

Meta: Value

This is a paragraph. This is italic. This is bold. This is a link. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, a amet. Velit, quos impedit illo doloremque quasi tempore quidem mollitia, aliquid voluptas dolorum error placeat culpa numquam quae, nemo itaque. Dolore ullam corporis a animi neque nobis cum, temporibus consectetur similique asperiores nulla soluta perspiciatis, qui autem enim ratione suscipit.

This is a Button This is a Link Button This is an Alt Link Button

---

Helpers

---

Responsive Images

---

Layout

Grid

---

Left, Right, & Centered Content Layout

---

Centered Cards

Colors:

• 

  Body Text

• 

  H1, H2, ...

• 

  Accent

• 

  Links

• 

  Link Hover

---

Thumb Image Grids

• 

  Caption

• 

  Caption

• 

  Caption

• 

  Caption

• 

  Caption

• 

  Caption

• 

  Caption