Skip to content

lesson-06.md

Latest commit

 

History

History
124 lines (82 loc) · 3.91 KB

lesson-06.md

File metadata and controls

124 lines (82 loc) · 3.91 KB

FEW 2.2 - Advanced CSS - Frameworks

Lesson Video

Follow this lesson lecture in video form:

https://youtube.com/playlist?list=PLoN_ejT35AEhF_M9vBuZgW0E4PiDb19oX

Watch Lesson 06 1 - 3

Review

<div class="container">
	<div class="a">
	<div class="b">
	<div class="c">
	<div class="d">
</div>

  • Using the markup above arrange child divs in two columns of equal size

  • Using the markup above arrange the child divs in four columns where the first column is 100px, the second is 50px, the third is 4rems, and the last takes up the rest of the available space

  • Use grid-template-areas to define 4 grid cells. Map the divs .a, .b, .c, and .d each to a different cell.

Why you should know this?

A frontend developer should have an understanding of CSS frameworks. There is a lot to choose from they all have their pros and cons you should be able to get in and use any of these.

Learning Objectives

  1. Use CSS Frameworks
  2. Evaluate CSS frameworks
  3. Use CSS Custom properties

What is a CSS Framework?

It could be a lot of things. Here a few popular CSS frameworks, you have used one or more of these:

Read up on these 9 CSS Frameworks here: https://athemes.com/collections/best-css-frameworks/

Use the Framework

Each framework has its systems and paradigms. For the most part, they will work in this way:

  • You will link to a stylesheet you may also have the option to include a JS file.
  • Linking to the stylesheet will add a set of default styles that cover the common tags like:
  • Base font and typography
  • Headings
  • Links
  • Lists
  • Tables
  • form elements

The framework will offer more styles and custom elements that are created by using a combination of markup/HTML and class names.

  • Navbars
  • buttons
  • cards
  • other features...

Making your Framework

Study the frameworks above. Look at what they offer. You will make your framework!

After Class

There is two assignment for this week.

Assignment 1 - Create a version of the CSS Zen Garden page using a CSS Framework. You can choose your favorite framework, it's up to you. With this assignment you are allowed to make any changes you like to zen garden HTML markup.

Study the way the framework operates. Ask yourself these questions:

  • What tags does it style? No need for a class name?
  • What markup is required? Sometimes to get something to work you need to combine certain tags and may have to include a class name.
  • How are class names used?

Assignment 2 -

Your goal is to create your CSS Framework. This will be a stylesheet that has all of the base styles that you might use in any project.

You can emulate the features in the frameworks above. Look at the ideas these contain, implement them in your framework with your ideas.

Get started by downloading the starter code:

https://github.com/Make-School-Labs/css-framework-starter).

Copy this repo above. It contains a single HTML file. You will add a stylesheet that styles the contents of this file.

The HTML file contains a range of typical elements that you will see on any website. The stylesheet you create should style these things so they look better than the default styles!

What's in the markup?

  • Type - This inlcudes:
    • Headings
    • paragraphs
    • links
  • Buttons
  • Forms - This inlcudes:
    • Forms
    • Inputs
    • Check Boxes
  • Colors - Color swatches showing the colors used by your framework
  • Nav Bar

Your job is to create a default stylesheet that you could add to any project that will make it look better than the default HTML styles.

Additional Resources