Below you will find pages that utilize the taxonomy term “Sass”

Post

How To Create a WordPress Shortcode for flickr Albums

How to create a WordPress custom shortcode to display photos from flickr. This post documents using the Slick Lazy Load Photo Grid along with the flickr API to render photo albums in Wordpress Posts wherever the shortcode is entered. Webpack 4, autoprefixer, and babel are included for building the JS and CSS. Requirements flickr API key. From their API page, select the Create an App link for more information on how to request an API key.
Post

Completely Blank (no css) _s WordPress Starter Theme

This post documents how to take the WordPress Starter Theme _s or underscores, if you like and build only the CSS components you want using Webpack 4. This modern toolset also includes autoprefixer and browserlist support. You might only want the normalizer and accessibility modules, any combination of modules, or none at all to start with a completely blank slate. This build process will give you a solid foundation and all the latitude you need.
Post

Completely Blank (no css) _s WordPress Starter Theme - Page 2

In the src/js/index.js javascript entrypoint file, import the style Sass entrypoint as follows. index.js import '../sass/style.scss' Add this bit of code to the .babelrc congfiguration file. Consult the babel docs for config changes based on the babel version as needed. .babelrc { "presets": ["env"] } Add this code to require the autoprefixer postcss plugin to the postcss.config.js configuration file. postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] } The package.
Post

Webpack 3 Sass cssnano Autoprefixer Workflow II

This follow up to the basic Webpack 3 Sass preprocessor workflow I wrote about here includes how to handle processing of relative URLs in the Sass for things like fonts and images. Ken Wheeler’s popular Slick carousel contains these asset types in its Sass, so let’s use that for this exercise. Getting Started Prerequisite: Node.js with npm. Navigate to the project root in your CLI, such as Terminal, Cygwin or PowerShell.
Post

Webpack 3 Sass cssnano Autoprefixer Workflow II - Page 2

Sass Install the loaders to preprocess the Sass files. SASS Loader compiles Sass to CSS, also requires node-sass. npm install --save-dev sass-loader node-sass PostCSS Loader processes CSS with PostCSS. npm install --save-dev postcss-loader CSS Loader resolves import at-rules and url functions in the CSS. npm install --save-dev css-loader Style Loader inlines <style></style> in the DOM. npm install --save-dev style-loader URL Loader and Resolve URL Loader handle relative paths.
Post

Slick Lazy Load Photo Grid Using Webpack 3

How to layout and lazy load images in a flexible grid similar to how facebook displays them in a post. Selected images open a lightbox for previewing within a carousel. Image alt text is converted into a caption below the image. YouTube Video Features Lazy image loading ES6 transpiler JavaScript source maps Sass CSS preprocessor PostCSS Autoprefixer CSSnano Webpack 3 Demo Source Code Getting Started If you don’t already have Node.
Post

Webpack 3 Sass cssnano Autoprefixer Workflow

Basic Webpack 3 Sass preprocessor workflow using cssnano for postprocessing minification and optimization. The Autoprefixer PostCSS plugin is also included in this configuration to automatically add vendor prefixes for only the browsers that need to be supported. Before getting started, install Node.js and NPM. The default package manager for the Node.js JavaScript runtime environment, NPM is included with the Node.js installation. Project Navigate to the project root in your CLI, such as Terminal in OS X, PowersShell in Windows.
Post

WordPress Twenty Seventeen Theme Sass

These Sass modules make customizing the style.css a lot easier for the new business focused Twenty Seventeen default theme for WordPress 4.7 released a couple weeks ago. January 14, 2019 – Sass has been updated for the Twenty Seventeen theme version 2.0 which comes bundled with WordPress version 5.0.3 released on January 9, 2019. The individual Sass modules in this repository represent each of the WordPress Twenty Seventeen style.
Post

WordPress Twenty Sixteen Theme Sass

I recently created individual Sass modules for each of the WordPress Twenty Sixteen style.css stylesheet numbered and annotated sections. Additionally, the fonts and colors have been converted into Sass variables. All of this makes customizing this theme easier. May 25, 2018 – Sass has been updated for the Twenty Sixteen theme version 1.5 which comes bundled with WordPress version 4.9.6 released on May, 17, 2018.
Post

Sass Workflow Using cssnano and Autoprefixer

This Sass preprocessor workflow uses cssnano for postprocessing minification and optimization that includes Autoprefixer to add vendor prefixes for only the browsers that need to be supported. UPDATE: Webpack 3 version (11-12-2017) Autoprefixer Without Autoprefixer, adding in vender prefixes is done in the Sass code, typically with a mixin to append every known prefix for a property. This more advanced mixin to prefix properties at least accepts prefix parameters for more control over which ones to use.
Post

Bourboneat Wordpress Theme

I have created a new Wordpress starter theme for building custom themes designed for Wordpress version 4.1 and later. The theme uses the Bourbon Sass library and it’s Neat semantic grid components for a lightweight and modular responsive design. The header and footer designs were taken from the Bourbon Refills collection. Also included are IcoMoon font icons which can be easily updated using the IcoMoon app. Gulp’s build system is used to compile and minify Sass and Javascript modules into optimized CSS and Javascript.
Post

Visual Studio MVC Bourbon Web App

It is now 2015 and with it a new version of Visual Studio that includes tools for Bower front end package management, Node Package Manager (NPM) and the Grunt JavaScript Task Runner. Not surprisingly, Microsoft has its own way of implementing Grunt, Bower and Node Modules in their upcoming Visual Studio debut. You don’t have to wait for Visual Studio 2015. Grunt, Bower, Node Modules and Bourbon can easily be included in a Visual Studio 2012 MVC 4 web application.
Post

Bourbon

This post is not about a barrel-aged distilled spirit made primarily from corn. Instead, it is about a Sass mixin library. To add Bourbon to your web project, visit the Bourbon GitHub repo and take a look at the requirements. The first requirement is obviously Sass, since this is a mixin library for it. As of this post, the latest Bourbon requires Sass 3.3+. To install or update Sass you will need to have Ruby installed.
Post

Grunt JavaScript Task Runner

This tutorial describes how to setup and use the Grunt JavaScript task runner to automate repetitive tasks such as minification and compilation. Grunt is installed using npm, the Node.js package manager. You will also need Git to work with the tagged source code. This makes it easy to reset and compare your working copy of the code at each step. I discovered commit tags while using the AngularJS tutorial.
Html

HTML 5 Template

Template with html5.js shiv * <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Super Site!</title> <meta name="description" content="My Super Site!"> <meta name="author" content="My Name"> <link rel="stylesheet" href="css/styles.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html> * Inspired by HTML5 Boilerplate Emmet If the Emmet plugin is installed in your code editor, you can use the ! alias or html:5 abbreviation then tab to stub out the template.