CSS regions, exclusions, shapes and new publishing paradigms

Introduction

Smashing Magazine Newspaper Designs article shows examples of what printed media can do. Having learned to use InDesign for ePub-based ebooks I’ve come to respect the power and flexibility of printed media… working primarily in web environments I’ve always wondered what it would take to do similar layouts.

Over the last year at the two HTML5 Developer Conferences I’ve heard more and more about new CSS technologies that would make print-like layouts possible:Regions, Shapes and Exclusions.

Adobe has been championing these technologies, not surprising since they also create DTP and Layout programs.

While these technologies (Exclusions, Shapes and Regions) are still experimental and supported by a limited number of browsers, it is still an exciting possibility for designers and developers. We can match print layouts (almost) in our web content.

Supported browsers

These technologies are still experimental and subject to change. Best place to keep up to date with the development of these CSS specs is the W3C site. Adobe may also have updated articles and tutorials.

The following browser supports the standard:

  • IE, IE Mobile (-ms- flag)
  • Webkit nightly (-webkit-flag)
  • iOS (-webkit- flag)
  • Fully supported on iOS 7
  • Chrome Canary
    • Enable with Enable CSS Regions flag
    • For Chrome 23 and later enable with: Enable experimental WebKit features)
    • Latest Chrome Nightly uses Enable Experimental Web Platform Features to enable regions

Can we use this for publishing projects now?

While the technology is available and work to reach full recommendation status continues on the W3C’s CSS working group we can still play with the technology and crete prototypes.

It may be a while, if ever, before ebook readers’ rendering engines catch up wit the standard but let’s remember that we can build web applications that will run on both Kindle Fire and iOS devices. These applications can use polyfills to accomplish the same or similar functionality using something like Modernizr.load or similar loader libraries. How to do polyfill work will be explained later.

Regions

Regions allow you to create flows of content inside your web content.

For those familiar with InDesign think of regions as threaded text frames that can then be laid out and changed as needed without having to change the layout of all spreads just to make one change.

For those not familiar with InDesign, regions and flows look something like this:

Getting Started

In supported browsers the code for something like the example above is fairly simple. Code First, explanation later

CSS code:


#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
}

.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
  height:300px;
  border: 1px solid #f00
}

The #source element creates the flow for our regions. This text will disappear from the regular flow of text and will be placed in our regions.

Every container with the class .region will be used to flow the text into. We can position the regions any way we want and use other CSS tools such as flexible boxes layouts, animations and transitions to place our content.

Combining the HTML below:

<div id="source">Some long chunk of text goes here</div>

<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>

with the CSS that we looked at earlier will produce a result like the one in the Codepen below:

See the Pen CSS Regions Example #1 by Carlos Araya (@caraya) on CodePen

One thing to notice is that the #source disappears from the flow of your page’s content and only appears once, on our regions. This will be interesting later when we start working with multiple flows in the same layout.

Moving the regions around

We have our basic regions layout… it’s nothing to write home about, is it? Let’s do something about it.

We will change the regions on our HTML to add an ID attribute to each. Our HTML code now looks like this:


<h1>Positioned Regions</h1>

<p>Each of the 4 regions (marked with a 1px red border) below has been positioned using CSS attributes (top and left)</p>

<div id="reflowing-content">
  <div class="region" id='region1'></div>
  <div class="region" id='region2'></div>
  <div class="region" id='region3'></div>
  <div class="region" id='region4'></div>
</div>

<div id="source">Some long chunk of text goes here</div>

I have added a wrapper div to the regions called reflowing-content. This allowed me to use absolute positioning on the regions inside.

I also added individual ID attributes to each region so we can style them independent from each other. In the first version of our code, all regions got the same style… simple but not really useful.

Now that we’ve identified each region on our content we will play with style. We will change the size of the region and play with their positions.


#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
}

#reflowing-content {
  position: absolute;
}
.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
  position:absolute;
  width: 300px;
    height: 400px;
  border: 1px solid red;
}

#region1 {
    left: 10px;
}

#region2 {
  left: 320px;
}

#region3 {
  top: 420px;
    left: 10px;
}

