Tag: CSS

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

Enter npm init to interactively create a package.json file. Accepting the default options is okay for now. The metadata in this file can be updated later as needed.

npm init

A package.json file should now exist in the root of the project. This json file is used to manage the project dependencies, set configuration options for supported modules and run npm scripts.

Create an index.html file in the project root with an unordered list of placeholder images. Include the dist/style.css link in the document head and dist/app.js link before the closing body tag. Add a class attribute with the value slider to the unordered list element. This sets it apart for selecting with our script and style code: <ul class="slider">

Note that the ellipsis … in the code snippet above is not a part of the actual code and is there only to denote code that is being skipped and not applicable to the example. Keep this in mind when you encounter an ellipsis in the remaining snippets. To view the entire file, examine the source code.

Using the npm-run-scripts alias npm run to execute the build.

npm run build

For development, use npm run dev to watch for changes and build incrementally when changes are saved.

You should now have a new dist folder in the root of the project where the Webpack bundle is output.

Basic Webpack 3 Sass preprocessor workflow using cssnano for postprocessing minification and optimization. The AutoprefixerPostCSS 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

Enter npm init to interactively create a package manifest file (package.json). As devDependencies are installed using the --save-dev option, the package.json file will be updated so the node modules can be re-installed using npm install or with its shorthand alias npm i.

npm init

Webpack 3

Webpack is a module bundler that generates static assets representing modules and their dependencies from a generated dependency graph. This enables a modular approach to web development that can be extended by using loaders with tasks that are performed when bundling files together.

Webpack version 3 was released earlier this year and as of this writing, version 3.8.1 is the latest. Install the latest version using npm install.

npm install --save-dev webpack

Open the project folder in a code editor, such as VS Code. Inspect the package.json file, webpack with its version number should now be listed under the devDependencies node. For example:

Throughout this tutorial you will encounter an ellipsis … in the code examples. These are not a part of the code and are there only to denote code that is being skipped and not applicable to the example. To view the entire file, examine the source code.

Install Loaders

Before we define the loaders in the webpack configuration, let’s install them.

SASS Loader compiles Sass to CSS and since it requires node-sass, install both sass-loader and node-sass.

To handle processing of relative URLs in the Sass for things like fonts and images, see part II.

Define Loaders

In our configuration, we are extracting the CSS to its own file with the ExtractTextPlugin. Therefore we will define our loaders for processing Sass and CSS in the plugins use option. The fallback option is used when the CSS is not extracted.

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. However, you still need to include the mixin with applicable parameters throughout your Sass code which requires knowing which properties might need prefixes.

With Autoprefixer, you do not need to think at all about which properties need prefixes. Simply use only the-un prefixed property name in your Sass or CSS code and Autoprefixer will check the Can I use database to append prefixes as needed while understanding the specification differences.

cssnano

I don’t think I could write it any better than the folks at cssnano did, “cssnano takes your nicely formatted CSS and runs it through many focused optimisations, to ensure that the final result is as small as possible for a production environment.”. cssnano includes Autoprefixer in it’s list of transforms, therefore, when you install cssnano you also get Autoprefixer.

Workflow

This simple workflow uses the Gulp streaming build system to process the Sass code, add vendor prefixes with Autoprefixer via cssnano to optimize into production ready css. In this gulpfile.js, note cssnano’s autoprefixer option which accepts an array of browsers to support.

The package.json file contains project metadata and lists dependencies that are available on npm. This is useful to have when you want to re-install or update the dependencies with the npm install command.

This code sample shows a CSS only solution to define different styles for an element based on the total number of elements. This is handy when you have dynamic list content and want to style it differently for a certain number of list items.

This code sample shows how to create hotspots for a responsive image entirely in CSS and HTML. When the image scales according to changes in viewport width, the hotspots and their respective tool tips will move accordingly.

margin: auto

Apply this declaration to the element that you want to center. So, in order to center the Text Block, replace margin-bottom: 20px; with margin: 0 auto 20px auto; which is shorthand for margin-top: 0; margin-right: auto; margin-bottom: 20px; margin-left: auto;.

Vertical centering

This can be an issue for consistent cross browser results when IE 8 needs to be supported, especially when the height of the parent element varies. Here are a couple of ways to vertically center content.

This will center the image inside of a element when the elements height and/or width is smaller than the image. This works well when you have image assets of various aspect ratios that you want to display as thumbs that are the same size.

