Microsoft - Advanced CSS Concepts

My notes on the great course Microsoft - Advanced CSS Concepts on edx.

Lesson 01

Responsive Layout

Covers the basics of Responsive Layout. In essence, you use the @media query to figure out what the width, height, page orientation and resolution of the device is. Then based on that information you use a different CSS Rule.

To create a consistent Layout you should always design for the smallest device screen - then expand it to the bigger devices. (Mobile First Strategy).

Base CSS

In General, you should use a Style guide to create a consistent look across your application. They are usually created by the graphic designer.

Typically a website should be suitable for all different types of browsers. However, the CSS implementation and the default styles are different across browsers. To avoid this problem, you can include a CSS Reset - to ensure a consistent style.

A front-end Style guide should help define

• Code standardization of CSS, and HTML
• Consistency of code and design
• More efficient workflow
• Documenting of code practices
• An easy-to-access reference for code and design for new team members

Your style guide will be comprised of:

• A template: The template contains the basic elements that serve as the foundation for your web pages, such as color palette, fonts, headers, footers, body text, navigation, widgets, and grid layouts.
• Patterns: The patterns for your web page include buttons, logos, images, the font icon library, and form styles.
• Documentation: The documentation is a record of the style and development pattern of your web page. You can add comments to your code that serve as the style guide or use interactive models or tooltips.

Media Queries

The most commonly used media queries are:

• min-width Rules applied for any browser width over the value defined in the query
• max-width Rules applied for any browser width below the value defined in the query
• min-height Rules applied for any browser height over the value defined in the query
• max-height Rules applied for any browser height below the value defined in the query
• orientation:portrait Rules applied for any browser where the height is greater than or equal to the width
• orientation:landscape Rules for any browser where the width is greater than the height

The Query information is then used to define breakpoints, points where the layout switches from one size to another. Example of a set of major device breakpoints:

/_ Extra small devices (phones, up to 480px) _/
@media screen and (max-width: 767px) {...}

/_ Small devices (tablets, 768px and up) _/
@media (min-width: 768px) and (max-width: 991px) {...}

/_ tablets/desktops and up _/
@media (min-width: 992px) and (max-width: 1199px) {...}

/_ large like desktops and up _/
@media screen and (min-width: 1200px) {...}

Units

Historically the “px” Unit was used, however to incorporate various resolutions it is better to use the “rem” unit.

Going forward

• Optimize the text for reading
• Use major device breakpoints, and address content with minor breakpoints
• Treat your website’s layout as an enhancement
• Use relative units like rem or em;

Working with images

Images should be resampled to three different media sizes

Note: The alt tag must be set to correctly validate.

Lesson 02

Modular CSS

Modular CSS is:

• A guideline based approach for breaking down pages into generic reusable CSS code.
• Based on classes and consistent naming conventions.
• Easy to read and maintain by teams.

CSS Modules are:

• Generic, self-contained, and reusable.
• Modifiable, combinable, and scalable.
• Can contain or be contained by other modules but stay independent.

What are some common modules?

You will often come across modules such as these:

.nav,
.search,
.logo,
.breadcrumbs,
.title,
.button,
.icon,
.media-object,
.list,
.frame,
.slider,
.card,
etc.;

Example Module

/* Button Module */
.btn {
	padding: 0.5em 1em;
	text-decoration: none;
	border: 1px gray solid;
	display: inline-block //helps anchors and other inline elements ;
}

/* Button Sub-Module  */

.btn—content {
	background: blue;
	color: white;
}

<button class="“btn">Button Text</button>

What are the Results of a Module-Based Approach?

• Faster development
• Flexible and scalable code
• Code reuse
• Organized and easy to read code
• Easier to maintain
• Team efficiency
• Decoupled HTML and CSS

Guidelines

1. OOCSS (Object Oriented CSS) | http://oocss.org/
2. SMACSS (Scalable and Modular Architecture for CSS) | https://smacss.com/
3. BEM (Block, Element, Modifier) http://getbem.com/
4. DRY (Don’t Repeat Yourself CSS)

Font Awesome

A popular set of icon fonts is Font Awesome (http://fontawesome.io/)

Example for a like button

<button class="fa fa-thumbs-up">like</button>

images: [”../../../assets/images/Designed by Freepik”]