#region4 {
    top: 420px;
    left: 320px;
}

The resulting modifications produce the result below:

See the Pen CSS Regions Example2: Positioned flow by Carlos Araya (@caraya) on CodePen

Making it more flexible

Now we get to what, for me, is one of the hardest parts of working with CSS across browsers and sometimes even within versions of a browser: relative positioning. Whenever I get confused or need a refresher for the different positioning values and the resulting layout, I go to CSS Positioning 101, a 2010 article in A List Apart that still helps me make sense of the mess in the positioning game (or my head, haven’t quite decided where the problem really lies).

The example in the previous section uses absolute positioning to layout the content. It works but it lacks flexibility or responsiveness

So we’ll change the CSS to make the code more responsive while keeping the HTML the same. The new CSS looks like the one below:

html, body {
  width: 100%;  
}

#source {
    -webkit-flow-into: main-content;
    -ms-flow-into: main-content;
    flow-into: main-content;
}

.region {
    -webkit-flow-from: main-content;
    -ms-flow-from: main-content;
    flow-from: main-content;
  position:relative;
  width: 300px;
    height: 400px;
  border: 1px solid red;
}

#region1, #region3 {
    left: 10px;
}

#region2, #region4 {
  left: 320px;
}

Changing the regions’ positioning to relative allows us more flexibility. While we can keep the order of the elements, we can now position them anywhere in the screen we want. In developing the example below I also played with negative values for the top element to move content up from its original position.

See the Pen CSS Regions Example3: Positioned flow with relative elements by Carlos Araya (@caraya) on CodePen.

Will this work with older browsers?

As mentioned earlier, the technology is still experimental and supported wither through css vendor prefixes (Webkit and Microsoft) or behind a flag (Chrome Canary and, I believe, release).

So how do we make it work?

This is where polyfills and resource loaders come into play. While no browser supports regions out of the box, Adobe has provided a polyfill for regions that levels the playing field while the technology is in development.

Modernizr.load (also know as yepnope.js) allows you to conditionally load javascript based on Modernizr tests. The example below makes sure we supports both columns, shapes and regions before we do anything:

Modernizr.load([
  {
    // List of things we need
    test : 
            Modernizr.regions 
            && Modernizr.shapes 
            && Modernizr.columns,
    // Modernizr.load loads css and javascript as needed
    nope : ['css-regions-polyfill.js', 'css-regions-polyfill.css']
  }
]);

In the code above we test to see if the browser supports regions, shapes and columns. If it does then we do nothing, everything is good, we have a cool browser and we move on.

For browsers who do not support the technologies we are using, we load a JavaScript polyfill and the corresponding CSS file; while older browsers will not have the exact same experience as newer browsers, they will get enough of the experience for it to work.

Adobe has created a CSS regions polyfill as a research platform while the standard is finalized. The polyfill introduces the -adobe prefix as a way to avoid collisions with other vendor prefixes and the un-prefixed recommendation.

Final Example

We will take one of our example images from the top newspapers and convert it into a fluid web layout that uses regions and shapes to layout multiple flows of content in the same page.

dmn7

I know that you can do some of the same things that you use regions for. It is true that the CSS uses a combination of flexbox and regions. The looks of the example are a limitation of my skills with CSS and not necessarily a reflection of the recomendations and their implementations.

I will continue working on this final example in Codepen. Comments and feedback asked for and encouraged.

See the Pen apnou by Carlos Araya (@caraya) on CodePen

Outstanding Issues and Questions

As seen in the examples above, learning how to work with regions can be a big challenge but it’s one that I think it’s going to be worth it in the long run; that said there are still some questions I haven’t been able to figure out and that I’m throwing out there for comments and possible solutions 🙂

  1. How do you deal with scroll overflow?

Shapes

The CSS shapes recommendations are like Drop Caps or floated images on steroids.

For the unintiated drop caps are the large letters used in the first paragraph of a chapter or a page. The CSS code for a drop cap may look something like this:

p:first-child:first-letter { 
    float: left; 
    color: #903; 
    font-size: 75px; 
    line-height: 60px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia; 
}

