GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → planetoftheweb → Sassessentials

planetoftheweb / Sassessentials

Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.

Labels

csstutorialscsssasstrainingmixinssass-mixins

Projects that are alternatives of or similar to Sassessentials

Juice
Mixins for Life
Stars: ✭ 274 (+64.07%)
Mutual labels:  mixins, scss, sass, sass-mixins
Browser Hack Sass Mixins
Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera
Stars: ✭ 170 (+1.8%)
Mutual labels:  mixins, scss, sass
Css Vars
Sass mixin to use CSS Custom Properties with Sass
Stars: ✭ 164 (-1.8%)
Mutual labels:  scss, sass, sass-mixins
Mixins
sass mixins
Stars: ✭ 132 (-20.96%)
Mutual labels:  mixins, scss, sass
Sass Extras
Useful utilities for working with Sass
Stars: ✭ 179 (+7.19%)
Mutual labels:  scss, sass, sass-mixins
Sassyfication
💅Library with sass mixins to speed up your css workflow.
Stars: ✭ 51 (-69.46%)
Mutual labels:  scss, sass, sass-mixins
Sass Deprecate
Let Sass warn you about the pieces of your UI that are deprecated, providing a clear upgrade path for developers
Stars: ✭ 265 (+58.68%)
Mutual labels:  scss, sass, sass-mixins
Accecss
AcceCSS A Sass Mixin That debug & check the accessibility of your designs
Stars: ✭ 132 (-20.96%)
Mutual labels:  mixins, scss, sass-mixins
Skeleton Sass
Skeleton Sass is a highly modular version of Skeleton CSS
Stars: ✭ 151 (-9.58%)
Mutual labels:  mixins, scss, sass
Sassmagic
Collection best of Sass mixins and function
Stars: ✭ 795 (+376.05%)
Mutual labels:  scss, sass, sass-mixins
Breakpoint Slicer
Slice media queries with ease
Stars: ✭ 332 (+98.8%)
Mutual labels:  scss, sass, sass-mixins
Sscss
Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.
Stars: ✭ 119 (-28.74%)
Mutual labels:  scss, sass, sass-mixins
Bourbon
Bourbon is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.
Stars: ✭ 9,065 (+5328.14%)
Mutual labels:  scss, sass, sass-mixins
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-26.95%)
Mutual labels:  mixins, scss, sass
Gulp Starter Kit
A simple Gulp 4 Starter Kit for modern web development.
Stars: ✭ 134 (-19.76%)
Mutual labels:  scss, sass
Basis
A lightweight responsive Sass/CSS framework based on flexible box.
Stars: ✭ 133 (-20.36%)
Mutual labels:  scss, sass
Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-18.56%)
Mutual labels:  scss, sass
Shards Ui
🎨Shards is a beautiful & modern Bootstrap 4 UI kit packed with extra templates and components.
Stars: ✭ 1,718 (+928.74%)
Mutual labels:  scss, sass
Musubii
Simple CSS Framework for JP
Stars: ✭ 138 (-17.37%)
Mutual labels:  scss, sass
Expressjs
This is the repository for my course, Building a Website with Node.js and Express.js on LinkedIn Learning and Lynda.com.
Stars: ✭ 143 (-14.37%)
Mutual labels:  tutorial, training
View All Similar Projects ➔

Sass Essential Training

This is the repository for my course Sass Essential Training. The full course is available on LinkedIn Learning and Lynda.com

Sass Essential Training

Learn the fundamentals of Syntactically Awesome Stylesheets (Sass), a modern web development language that helps you write CSS better, faster, and with more advanced features. Ray Villalobos shows you the best way to install Sass and work with its main features: variables, nesting, partials, and mixins. Plus, learn how to use SassScript to create complex functions from Sass lists and control statements.

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add /tree/BRANCH_NAME to the URL to go to the branch you want to peek at.

Branches

The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch 02_03b then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A b means that this is how the code looks at the beginning of the video, an e means that is how the code looked at the end of the video.

You may find additional branches that correspond to other states, so for example, you may see a t, which means this is a target branch. A target branch is something I use during development or updates of a course and it's for a branch that I'm working towards. For the purposes of taking a course, you may ignore any additional branches. The master branch usually has the state of the project as I'm working through it and the final state of the code when I finish the course.

Installing

  1. Make sure you have these installed
  2. Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) > git clone CLONEURL
  3. CD to the folder cd FOLDERNAME
  4. Run npm install to install the project dependencies
  5. Run gulp to start live preview server

More Stuff

Check out some of my other courses on LinkedIn Learning and lynda.com. You can follow me on LinkedIn, read my blog, follow me on twitter, or check out my youtube channel.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].