MesmericDigital

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

Get the synth wave glow working for VS Code on Mac

These notes are pretty much the same steps as the two extensions list, it's just that I had to collate them together because neither seems to list it fully in the proper order.

Install Synthwave ’84/Synthwave + Fluoromachine theme on VS Code (I used the Fluoromachine one)
Install Custom CSS and JS Loader
Command + Shift + P to open command palette > "Preferences: Open settings (JSON)"

Web Components Resources

Specs / standardization

W3C Introduction to Web Components - explainer/overview of the technologies

Tailwind CSS best practices

Utility classes

When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

Resources for learning web design & front-end development:

ONLINE

Design

##Sass Functions Cheat Sheet

RGB Functions
HSL Functions
Opacity Functions
Other Color Functions
List Functions
Map Functions
Selector Functions
String Functions

	require.config({
	baseUrl: '/backbone-tests/',
	paths: {
	'jquery' : '/app/libs/jquery',
	'underscore' : '/app/libs/underscore',
	'backbone' : '/app/libs/backbone',
	'mocha' : 'libs/mocha',
	'chai' : 'libs/chai',
	'chai-jquery' : 'libs/chai-jquery',
	'models' : '/app/models'

	<?php

	// Based on <https://github.com/mecha-cms/x.minify>

	namespace x\minify\_ { // start namespace

	$n = __NAMESPACE__;

	\define($n . "\\token_boolean", '\b(?:true\|false)\b');
	\define($n . "\\token_number", '-?(?:(?:\d+)?\.)?\d+');

	<?php
	// PHP memory limit for this site
	define( 'WP_MEMORY_LIMIT', '128M' );
	define( 'WP_MAX_MEMORY_LIMIT', '256M' ); // Increase admin-side memory limit.

	// Database
	define( 'WP_ALLOW_REPAIR', true ); // Allow WordPress to automatically repair your database.
	define( 'DO_NOT_UPGRADE_GLOBAL_TABLES', true ); // Don't make database upgrades on global tables (like users)

	// Explicitely setting url

	.rounded-corners-gradient-borders {
	width: 300px;
	height: 80px;
	border: double 4px transparent;
	border-radius: 80px;
	background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	}