The code above will take the first letter (using the first letter pseudo class) of the first paragraph child (using the first-child pseudo class) and apply the style above.

Why use them

Even when we use the float CSS property we can’t float content fully around an image; you can only float the text to one side of the image and, as far as I know, you are limited to floating block objects.

Shapes give you control of the shape (duh) that the content is floated.

Furthermore, shapes allow to float text both inside and outside the shape you’ve defined. Once again we get close to professional print layouts for our web content.

Supported browsers

Support for shapes is in a much larger flux than regions as no single browser supports the complete recommendation. That said Adobe maintains an up to date compatibility table for the different shape attributes.

How to use shapes?

The simplest example is to use them alongside floated content. In the example below we’ve taken the Dunetocat image from Github and floated it both left and right and used CSS shapes and float attributes.

<div id="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus   vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. </div>
#container{
  border: 1px solid blue;
}

.float-left {
  float: left;
  shape-outside: rectangle(0, 0, 100%, 100%, 60%, 50%);
}

.float-right {
  float: right;
  shape-outside: rectangle(0, 0, 100%, 100%, 40%, 50%);
}

In the codepen below notice the way in which the text wraps around the text around the image and how it is wrapped differently depending on where the object is placed. You can play with the values for the rectangle shape-outside CSS property to see how the wrapping changes.

See the Pen Shape example 2: Shape Inside by Carlos Araya (@caraya) on CodePen

The next easiest example is to use shape inside to put our text inside a shape. We are flowing the content using regions like we did above and then shape the area we are flowing our content to and use the CSS shape-inside property to define the shape we are flowing our content into… in this case a circle.

<div id="region1"></div>

<div id="content" align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Nulla rutrum bibendum mauris et porttitor. Donec luctus, ante vitae tincidunt ultricies, mi leo ultrices lacus, ac elementum urna metus in lorem. Suspendisse non feugiat risus. Nullam congue a est nec consequat. Aliquam gravida sem sit amet tellus vulputate sollicitudin. Cras feugiat est et turpis scelerisque auctor.
<div>
#content {
  flow-into: flow;
  font-size: 11pt;
  hyphens: auto;
}
#region1 {
  flow-from: flow;
  width: 200px;
  height: 200px;
  background-color: #9BBCE3;
  shape-inside: circle(50%, 50%, 50%);

As usual you can play with the CSS definitions on the Codepen below to test what would happen if you make changes in the shape you’re flowing your content into.

See the Pen Shape example 2: Shape Inside by Carlos Araya (@caraya) on CodePen

Getting fancy

There are areas of the regions specification that I will touch on briefly because they are just the “nitpicky” aspects or regions. To check if a property is support in any of the supported browsers (if it’s supported at all) check Adobe’s shapes support matrix

If the browser supports the techniques they are cool to play with and, when they work, they lend a more precise and professional look to our web content.

Defining Complex Shapes

Defining anything beyond simple circles and rectangles is a pain in the butt, isn’t it? Wouldn’t it be nice to have a visual tool available to help us plot all the points on the image? Adobe’s Bear Travis, has made available a collection of tools that can help you when working with complex CSS shapes. The tools are hosted on github at<http://betravis.github.io/shape-tools”> and they are very useful unless you want to learn how to calculate shapes on your own.

Exclusions

Exclusions are a complement to shapes that will tell the browser engine how to float the content. and will let you exercise a much finer level of control regarding how the content is floated.

What they are

Exclusions allow you to float arbitrarily shaped objects using values created using CSS shapes and attach additional properties that will allow you to float the content in different ways.

Exclusions are expressed using CSS attributes wrap-around and wrap-through.

Browser support

Surprisingly, at least for me, exclusions are only supported on IE 10+ (I imagine IE 11 will support them too). If in doubt, please test with Chrome Canary, WebKit Nightly and IE10 or IE11 Developer’s preview.

How to use them

The first example we’ll look at is text wrapping around a straight image. We will use the same code that we used on our first shape example and modify it slightly:

Big Example Title


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus

