By tag: html

Develop right in Chrome DevTools ... with Sass too! (Google I/O 2013)

*

Web Components in Action (Google I/O 2013)

*

Jekyll and static sites (The Web Ahead on 5by5)

In this podcast, Jen Simmons talks to Young Hahn and Dave Cole on the Web Ahead (on the 5by5 network) about Jekyll and static sites. Lots of interest here.

*

Building a simple banner heading effect using HTML and CSS

Add a bit of style to headings or other information with a pure HTML and CSS banner effect.

Let's look at how to create the effect used in this box. First we need some sample HTML to use in our examples:

...
*

Building a banner heading effect using HTML and CSS: Part 2

We take a look at how to add a bit of extra flourish to a pure HTML and CSS banner. We’re going to add a tail to an existing banner. You’ll need to use the code for the effect already created in part 1.

Le...

*

Multi-column lists losing their bullets

If you’re trying the CSS columns property, or its various browser prefixed variants, you may notice your bullet points disappearing. This can happen on Chrome and to a lesser extent on Opera.

The Problem

Take the following HTML for a list:

...
*

A simple Nanoc filter to compress HTML using Nokogiri

When using Nanoc, there are standard filter options for compressing CSS and minifying javascript, but there’s no equivalent for HTML. However, we can use Nokogiri to trim our HTML a little by removing some whitespace and getting rid of comments.

To do this, we’re going to build a custom Nanoc filter. Create a new file in lib/f...

*