Creating a Living Style Guide with Sass and Vanilla JavaScript

Focused View

Karen Menezes

2:43:39

13 View

01.Course Overview

01.01.Course Overview.mp4

01:33

02.Introduction to Style Guide Driven Development

02.01.Intro.mp4

01:23

02.02.Style Guide Basics.mp4

02:47

02.03.Introduction to Adopt-a-Tree.mp4

03:58

02.04.Course Prep.mp4

02:43

02.05.Listing Globals, HTML Elements, and Components.mp4

03:36

02.06.Creating the Sass Framework.mp4

01:46

02.07.Variables Part 1.mp4

03:15

02.08.Variables Part 2.mp4

04:59

02.09.Creating a Style Guide Boilerplate.mp4

05:24

02.10.Summary.mp4

01:19

03.Guidelines and Global Styles

03.01.Intro.mp4

00:38

03.02.Naming Conventions and Coding Guidelines.mp4

01:26

03.03.Sass Maps and Colors.mp4

06:11

03.04.Adding Spacing Helpers.mp4

04:17

03.05.Media Queries and Grids.mp4

06:26

03.06.Global Helpers for Alignment.mp4

04:03

03.07.Font Icons and Logos.mp4

06:18

03.08.Typography Helpers.mp4

03:17

03.09.Summary.mp4

00:57

04.Styling HTML Elements

04.01.Intro.mp4

00:40

04.02.Typography for Native HTML Elements.mp4

04:53

04.03.Images Responsive and Full Width.mp4

02:29

04.04.Buttons Types, Colors, Sizes.mp4

06:52

04.05.Forms Part 1 Basic Styles.mp4

05:19

04.06.Forms Part 2 Input Groups.mp4

02:44

04.07.Forms Part 3 Custom File Upload.mp4

02:54

04.08.Resetting Styles.mp4

03:29

04.09.Summary.mp4

01:14

05.Creating Components

05.01.Intro.mp4

00:34

05.02.Simple Components Content Blocks, Progress Bars, and Avatars.mp4

05:23

05.03.Complex Components Banners.mp4

04:47

05.04.Complex Components Styled Lists.mp4

06:53

05.05.Complex Components Cards.mp4

07:01

05.06.Third-party Plugin Components Tabs and Carousels.mp4

06:15

05.07.Overview.mp4

00:58

06.Design Updates, Styling States, and Adding Accessibility

06.01.Intro.mp4

01:00

06.02.New Designs Sign Up and Log In.mp4

04:29

06.03.Styling States Mouse and Keyboard.mp4

07:29

06.04.Styling States Forms and Validation.mp4

06:09

06.05.Styling States Empty and Loading.mp4

03:22

06.06.Guidelines for Accessibility.mp4

08:13

06.07.Enhancing the Style Guide.mp4

02:24

06.08.Summary.mp4

01:52

Description

This course will teach you how to create a custom style guide with global helpers and reusable components that you can recycle across different projects.

What You'll Learn?

Long-term software projects tend to suffer from multiple issues, including inconsistent branding, code bloat, and poor documentation. In this course, Creating a Living Style Guide with Sass and Vanilla JavaScript, you will gain the ability to architect a style guide that tackles these issues at a core level and bridges the gap between design and development. First, you will learn how to identify the building blocks of a design system. Next, you will discover how to translate these building blocks into modular styles and reusable components. Finally, you will explore how to add stateful styles for user interaction, as well as accessibility for users with different needs. When you are finished with this course, you will have the skills and knowledge of style guide driven development needed to build a lightweight, custom style guide.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

CSS

Karen Menezes

Instructor's Courses

Karen Menezes is a freelance UI developer and author who specializes in CSS. Karen works towards an open, adaptive web, and loves the implicit challenges of responsive web development where performance and user experience are indispensable.

Pluralsight

View courses Pluralsight

Pluralsight, LLC is an American privately held online education company that offers a variety of video training courses for software developers, IT administrators, and creative professionals through its website. Founded in 2004 by Aaron Skonnard, Keith Brown, Fritz Onion, and Bill Williams, the company has its headquarters in Farmington, Utah. As of July 2018, it uses more than 1,400 subject-matter experts as authors, and offers more than 7,000 courses in its catalog. Since first moving its courses online in 2007, the company has expanded, developing a full enterprise platform, and adding skills assessment modules.