This is a test

    <p>This is a major quote for this document and we'll have to offset it from the rest of the text</p>
  </div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus vel leo pharetra malesuada. Nulla risus magna, vulputate id elit quis, luctus ullamcorper ligula. Nam at faucibus massa, sed elementum tellus. Proin et dictum ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Cras feugiat est et turpis scelerisque auctor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae tempor ipsum, tempor placerat nisi. Etiam vehicula lectus

With the following CSS:

#container {
  position: relative;
  padding: 20px;
  border: 1px solid red;
  width: 90%;
  text-align: justify;
  column-count: 2;
}

.excluded {
background: #0ff;
opacity: 0.6;
padding: 10px;
width: 150px;
height: 150px;
left: 45%;
position: absolute;
shape-outside: rectangle(0, 0, 100%, 100%);
float:left;
wrap-flow: both;
}

Currently the example above Only works in IE 10 using the -ms vendor prefix

The final example

Larger and more complex example, including both regions and shapes is forthcoming

SASS, SCSS, CSS and Modular Design

What is SASS?

SASS, syntactically aware style sheet, is a CSS pre-processor and scripting language that allows you flexibility in creating your CSS rules. It provides several programmatic tools to make CSS creation easier.

The language is a superset of CSS3, allowing you to create the same CSS that you do by hand but with many additional features.

Install SASS

SASS is a Ruby-based command line utility gem. As such it requires Ruby and the Ruby Gems to be installed on your system. Mac and most Linux distributions come with both programs already installed. Windows users can use the Ruby Installer available from Ruby Forge.

Once Ruby and Ruby Gems are installed you can run the following command:

$ gem update --system
$ gem install sass

Run SASS from the command line

The best way to work with SASS is to run it from the command line (terminal on Linux and Macintosh, Command on Windows). Assuming SASS was installed as explained above with a command like the following:

$ sass \
--update \
--scss \
--style expanded 
--line-numbers --line-comments \
file.scss

This command does the following:

  • –update tells sass that we’re interested in updating the resulting CSS file.

  • –scss indicates that we are using the SCSS syntax on the source file(s)

  • –style expanded tells SASS to use the expanded style for the resulting CSS. SASS has 4 styles: nested ( the default), compact, compressed, or expanded.

I normally use the expanded style as it makes the CSS result easier to read by me and by anyone else who may be working on the project with me.

  • –line-numbers and –line-comments will inset comments regarding the source file and the line number in the original source file for each of your CSS declarations. This makes troubleshooting your SCSS files easier.

  • file.scss is our driver file for the project.

There is another option, particularly useful during development. You can have SASS watch either a file or a directory for changes and automatically

$ sass \
--scss \
--style expanded 
--line-numbers --line-comments \
--watch input-dir:output-dir

