2018-Ongoing
Goals
  • Make reusable SCSS components and mixins
  • Make a minimal starter framework that can apply to small and medium sized projects
  • Define linting, spacing, and variable name conventions for consistency

Project Overview

Basic SCSS starter is exactly what it sounds like, a basic way to get started with SCSS. Getting started from scratch is easy enough, but I found myself re-using similar folder structures and mixins over and over again. That’s where this project comes in. This starter aims to create a small framework, without being opinionated on styling. It’s really more of a variable, mixin, and folder structure I use to establish consistency across small to medium sized projects.

Process

The process for starting this was out of necessity. I found myself re-writing the same gulp file for compiling SCSS and auto-prefixing, so why not just create that same file and commit it to GitHub? Now all I had to do was git clone and I was all good.

From there, I also started adding in common variable elements, such as responsive breakpoints, spacing elements, and so on. I also found it helpful to create responsive spacer elements and flex-box classes. Since I reused the same framework across many projects, I started becoming familiar with the helper classes/structure. This allowed me to get up and running quickly for future projects.

Technologies Used

Gulp and compilation

Nowadays, the stacks I use already have their own build process, so I usually only need the SCSS folder. Though, if I ever need to run my own build, the gulp file allows for ES6/babel, file splitting, auto-prefixing, and a few more goodies. The libraries used for this can be found in the ‘gulpfile.js’ file on the repo.

Other than the gulpfile, this framework is as simple as possible, and utilizes typical SCSS functions such as mixins, extends, and variables.

Want to check out some code demos?

Check out code samples written in JavaScript, React, Node, and more

Demo 1
Converting jQuery Blog Post Component To Vanilla JS

I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]

Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript

I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]

Demo 3
Defining Reusable Column Extends with SCSS

Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]

View all 5 code samples