Class on Wednesday 11/20/2019
Today we are going to pick up where we left off with Sass and then look at how to apply this to your projects.
Sass Variables, Gestalt Connectedness and Color Palettes
The CodePen below is where we left off. It uses Sass Variables to set colors for the page. You can change these colors at the top of the CSS and the page colors will change. We looked at Colour Lovers last time. This time we will look at Adobe Color in the Trends section for palette inspiration: https://color.adobe.com/trends.
This pen uses the Connectedness principle from Gestalt Theory to separate sections by giving different background colors to different sections.
Click Edit on CodePen and fork it (if you’re signed in) to save your version.
See the Pen Simple Sass Colors by Christopher Stein (@profstein) on CodePen.
Moving Your Project to Sass
I made a separate post about this that we will use. Converting your Project To Sass.
Organize CSS in Sass
We will look at including or creating the following files and talk about different approaches.
- normalize
- responsive helpers
- colors (as Sass variables)
- typography
- navigation
- layout (with media queries)
- page/section specific styling
- this includes CSS copied from the web for specific purposes
- main stylesheet that imports and organizes everything
Inspiration
We will look at some sites for you to start thinking about layout, color type etc you will use for your final project design.
- https://muz.li/
- https://dribbble.com/ [https://dribbble.com/shots/popular/web-design]
- https://www.aiga.org/
- https://www.behance.net/galleries/interaction
Assignments
You have two assignments to work on for next week.
One is to convert your project files to use Sass and update your GitHub project (you should always update GitHub with your work from now on).
The other is to do at least some studying of all sets on Quizlet.
There are five sets on Quizlet:
- HTML
- HTML Box Model
- CSS Selectors
- CSS Grid
- Media Queries