The only difference is the –watch input-dir:output-dir which tell SASS both the input directory and the output directory separated by a colon (:) and to update the corresponding CSS files every time a file changes in the input directory.`

Are SASS and SCSS the same?

SASS is the original syntax for the language, developed along similar lines to the HAML project. The SASS syntax eliminates a lot of the complexities of CSS; You don’t need to use {} to begin or end a block, you don’t need ; to finish statements in CSS blocks.

SCSS (Sassy CSS) is a separate dialect or syntax for SASS and it’s the one we will cover in this document. It is fully compatible with CSS (all valid CSS documents are valid SCSS documents) and it provides an easier entry point to SASS for people who are already familiar with CSS.

What makes SASS special?

If you’ve done any amount of work with CSS you will find that you repeat code and patterns over and over in your stylesheets. I’ve also wished that there ways to reduce the number of statements you have to write to accomplish a given task.

SASS provides a set of shortcuts, patterns and functions that assist designers and developers when building CSS content

Variables

Rather than having to type the same name or value over and over again, SASS allows you to create variables that you can use throughout your stylesheets. For example we can define our colors as variables and then use the variables wherever we would use the color definition.

$red: #cc092f;

/* Link Formatting */

a {
  color: $red;
}

The main advantage of variables is that we need to only change one value and then recompile the stylesheet for the changes to be reflected everywhere the variable appeared in the document.

Nesting

How many times you’ve found yourself creating CSS like this and then have to remember which elements were you applying the style to.

h2 {
  font-size: 36pt;
}

h2 .warning {
  color: #f00;
}

h2 .important {
  font-weight: bold;
}

With SASS you can nest the code for your H2 declarations into something that will result in the code above with less typing and a lot more legibility. The SASS code looks like this:

h2 {
  font-size: 36pt;
    .warning {
    color: #f00;
    }
    .important {
  font-weight: bold;
    }
}

In the example above it’s easy to see the result but when you start nesting deeper than two levels you can see how useful this feature is.

Mixins, parameters and default parameters

One of the most powerful features of SASS are mixins; the ability to insert code in multiple places throughout your stylesheets. For example, you can define a mixin for the border properties of an element:

@mixin solid-thin {
  border-width: thin;
  border-style: solid;
}

And call it from anywhere in your document using something like:

.video video {
  margin: 20px auto;
  border-color: $red;
  @include solid-thin;
}

img {
    margin: 0 auto;
    border-color: $red;
    @include solid-thin;
}

Once again, if we need to make changes we make them where the @mixin declaration is made and it will be reflected everywhere we include the mixin using the @include tag.

You can also use parameters to further modularize the content of your mixin, including the use of default parameter.

$radius: 5px !default;

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

and then call it with a value to replace the $radius variable or the default of 5px if the a value for the $radius variable is not set.

.box {
    @include border-radius(10px);
}

You can use mixins to further modularize your code and to make it easier to maintain. The mixins and variables don’t need to be included in the same file. We will discuss modularization later in this document.

Another use of mixins is for testing. Rather than write the same piece of code over and over throughout your stylesheets. For example let’s say that you’re not sure if you want your border to be thin or thick (two predefined values in the CSS standard)

Inheritance

We’ve all found ourselves repeating the same CSS fragments over and over again. Look at the example below (and yes, I know it’s poor CSS coding, but it will do as an example)

.meessage {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: green;
}

.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: red;
}

.warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: yellow;
}

By using SASS extension mechanism we can isolate the repeating code in one place and then only code the differences. The code looks like the one below:

.meessage {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Mathematical Operations

There are times when we want to do something that requires some sort of calculation to produce a result. Sass has a basic set of math operators like +, -, *, /, and %. The example below (taken from the SASS documentation guide) calculates percentages for our article and aside tags.

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

One thing to note. Whatever we do with calculations needs to be converted to the unit we are working with (percentages in this case) otherwise they will be treated as a string

Functions

SASS provides a variety of Functions that make working with CSS easier.

The functions I use the most are Opacify and Transparentize which change the opacity (transparence level) of a given color without us having to setup special variables or functions to do so.

opacify(rgba(0, 0, 0, 0.5), 0.1) 
            => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 17, 0.8), 0.2) 
            => #001

transparentize(rgba(0, 0, 0, 0.5), 0.1) 
            => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) 
            0=> rgba(0, 0, 0, 0.6)

Enhanced @media and @media queries support

@media directives in SASS behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules. If a @media directive appears within a CSS rule, it will be pushed up to the top level of the stylesheet, and use all the selectors inside the rule. For example:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

is compiled to:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; }
}

You can also nest media queries on your SASS stylesheets and the selectors will be combined using the and operator on the top level of the resulting CSS file. This SCSS declaration:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

is compiled to:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; }
}

Finally, @media queries can contain Sass Script expressions (variables, functions, and operators) in place of values in the declarations.

Partials and imports

Partials allow for code modularity. You can create small snippets of SCSS and then call them from another SCSS file.

In order to create the snippets, what SASS calls a fragment, create a normal file but begin the name with an underscore (_). This will instruct the SASS compiler (discussed in detail later in this article) to not include the file in the compilation.

Once you have created all the snippets and are happy with the way they look you can create the main file. The instructions for this process will be discussed in the next section, when we talk about the SASS repository project.

The SASS repository

As I’ve worked in SASS I’ve developed a series of snippets and partial files to make my life easier and to share them with the #eprdctn community and other interested parties. The snippets live in their own github repository which you can clone and send pull requests to.

The idea is that, as we develop new concepts or ideas we can build our partials and share them to get feedback and suggestions for improvements.

How do the snippets work

Partials (also known as snippets) are full SCSS files that are not processed directly when converting the files to CSS but are included on a master file that I refer to as driver using the @import command as shown in the example below, under build index file.

Note that the SCSS files are only referenced by name, not by the full name + extension.

When running the driver file through SASS, it will take each of the partials and add their content to the file that imported them.

Creating your own

In order to create a partial file just write it out as you would any other SCSS stylesheet but name it with an underscore (_) as the first character of the file name; _toc.scss or _images.scss.

Build index file

Once you have your fragments you can add them to your main file (what I call index or driver) using the @import command. The example below will add the content of each partial file in the order they appear in the driver file.

/*
Example of a driver SCSS file. Only this file will get processed when we run the SASS command line tool. It will call all the partials as they are found.
*/

@import "_reset";
@import "_multimedia";
@import "_headings";
@import "_lists";
@import "_columns";
@import "_marginalia";
@import "_toc";
@import "_images";
@import "_footnotes";

Compile Stylesheets

Once you have created your fragments and drivers it is time to compile the SASS files into your final CSS; just like we did when compiling a single SCSS file.

$ sass \
--update \
--scss \
--style expanded 
--line-numbers --line-comments \
file.scss

File.scss in this case is our driver. The fragments will be incorporated in to the driver file in source order.

What we didn’t cover

There is more to SASS than what we’ve covered so far. These areas are not essentials for beginners, or I haven’t figured out how they are essential.

The Compass framework

The compass framework uses SASS to provide tools and utilities to make it easier to work with CSS in your web sites or applications. As part of the utilities it provides a large set of functions to augment those provided by the default SASS installation.

It is installed separately from SASS using rubygems

gem update --system
gem install compass

It may need to be installed as an administrator on OS X and Unix systems.

As interesting as it seems, I have yet to find a compelling enough reason to move to Compass from ‘plain’ SCSS.

One of the biggest drawbacks of compass, in my opinion, is that it requires you to start everything from scratch with its own directory structure; not optimal if you’re moving an existing project to the framework. The SASS documentation states that as of SASS 3.1.0 Compass users can now use the –compass flag to make the Compass libraries available for import. This will also load the Compass project configuration if run from the project root. I have yet to test it.

Some typographical mixins may convince me it’s worth to switch.

Programming-like functions

In addition to the functions discussed above, SASS 3.1.0 introduces functions directly into SCSS files. In the example below (Taken from the SASS documentation page) you can see an example of what these functions look like:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { 
    width: grid-width(5); 
}

SASS functions allow us to be even more flexible in our stylesheets by introducing our own logic to the resulting CSS code.

The experiment continues

I’ll post more as I continue to play and experiment with SASS and related tools.

Stay tuned 🙂

How Does Digital Affect Funding

Gone are the days where you had hoped that a big investor would see your project and hope that you’d make enough money to recoup the investors’ money and maybe, if you’re lucky, make some yourself.

Music, books and games have benefited greatly for crowdfunding. Unlike traditional funding sources is the number of backers and the amounts that people have raised. They also provide with payment system where the money is held in escrow and, in the case of Kickstarter, only paid out if the process is successful in raising all its funds.

Crowdfunding (alternately crowd financing, equity crowdfunding, crowd-sourced fundraising) is the collective effort of individuals who network and pool their money, usually via the Internet, to support efforts initiated by other people or organizations.[1][2] Crowdfunding is used in support of a wide variety of activities, including disaster relief, citizen journalism, support of artists by fans, political campaigns, startup company funding,[3] motion picture promotion,[4] free software development, inventions development, scientific research,[5] and civic projects.[6]

From Wikipedia

Kickstarter and Indiegogo are two examples of crowd funding platforms. They provide tools and infrastructure for individuals or groups to raise money for their projects. These platforms also allow you to communicate with your supporters and build community around your project by creating two-way communication between the project and its backers.

Kickstarter will only release the funds if the project reaches its minimum level of funding. Indiegogo gives you the options of full funding or partial funding on project completion date. Both of them have deeply changed the way we fund our projects.

I prefer the Kickstarter’s fundraising model as it helps sets expectations for a project’s backer. If you don’t rise the full funding and the site released the funds, where are the remaining funds coming from? People tend to expect that the fully funded project will happen even if the project only achieves partial funding.

It is not unheard of games and other content to get over 1 million dollars on funding. Meeting and beating stretch goals; what they call the funding goals raised in excess of their initial funding, and usually with extra rewards attached, and additional products related to the fundraising that can be purchased at a discounted price.

One of my favorite examples of successful crowd funded projects is Ukiyo-e heroes

The project is very niche specific. It seeks to create traditional Japanese wood prints using modern video game characters as a way to pay homage to the characters’ roots in Japanese tradition.

The project raised over 310,000 dollars, many times over their modest goal of $10,400. The project not only raised a huge amount of money but it also built a community of people who are interested in the product and who can be tapped for additional funds through additional Kickstarter projects or through direct sales. The potential is endless.

The additional funding Ukiyo-e Heroes raised has allowed David Bull, the Japanese printmaker who created the prints for the project, to keep his art alive by hiring apprentices and experienced printmakers to work in the project. The impact was felt way beyond the virtual community of backers in Kickstarter.

Look at the most successful Kickstarter publishing projects in terms of funding. Look at the broad definition of publishing and the variety of projects that get funded under this category.

I’ve chosen 3 different projects to highlight some of these new publishing methods and results.

  • Ukiyo-e heroes
  • Art Space Tokyo
  • Mind’s Eye Theater: Vampire the Masquerade

 

Who is a publisher and How do you define publishing?

What happens when a publisher has a tight, direct connection with readers, is able to produce intellectual property that spreads, and can do both quickly and at low cost?

Seth Godin About the Domino project

From western4ul @ Flickr

Digital tools have expanded the definition of publishing to something I would have never thought possible 10 or even 5 years ago. For every author that makes a big publishing deal (like those mentioned in this Mashable 2009 article) there are hundreds if not thousands of niche authors selling their books directly to interested audiences either through their websites, through an aggregator or through the big vendors like Apple’s iBookstore and Amazon’s Kindle Direct Publishing program.

We are able, if we choose to, to connect directly with our audiences and interact in ways that were not possible before the advent of web technologies. We can turn our blogs and wikis as our communication channel with the audience, using their feedback and engagement as a measure of what content we should work with, edit and refine over time; maybe even using audience engagement as the metrics for additional content and conversion to other formats.

Some examples of this new publishing medium include, among others:

PressBooks

PressBooks uses WordPress as the engine behind a multi publishing paradigm. It gives authors a familiar interface, many people are used to WordPress as either a blogging or content management platform so how we write our content doesn’t change much from how we write traditional blog posts.

The interface produces web content (hosted in the Pressbook platform), epub and PDF content. Pressbook has also entered in partnerships with book distributors to provide a turnkey solution for people interested in self publishing.

The Atavist

Atavist is a media and software company at the forefront of digital, mobile publishing. Our mission is to enable the next generation of multimedia storytelling, reaching readers across mobile devices and the Web.

Our flagship publishing arm, The Atavist—built on Creatavist—features original pieces of longform, nonfiction journalism. Sold individually on mobile devices and e-readers as “e-singles,” The Atavist is digital-first, pushing the boundaries of multimedia publishing while always emphasizing the story above all.

https://www.atavist.com/our-story/

The Atavist is as close as I’ve found to what I envision a future publishing enterprise. It is clean, multi format and it’s never a cookie cutter exercise; not all stories are available in all formats but when they use a format they take full advantage of available capabilities.

Formats supported by the Atavist application for given article

Hi

Hi takes the opposite approach to The Atavist. Hi uses short 30 word moments with required location and an optional photograph. Other community members can request that you expand the moment with additional text; you can accept or decline the request.

I particularly like the way that Hi builds community by allowing users to request additional information about moments and subscribing to people who you’re interested in: every time they write an expanded moment. I like this concept as much, if not better, than Twitter.