This tutorial covers using Git to clone, branch and merge the latest Bootstrap source code, modifying and compiling your modifications to the source LESS variables using Grunt and viewing your compiled changes with a local Node.js web server.

You could just use the Bootstrap customize and download form to customize the LESS variables and download a pre-compiled Bootstrap package. However, as of this writing, the user interface at the form doesn’t provide a preview option to monitor your changes before you download the package. And since the Bootstrap version 3 source now includes Grunt, we can use it to compile the LESS source and preview the changes via localhost.

Source Code

Using Git, clone the Bootstrap repository. To keep our changes to the source separate and to make upgrading the bootstrap source easier, create a develop branch.

Load a Bootstrap example

I like to use the Node.js web-server.js that is bundled with the AngularJS tutorial. For example, here is how I start the NodeJs web-server.js that is included in the angular-phonecat repository on GitHub. This example presumes your CLI is in the bootstrap directory and the angular-phonecat repository is cloned to its own directory one level up.

UPDATED 1/4/2014

Repository contents rearranged over the holidays and the examples have been moved to the docs folder. You can always take a look at the latest source on GitHaub.

Modify LESS variables

Open the bootstrap/less/variables.less file in a text editor and find the @navbar-inverse-color and @navbar-inverse-link-color variables and change their values from @gray-light to @gray-lighter. Also, find @navbar-inverse-bg and change its value to #FF8C00.

Install node modules and compile LESS

The Bootstrap source contains a package.json for node module installation and a fully configured gruntfile.js to run Grunt tasks.

Open another bash window CLI and navigate to the bootstrap directory to install the node modules. After the node modules are installed, run the Grunt dist-css task which compiles the less files to dist/css/ followed by task dist-docs which copies the css files created in the previous task to docs/dist/css/.

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.

If you have not done so already, make sure that you have Node.js, Grunt CLI and Git installed. For Windows systems, after installing Git, you may decide to use the Git bash shell for your CLI (command line interface) instead of the Command Prompt.

Install Grunt’s command line interface (CLI) globally.

#install grunt CLI
$ npm install -g grunt-cli

Source Code

Using Git, clone the GruntTutorial repository. This contains all the source code for the tutorial. As you work through the tutorial, you will be instructed to use git to reset the source code so it matches the step at that point. This will revert the source code to it’s original state for the respective tag and thus overwrite any changes you have made to it.

GruntTutorial – bash

Step 2: Combine and Minify Javascript files

# reset to step 2
$ git checkout -f step-02

Gruntfile.js is added to root of the project to specify the modules configuration, define tasks and load plugins. This Gruntfile.js specifies an uglify plugin to perform JavaScript minification. The banner option creates a comment on the first line of the minified file that is output. The JavaScript source (src) and destination (dest) paths are set in the build properties. Since our build source path has a wildcard * before the js filename extension, all of the js files in that directory will be minified into a single JavaScript file named grunt-tutorial.min.js as specified in the build destination property.

For the Sass compile with the Compass & Watch Grunt plugins, you will need to have the RubyInstaller for Windows. As of this writing, use Ruby 1.9.3 installers. These provide a stable language and a extensive list of packages (gems) that are compatible and updated. During the setup, check the option to Add Ruby executables to your PATH. After installing Ruby, install Sass and Compass using the Start Command Prompt with Ruby.

Start Command Prompt with Ruby

Install compass and watch Grunt plugins

By running these npm install commands with –save-dev, the package.json file will automatically be updated to include these two new dependencies.

Edit and save one of the Sass (.scss) files. The watch task waits for changes to files and then fires a task. In our Gruntfile, the watch is configured to run the the compass task whenever a .scss file is updated. The compass task is configured to compile the Sass files specified in the sassDir property (src/sass/) and output to the cssDir specified (build/css/).

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.

Easy Browsersync Server

Easy Browsersync Server is an HTML 5 Template that comes with a NPM package config to install a minimal set of development tools including a Browsersync server and Gulp task runner. After installation, a simple gulp server command loads the html 5 template in a browser using Browsersync. Any edits made to the html or sass (scss) files are processed instantly and reloaded into the browser.

CSS 3 includes all of the CSS 1 and CSS 2.1 properties, plus the new properties listed below. CSS 1 properties are listed on the CSS 1 page and the CSS 2.1 properties are listed on the CSS 2.1 page. Also listed on this page, are the CSS 3 Selectors.

Determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property. Browser support: Chrome 1.0; Firefox 4.0; IE 9; Opera 10.5; Safari 3.0.

Specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box. Browser support: Chrome 1.0; Firefox 3.5; IE 5.5; Opera 10.5; Safari 1.0.

CSS 3 Selectors

CSS 2.1 includes all of the CSS 1 properties plus the CSS 2.1 properties listed below. CSS 1 properties are listed on the CSS 1 page. CSS 3 properties are listed on the CSS 3 page. Also listed on this page, are the CSS 2 Selectors.

Specifies the minimum number of lines to be displayed at the bottom of the page. Typically used to control how page breaks occur. Browser support: Chrome 25.0; Firefox unsupported; IE 8; Opera 9.2; Safari unsupported.

Defines how many minimum lines must be left on top of a new page, on a paged media. In typography, a widow is the last line of a paragraph appearing alone at the top of a page. Browser support: Chrome 25.0; Firefox unsupported; IE 8; Opera 9.2; Safari unsupported.

Specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one. Browser support: Chrome 1.0; Firefox 1.0; IE 4; Opera 4.0; Safari 1.0.

Specifies all of the background values in a single declaration. Browser support: Chrome 1.0; Firefox 1.0; IE 4; Opera 3.5; Safari 1.0. Note: For CSS 3, the shorthand property has been extended to support multiple backgrounds and the new background-size, background-origin and background-clip properties.

Determines whether the background image’s position is fixed within the viewport, or scrolls along with its containing block. Browser support: Chrome 1.0; Firefox 1.0; IE 4; Opera 3.5; Safari 1.0. Note: For CSS 3, the shorthand property has been extended to support multiple backgrounds and the local value.

Specifies a prioritized list of font family names and/or generic family names for an element. Browser support: Chrome 1.0; Firefox 1.0; IE 3; Opera 3.5; Safari 1.0. Note: For CSS 2, added support to set the element’s font-family to a system font-family, using specific keywords.

Specifies the size of the font – specifically the desired height of glyphs from the font for an element. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of em and ex length units. Browser support: Chrome 1.0; Firefox 1.0; IE 5.5; Opera 7.0; Safari 1.0. Note: For CSS 2, added support to set the element’s font-size to a system font-size, using specific keywords.

Specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element. Browser support: Chrome 1.0; Firefox 1.0; IE 4; Opera 7.0; Safari 1.0.

Specifies the minimal height of line boxes for block level elements. For non-replaced inline elements, specifies the height that is used in the calculation of the line box height. Browser support: Chrome 1.0; Firefox 1.0; IE 4; Opera 7.0; Safari 1.0.

Specifies the margin space on the top of an element. This property has no effect on non-replaced inline elements, like <tt> or <span>. Browser support: Chrome 1.0; Firefox 1.0; IE 3; Opera 3.5; Safari 1.0.

Specifies how much horizontal space should be left before the beginning of the first line of the text content of an element. Browser support: Chrome 1.0; Firefox 1.0; IE 3; Opera 3.5; Safari 1.0. Note: For CSS 3, added the hanging and each-line keywords.

CSS 1 Selectors

During module development, to see all of the js and css files in firebug or your favorite client debugging tool of choice, turn off the file combination provider. In this section at or near the bottom of your web.config, set the provider enableCompositeFiles attributes from true to false as shown in the example below.

This Tutorial is written with Drupal 7 in mind. However, it can be applied to any website.

While upgrading and redesigning thebga.org golf association website, I decided to figure out how to have a random full page background part of the design. Drupal 7 makes it easy to include js and keep it, the theme and templates all separate from the Drupal core. The key is separation of your theme and it’s modules from the Drupal core and it’s modules. The Zen theme and Starter Kit make this very easy to accomplish.

Create or add this code to a javascript file in your themes “js” folder. I saved the file as random-bg.js (/sites/all/themes/thebga/js/random-bg.js).

CSS 3 is divided into several separate documents called “modules”. Each module adds new capabilities or extends features defined in CSS 2, preserving backward compatibility. As of June 2012, there are over fifty CSS modules published from the CSS Working Group, four of them published as formal recommendations:
2012-06-19 : Media Queries
2011-09-29 : Namespaces
2011-09-29 : Selectors Level 3
2011-06-07 : Color
Continue Reading

CSS level 2 revision 1, often referred to as “CSS 2.1”, fixes errors in CSS 2, removes poorly supported or not fully interoperable features and adds already-implemented browser extensions to the specification. After being reviewed by the W3C Advisory Committee, it was finally published as a W3C Recommendation in June 2011.
Continue Reading