1,098 words

Sass Media Query Mixin


  Media queries mixins

$sm-mobile: 320px;
$mobile: 480px;
$lg-mobile-width: 640px;
$tablet-width: 768px;
$desktop-width: 1024px;
$wide-with: 1440px;

@mixin mobile {
  @media ( max-width: #{$tablet-width - 1px} ) {

@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {

@mixin desktop {
  @media (min-width: #{$desktop-width}) {

How to Delete a Git Branch (Local and Remote)


// delete branch locally
git branch -d localBranchName

// delete branch remotely
git push origin --delete remoteBranchName

More at: https://www.freecodecamp.org/news/how-to-delete-a-git-branch-both-locally-and-remotely/

Gulp v4 Sass + Browser-sync


Quick gulpfile.js script to compile Sass and sync with browser for future reference.

More at: https://gulpjs.com/

const gulp = require("gulp");
const sass = require("gulp-sass");
const browserSync = require("browser-sync").create();
const concat = require("gulp-concat");

function style() {
  return gulp
    .pipe(sass().on("error", sass.logError))

function watch() {
    // server: {},
    proxy: "http://localhost:8888/gitema/",
    notify: true,
  gulp.watch("./assets/scss/**/*.scss", style);
  gulp.watch("./*.php").on("change", browserSync.reload);
  gulp.watch("./assets/js/**/*.js").on("change", browserSync.reload);

exports.style = style;
exports.watch = watch;

Magento Useful Commands


bin/magento admin:user:create

bin/magento cache:flush

bin/magento module:status

bin/magento module:disable [plugin_name]

bin/magento dev:template-hints:enable  /  disable

bin/magento c:f or c:f (clean or flush)

bin/magento setup:static-content:deploy

bin/magento deploy:mode:show

bin/magento setup:di:compile

php bin/magento setup:upgrade

rm -rf /pub/static/*

rm -rf  /var/view_preprocessed/*

rm -rf var/cache/* var/page_cache/* var/generation/*

CSS Architecture


Why Define a system?

Having a system helps with comunication and maintanability, specialy If you are working in a team. The system it self doesn't really matter a lot, as long you have a system and everybody is onboard with it, you're good to go.

Before starting a "design table" or "asset panel", I like to think and organize my thougths on what technologies I'm going to use.

I created a system for my self that consists in some rules I like to follow, lets dive in to it::

First reach for Grid, if not appropriate, reach for Flex

Grid and Flex are ment to be used together, that said, try to first solve the problem with Grid, and then Flex.
Think of Grid as a tool to position things 2D and Flex to position things in one dimension, row or column.

Why I prefer Grid?

  • Less media queries
  • More organize and easy to visualize. (I highly recommend Firefox devtools for that)
  • Named grid areas avoids complexity

Color Palette

Define a color palette, 2 to 5 colors is more then enought to start, organize them as primary color, secondary color, darker/lighter primary, darker/lighter secondary and so on.

We are going to assign those color to variables, in that way our website can be easely twicked in the future.

Also, define your blacks, whites and greys. (You're going to need them)

This will look like this:


--primary: #059ECC;
--primary-dark: #177B99;
--secondary: #FFD7CC;
--secondary-dark: #D6C5C8 ;
--white: #E1E7F7;

Or if you you're using Sass

$primary: #059ECC;
$primary-dark: #177B99
$secondary: #FFD7CC;
$secondary-dark: #D6C5C8 ;
$white: #E1E7F7;

Tip: Color Theory, Color Harmony

I recommend looking for a color pallet in websites like and from there you can tweek them to taste:


Obs: As an extra, we could also choose colors for a dark theme.

Use rems instead of px

Define a base font size in pixels for the HTML, and from there, use everything in rems. I tend to use 10px as a base, just because is easier to do the math when needed, and after using it for a while, I started to know before hand how the components are going to relate to each other and show up on the page, this keeps the "guess work" to a minimum.

I don't like to use em becouse thouse are calculated in relation with the parent element, with time, things gets crazy and hard to maintain.

Why you should avoid using em:

Media Queries

Define media queries screen sizes, I like to folow the Bootstrap's values then adjust acordanly to the project if needed.

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Ref: https://getbootstrap.com/docs/4.0/layout/overview/

If you are using SASS, you can have mixins ready to use wherever you need. This will look like this:

@mixin bp($point) {
        @if $point == wide {
            @media ('min-width': 1200px) { @content ; }
        } @else if $point == desktop {
            @media ('min-width': 992px) { @content ; }
        } @else if $point == tablet {
            @media ('min-width': 768px)  { @content ; }
        } @else if $point == lg-mobile {
            @media ('min-width': 576px)  { @content ; }

Because we are in a "Mobile-First" world, is always better to think in min-size first. As I said in the begining, the system is more important than the rules it self, the important thing is conscistency and knowing how the pieces work, so you don't have to keep comming back to check how thing's were done. (Did I use max-screen or min-screen?)

Semantic HTML

Always write html semanticly, in the beggining It might feel like it doesn't matter, but its important for 2 mains reasons, semantic html is important for assebility, screen readers have a hard time reading badly composed html, and also, when your website starts to get bigger with tones of components flying around, it gets very hard to find and fix bugs.
If yo html inu compose you a semantic and organized way from the begging, you will save a lot of time in the future, and also, you have a more pleasant development experience.

Have a system for organizing your CSS classes

I recommend using BEM just because is a stablished system, you will encounter it more likely then not.

Here's some links to get you going with it:

Coming up next

I'm planning to do a series on building a "asset panel" or "UI Kit" and put all this concepts into practice.

Remeber, consistency is one of the mos important things.

Links that might help:

SASS, Beginner to Pro Tutorial

CSS Variables In Our Design System - Codeblog

Use BEM (link to BEM instructions)

Design Systems with Brad Frost - The State of the Web



Atomic Design by Brad Frost

Layout and Composition

Composition over inheritance


Sass vs Scss

A few reasons I love Sass

Sass website:

CSS naming conventions