This is Part II of a series called “Evolution of CSS”.

1. Evolution of CSS: Becoming a CSS Composer
2. Evolution of CSS: Class Naming Methodologies
3. Evolution of CSS: Overview of Tachyons

Perhaps you’ve heard this one before?

There are only two hard things in Computer Science: cache invalidation and naming things.

– Phil Karlton

Well, as any developer that writes code daily could attest those words are very true; and CSS class naming and assignment is no exception. Let’s discuss some of the reasons why and some of the solutions and theories offered to help mitigate this conundrum. But first, let’s try and clear the air around one particular subject: semantics.

Semantics

Semantics is the study of symbols, words, phrases and signs and their meaning, both philosophically and linguistically.

In the context of front-end web development, semantics are largely concerned with the agreed meaning of HTML elements, attributes, and attribute values (including extensions like Microdata). These agreed semantics, which are usually formalised in specifications, can be used to help programmes (and subsequently humans) better understand aspects of the information on a website. However, even after formalisation, the semantics of elements, attributes, and attribute values are subject to adaptation and co-option by developers. This can lead to subsequent modifications of the formally agreed semantics (and is an HTML design principle).

“About HTML semantics and front-end architecture” – Nicolas Gallagher

As front-end developers, we tend to toss around the word semantics a lot. We want our code to be semantic, but what do we mean?

There are certain fallacies in regards to CSS and HTML semantics. Yes, HTML can have semantic purpose and help browsers render proper markup to end-users. However, CSS has no semantics; and if it does, it is merely cultural, internal, agreed-upon semantics. In other words, to say certain classes or class naming conventions are “unsemantic” is moot. You’re merely stating that the class names don’t make sense (lack meaning) to you. For the most part, any class name has meaning and purpose to somebody.

The main purpose of class naming should be to help developers. If your HTML is outlined properly, then the content’s meaning is already established. Assigning classes to any of those elements won’t affect that content’s meaning.

This is where we can differentiate content-semantic (e.g. .header or .submenu) vs visually semantic (e.g. .col4 or .btn-success) class naming conventions. Later we’ll also discuss the new kid on the block: functional (or composeable) class naming.

Analyzing Scalable and Performant Methodologies

Many people far smarter than me have written about their experience on scaling CSS. Similarly, many approaches have been born from these conversations. Here are a few and a brief overview of them individually. Hopefully, you’ve already heard of some, and you may be already using a preferred method.

Object Oriented CSS (OOCSS)

Nicole Sullivan first introduced the concept of Object Oriented CSS back in 2009. Her insight and analysis of existing enterprise methods for writing CSS established a larger conversation, which many of the preceding methods stemmed from, and extended on.

The gist of the concept for OOCSS was the idea of marrying traditional object oriented programming methods with CSS. Whereas, objects are merely referring to HTML elements.

The two main tenets of OOCSS are:

Separate structure from skin

Essentially, this means to abstract the structure and positioning styles of an object from the presentational styles, or skin.

Separate container from content

This means to break components’ dependency of their containers. Any object should be able to be placed in another container and still look and behave the same.

Block Element Modifier (BEM)

The Block Element Modifier (BEM) method was developed by Yandex. BEM offers a strict means to class naming in your CSS in order to purpose them as reusable modules.

• Block – Standalone entity that is meaningful on its own. Examples: header, container, menu
• Element – A part of a block that has no standalone meaning and is semantically tied to its block. Examples: menu item, list item, checkbox caption
• Modifier – A flag on a block or element. Use them to change appearance or behavior. Examples: disabled, highlighted, checked

Using a button as an example we might use BEM to write our classes like this:

BEM has a lot more documentation and I encourage you to dig in at GetBem.com.

Scalable and Modular Architecture for CSS (SMACSS)

SMACSS is a framework developed by Jonathan Snook. Snook prefers to classify SMACSS as “more style guide than rigid framework.”

SMACSS is mostly based on five categories:

• Base rules – Target basic elements only, and does not include classes or IDs. This often can include resets. Examples: body, form, a, a:hover
• Layout rules – These are further sub-classified as major and minor layout rules. Major layout styles typically target IDs and can affect things like the header or footer. Whereas, minor layout styles (aka Modules) are nested within major layout components, e.g. nav, or login form
• Module rules – A Module is a discreet component. As mentioned above an example is nav in a header. Modules can reside inside of other modules, but should be styled to stand alone. Typically avoid element and ID selectors, and make liberal use of child or descendant selectors where the use may be predictable.
• State rules – Typically used to override or augment a Module or Layout’s rules when differentiating the different states (e.g. active, inactive, expanded, hidden). These are prefixed with is-, e.g. is-active, is-inactive, is-expanded, is-hidden
• Theme rules – This is where you can set overrides on any of the above: Base, Layouts, Modules, States. Think of it as setting the chrome on your site, or Modules (aka skinning).

SMACSS is not as opinionated as BEM in its class naming conventions. It has a similar approach to BEM in that it suggests you name your block’s child elements by using the parent block with a hyphen, e.g. .pod, .pod-body

New Generation methodologies

Yes, I’m going to lump the following methodologies into what I’m calling: New Generation methodologies. I tried to cover most of the major milestone methodologies above, but there are many others that helped pave the way for exploration. However, in recent years there seems to have been a bit of underlying commonality between these New Generation methodologies: anti-monolithic, component-based, and single-purpose single property practices. Here are a few:

Atomic CSS (ACSS)

Atomic CSS is developed by Yahoo! Inc. Atomic CSS offers immutable, single property classes to emphasize their singular function. Whereas, monolithic styles often times rely on descendant and contextual selectors. Let’s look at an example of how we might markup Atomic CSS two column layout vs traditional methods.

And here would be a comparison of the CSS used by Atomic CSS vs traditional method.

The traditional example above is where we start to see how these methods can break down in large projects. Should a new requirement be introduced to the two-column component then often times there is more bloat introduced. Whereas, the complexity of rules and selectors become so coupled that it can cause confusion or anxiety on editing existing CSS, and instead, “We create new rules, rather than modify existing ones, because we are not sure the latter is 100% safe.” ^[1]

Basscss and Tachyons

These two libraries are so similar it is hard not to group them. They both use similar feature descriptions, like “composable”, “single purpose” classes. Both are framework agnostic, and ready to plug and play with React, Ember, Angular, Rails, Elm, static HTML, etc.

Tachyons has seemingly become more popular. I speculate that it is because the documentation and resources are robust, and as of this writing the number of Contributors is double that of Basscss on Github. I plan on covering Tachyons in-depth in my next post.

Conclusion

I gave a terse overview of some key methodologies, but each one could easily have a post written on its own. I encourage you to dig deeper into any methods that resonate with you, and your current or next project’s needs.

Stay tuned for the next post in this series: “Evolution of CSS: Overview of Tachyons.”

The post Evolution of CSS: Class Naming Methodologies appeared first on WebDevStudios.

Keeping with the Non-Traditional Traditions

I received my degree from a private liberal arts college, but only after a large and intentional vacation from formal education after high school. The college had a non-traditional, experimental program that was typically advertised toward “returning adults,” and this is where I chose to finally continue my formal education. It allowed me to not necessarily have a major, but a “focus” in communications, and specifically, an “interdisciplinary program with courses in multimedia theory and design.” So I was able to dabble a little in graphic design, 3D animation, music theory, and multimedia computer programming. This is where I was introduced to HTML, CSS, and Flash.

(Note: I did not take any computer science classes, which would have probably pointed me in a different trajectory career-wise. Instead, I was more fascinated with the visual, as opposed to the computational disciplines.)

It can be easy (although probably no easier than any other excuse) to have Imposter Syndrome when your formal education is founded on a multi-disciplinary degree, i.e. Jack of all trades, master of none. However, as some have pointed out…

“Learning isn’t a zero-sum activity.”

– “The Myth of the Myth of the Unicorn Designer” by Thomas Cole

Code Is Poetry

My first few jobs heavily involved HTML, CSS, and Flash, of course, as well as dabbling in many other languages and systems. However, I quickly gravitated toward WordPress when I was tasked to research alternative content management systems (CMS) for a state college. I started to become familiar with all the concepts that made up a good and bad CMS and was able to research where each private and open source solution lie on the feature vs cost spectrum. I became passionate about the idea of open source software, and WordPress was, and still is, at the forefront.

Today, the WordPress tagline “code is poetry” has become a mantra in my everyday work. So much of what we, as Front-End Developers, write relies on syntax, logic, and structure. Also, good code (as there is plenty of bad code and poetry) requires elegance and simplicity. The meaning with code and poetry can be both on the surface and simultaneously abstract.

Enough About ME!

So why am I giving you my entire bio? Because again, I think it is important to providing context to why I’m fascinated and passionate about composing CSS. In the upcoming posts, I’ll cover some key points along the history of CSS to try and demonstrate where I see CSS evolving. Remember, writing code is a multi-disciplinary venture, and one should never stop learning.

Stay tuned for the next post in this series:

• Evolution of CSS – Part II: CSS Class Naming Conventions
• Evolution of CSS – Part III: Overview of Tachyons

The post Evolution of CSS: Becoming a CSS Composer appeared first on WebDevStudios.

CSS properties to avoid

When animating with CSS, there is one key thing you’ll want to avoid: reflow. When an object changes position or dimensions, it can trigger the browser to process reflow. For example, try to avoid animating positioning using top, bottom, left, right, margins, or even borders. Instead, leverage the transform property and translate functions.

// Avoid reflow: DON'T DO THIS
.animate {
    left: 100px;
    top: 50px;
}

// Avoid reflow: DO THIS
.animate {
    transform: translate(100px 50px);
}

Here is a quick video overview of browser reflows, how they’re caused, and how one might avoid them from Google’s Lindsey Simon.

Animating with CSS or Javascript

It does not have to be binary. Yes, you can animate with CSS only, but typically you might need Javascript to toggle classes on your objects. I’m not certain that there is an absolute difference in performance between using pure CSS vs. Javascript to animate elements. I’ve used Animate.css most often, and recently was able to kick the tires with Velocity.js. The differences were imperceptible to me.

Chrome’s DevTool Animation Inspector

Learn to use it and abuse it. This tool automatically detects animation groups and allows you to scrub through them, and make adjustments on-the-fly. My coworker Eric Fuller first introduced me to the Animation Inspector, and it quickly became my go-to debugging tool.

One main feature is that you can also slow down you animations after being recorded in the Animation Inspector, allowing you to catch easing and timing issues.

Here is Chrome’s documentation on how to access the Animation Inspector:
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/animations?hl=en

Accessibility considerations

Introducing movement on the screen may help enhance the experience for some. However, be considerate of users who have vestibular disorders or seizures, and make sure your experience is ultimately inclusive, and not exclusive. WCAG 2.0 offers some guidelines on working with flashing content.

Keyframe syntax

I’ll let the code below speak for itself…

@keyframe name {
    from {}
    to {}
}

// Is the same as...
@keyframe name {
    0% {}
    100% {}
}

// Declarations in a keyframe that are qualified with !important are ignored
@keyframes name {
    from { margin-top: 50px !important; } // ignored
    to   { margin-top: 100px; }
}

Nail your easing

Nothing in nature moves in a straight line. Easing in web animation allows us to control the acceleration and deceleration of elements to give a better sense of natural, personal movement. CSS gives us a few easing keywords: ease, ease-in, ease-out, ease-in-out, steps and linear. However, you’ll quickly find that these can become limiting when working on complex animations, and you may want to generate something more custom, which is where cubic Bézier curves come in. Don’t worry, it may sound mathematical or literally complex, but that is where the following tools come in handy:

Easings.net – allows you to quickly, visually compare and generate the CSS for a slew of easing functions.

CubicBezier.com – allows you to generate unique cubic Bézier easing, as well as compare against traditional easings.

Leverage hardware acceleration with CSS

Many computers these days support hardware acceleration because they’re equipped with suitable and robust graphics cards. Many browsers leverage this to offload heavy processing to the GPU (Graphics Processing Unit), and certain CSS 3d properties help trigger this, like translateZ() and translate3d(). I recently discovered this when I changed an animation from using scale() to scale3d(). Initially, the animation was quite jittery (aka, jank), but suddenly became smoother with the slight adjustment.

Easing on outta here (See what I did there? ? ) 

Making a truly successful and engaging animation is an art form, which takes time and practice. I’m still trying to figure out what all those graphs mean in Chrome’s Timeline. My advice: aim big, but start small.

The post Animations for the Web appeared first on WebDevStudios.

Here is a list of features (which I’ll also cover in further detail later in this post):

• 36 user interface patterns available out-of-the-box
• An auto-generated colors swatches page, which watches the _color.scss for changes, and recompiles as needed.
• A Typography page, which allows you to quickly test out typographical choices.

36 Patterns, and then some

Out of the box the Pattern Library contains thirty-six common UI patterns, and they’re organized in to the following categories:

• Accordions
• Carousels / Sliders
• Data Visualization
• Effects
• Forms / Fields / Inputs
• Hero / Banner
• Layout
• Media
• Navigation

Each pattern was written to meet our internal standards, as well as the WordPress coding standards. Also, each pattern leverages as much of wd_s default CSS as possible. Let’s look at an example pattern with only the default wd_s styling applied.

As you can see each pattern contains a bit of meta information, like original author, date added, and a brief description, as well as the HTML should you chose to use it in your WordPress theme. Pretty neat, right?

Should you also choose to extend the pattern, we’ve organized all the associated Sass partials in a corresponding /patterns/ directory. So we can modify the example pattern above by turning it on (all patterns are off by default) in /assets/sass/patterns/index.scss with $use-vertical-bar-chart: true !default;, and can modify the partial (/assets/sass/patterns/_vertical-bar-chart.scss) to your heart’s desire, and see the results instantly in the Pattern Library.

You can even extend the original HTML, if you like, as the whole Pattern Library runs on Jekyll, the static site generator. Just open up the corresponding pattern in the Pattern Library’s /src (or to continue our example: /pattern-library/src/_patterns/vertical-bar-chart.html).

Color swatches

We thought this would be a nice bonus, as it ties in to the concept of creating a Style Tile. Whether you’re a developer or a client, often times it is useful to see a color palette, so we put in an auto-generated color swatches page that watches the _colors.scss Sass variables partial, and regenerates when any changes are detected. This gives us a single point of reference during discovery, scaffolding, and development to see what colors are available, as well as avoid overly extending existing colors.

wd_s Pattern Library 2.0 – What is in store?

We’ve already got a bunch of improvements for the next version, but first we want to get some mileage and squash some bugs. Please help us test it out by checking out the feature/pattern-library branch (git clone -b feature/pattern-library git@github.com:WebDevStudios/wd_s.git) of wd_s, and let us know what you think.

The post Introducing the wd_s Pattern Library! appeared first on WebDevStudios.

First, a little more context:

Recently, the Front-end Developer team at WebDevStudios set out to create a user interface (UI) pattern inventory. The team recognized a set of UI patterns that were being created again and again across projects. We wanted a way to document these UI patterns, which would allow the team to be consistent, while incorporating best practices and our strive for accessible, robust standards. We researched tools and frameworks in order to try and find the best possible solution for documenting our patterns, across the team. Ultimately, we chose CodePen, because most of the team was familiar with it, and it allowed us to have a single source to house all our patterns. Check it out: WebDevStudios CodePen.

Simultaneously, there is an effort to aggregate all the patterns in to our WordPress starter theme: wd_s. This way the style of the theme gets applied to the patterns instantly, and allows for rapid-prototyping. Choose a UI pattern, or start theming, and either way they’re one and the same.

Now, let’s continue to extrapolate the differences between Style Guides and Pattern Libraries, and hopefully see where the two overlap, and where they differ.

Style Guide vs. Pattern Library

A Style Guide can typically encompass a company’s branding guidelines, which could include: logo usage, designated color palettes, and editorial tone. It is often wrapped in to a deliverable for, or by a company to work with outside vendors. Style Guides often fundamentally aid in establishing a company’s internal baseline for product and service goals, and exhibit a cohesive customer experience. Style Guides can directly influence the look and feel of a Pattern Library. Style Guides can stand on their own without data, while Pattern Libraries rely on some data to function.

Here are a few popular examples of Style Guides:

• Dropbox Branding Guidelines
• Draft U.S. Web Design Standards
• Best Buy Brand Guidelines

Pattern Libraries often encompass static UI elements, e.g. tabbed navigation, dropdown menu, accordion, and even common web page layouts, like grids. Style Guides do not always care about context, and relationships with data. Whereas UI elements, and their application in the overall user experience depend heavily on context and the interplay with content.

Here are a few examples of Pattern Libraries:

• MailChimp Pattern Library
• Salesforce Component Library
• Lonely Planet’s Component Library

Style Guide + Pattern Library = User Experience

So it is not really Style Guide vs. Pattern Library per se, but more like Style Guide and Pattern Library complement each other nicely.

The Style Guide establishes the root of visual presentation. User Interface patterns can be displayed in various contexts, and have different styles, which should be influenced by Style Guides. However, the UI pattern’s behavior should stand on its own, and not be affected by the Style Guide, or else it would hinder a positive user experience.

Where does rapid prototyping fit in?

By integrating barebones UI components into our wd_s WordPress starter theme we hope to enable our designers, front-end developers, and back-end developers to have a consistent library to reference, rapidly test for quicker feedback, and overall scaffold. So far, we’ve begun with a handful of components, but hope to increase the library in the coming weeks. Check out the Pattern Library branch of wd_s and subscribe for notifications on Issue #136 for progress and updates, and we would love to hear your feedback.

The post What is the Difference Between a Style Guide and Pattern Library? appeared first on WebDevStudios.

One of my favorite things to do while problem solving is listening to music. I believe it can enhance the process, but in moderation. Obviously, blaring Carly Rae Jepsen is dance worthy (definitely encouraged), but it is distracting, and can influence productivity. I won’t bore you with reviewing the countless studies on the effects of music on the brain, but here are a few if you’re inclined:

• Mehta, Ravi, Rui (Juliet) Zhu, and Amar Cheema. “Is Noise Always Bad? Exploring the Effects of Ambient Noise on Creative Cognition.” Journal of Consumer Research 39.4 (2012): 784–799. Web.
• Lesiuk, Teresa. “The effect of music listening on work performance.” Society for Education, Music and Psychology Research Vol. 33 (2) (2005): 173–191. PDF.

I believe there is a certain genre of music that is mostly conducive to problem solving and coding, and I like to label it: ambient. Ambient music is subdued, while slightly engaging. At least, that is my definition. Here is Wikipedia’s:

Ambient music is a genre of music that puts an emphasis on tone and atmosphere over traditional musical structure or rhythm. Ambient music is said to evoke an “atmospheric”, “visual” or “unobtrusive” quality.

– Wikipedia.com

Throughout the years I’ve found albums and artists that help me stay in the zone while writing code and designing, and I would like to share a few.

Recommendations

Artist: Brian Eno / Album: Music for Airports (1978)

Let’s start out with a classic, Music for Airports

Brian Eno, is one of the pioneers of ambient music, and this is certainly a masterpiece, and great place to start.

Ambient music must be able to accommodate many levels of listening attention without enforcing one in particular; it must be as ignorable as it is interesting.

Brian Eno

This music is imbued with a subtle atmospheric presence, and created with mostly electronic piano and synthesizers.

Eno went on to make several albums which fit nicely within the ambient genre, and all equally worthy of a listen.

Grab it from your favorite source.

Artist: The Album Leaf / Album: In a Safe Place

The Album Leaf are not entirely ambient in classification, but this album has always provided a subtle soundtrack to get things done.

Grab it from your favorite source.

Artist: Aphex Twin / Album: Selected Ambient Works Volume II (1994)

The notoriously subversive Richard D. James claims the sounds on his SAW2 were inspired by lucid dreams, and whether you believe it or not, they certainly have that quality. Some of these songs are fairly haunting.

Artist: Tycho / Album: Dive (2011) & Awake (2014)

I’m saving the best for last. Tycho is not only a compelling musician, but also visual artist (see ISO50). Their music really sits in a fine place for this list, and has taken ambient music to another level in my opinion.

Currently my iTunes Play Count for Tycho’s entire Dive album is at 113. There have been countless days I’ve spent in a #codeComa listening to Tycho, and tapping my feet.

Grab it from your favorite source.

Other worthy mentions

Some other artist to check out, as the list can go on and on…

• Ulrich Schnauss (Learn) (Listen )
• Boards of Canada (Learn) (Listen )
• Andy Stott (Learn) (Listen )
• Oneohtrix Point Never (Learn) (Listen )
• Isolée (Learn) (Listen )

Outro

While these are some of my favorites I would be curious to know what other developers listen to, and what keeps you in your #codeComa? Please share your favorites in the comments.

The post Music to Code appeared first on WebDevStudios.

Part II of III in the wd_s Series:

• Part I: History of wd_s
• Part II: Project Scaffolding with wd_s
• Part III: The Future of wd_s

A new project comes in: scoped, and all. Client provides Photoshop comps, sweet! Who is going to write the first line of code? ¯_(ツ)_/¯

It could be you, and you’re setting the tone for the rest of the project. Project scaffolding can be fun, and can be daunting. Here are some things I learned getting wd_s set up on a new project recently:

Fonts. Fonts? Fonts! FONTS!!!

Most likely the design is not using Arial, Georgia, or Webdings. Was the designer smart enough to include the fonts with the PSDs? Hopefully, they used fonts that have web-friendly versions hosted by Google Fonts, or Typekit. However, that’s not always the case.

Recently, I had to sort through dozens of PSDs that had a plethora of font family variants, and some of which had no compatible web-friendly version. I was forced to create a spreadsheet and parse each PSD for font family variants, and see what each file contained. It ended up that of the dozens of desktop font files provided, only about 60% were used in the PSDs, and some of the fonts were not even provided, nor were they all properly licensed. Therefore I had to find an adequate substitution and verify with the client that this was acceptable.

Once I had all the fonts established I had to set up wd_s to enqueue externally hosted fonts, as well as locally stored variants. Luckily, that is the easy part, because with wd_s we already have Open Sans and Roboto enqueued (see scripts.php), therefore I just needed to swap out for the project fonts. The end result:

<?php

/**
 * Register Google font.
 */
function wds_font_url() {

    $fonts_url = '';

    /*
    * Translators: If there are characters in your language that are not
    * supported by the following, translate this to 'off'. Do not translate
    * into your own language.
    */
    $playfair_display = _x( 'on', 'Playfair Display font: on or off', 'wds' );
    $titillium_web = _x( 'on', 'Titillium Web font: on or off', 'wds' );
    $lato = _x( 'on', 'Lato font: on or off', 'wds' );

    if ( 'off' !== $playfair_display || 'off' !== $titillium_web ) {
        $font_families = array();

        if ( 'off' !== $playfair_display ) {
            $font_families[] = 'Playfair Display:700,700italic';
        }

        if ( 'off' !== $titillium_web ) {
            $font_families[] = 'Titillium Web:200,300,400,400italic,600,700,900';
        }

        if ( 'off' !== $lato ) {
            $font_families[] = 'Lato:100,300,400,700,900';
        }

        $query_args = array(
            'family' => urlencode( implode( '|', $font_families ) ),
            'subset' => urlencode( 'latin,latin-ext' ),
        );

        $fonts_url = add_query_arg( $query_args, '//fonts.googleapis.com/css' );
    }

    return $fonts_url;
}

$colors: Taste the Rainbow

Whether you’re working with five, ten, fifteen, or fifty design comps, grabbing repetitive colors from them is critical to saving time for other Front End Developers down the line. This is where the heart of rapid theming can lie. Here is an example of a color partial that I recently wrote:

//--------------------------------------------------------------
//   COLORS
// - Primary palette
// -   Secondary palette
//   GRAYSCALE
// -   Black & White
// -   Grayscale
//-------------------------------------------------------------

// Primary palette
$color-alabaster: #f2efe8;
$color-blue: #0074d9;
$color-brown: #42210b;
$color-camel: #c29c66;
$color-cigar: #7e573b;
$color-dark-brown: #2a1608;
$color-purple: #32234c;
$color-red: #d92231;
$color-tan: #ba915b;

// Secondary palette
$color-cardinal: #d52232;
$color-alizarin-crimson: #d82232;
$color-tall-poppy: #bc272d;

// GRAYSCALE

// Black & White
$color-black: #000000;
$color-white: #ffffff;

// Grayscale
$color-cod-gray: #111111;
$color-mineshaft: #333333;
$color-dove-gray: #666666;
$color-gray: #808080;
$color-silver-chalice: #aaaaaa;
$color-silver: #cccccc;
$color-alto: #dddddd;
$color-gallery: #eeeeee;

As you can see, a well organized color partial can help keep a project’s codebase easier to maintain. Keep in mind, this is just the start, and by the end of the project there tends to be more values added–depending on how well the original designs enforced strict color palette. Also, this is where a Style Tile can really help keep things consistent and streamlined, but not all projects require (or provide) one.

Off the Grid

The next step is establishing the grid base for our project. Wd_s uses Bourbon’s Neat framework for semantic layouts. We utilize a simple configuration file in the theme’s /variables/ directory to set the building blocks for our project’s layouts. Typically, this is as easy as hopping into Photoshop, and turning on Guides to view the required grid system being used, and updating our variables.

Optionally, I also like to take this opportunity to include a few helper, non-semantic classes to try and keep the project consistent in the _layout.scss, e.g.:

.wrap {
    @include outer-container;

    padding: 0 $gutter/2;

    @include wider-than(phone-landscape) {
        padding: 0 $gutter;
    }

    &.no-gutter {
        padding: 0;
    }
}

Note that we’re leveraging the variables set in our _grid-settings.scss for Neat, which helps keep things DRY.

• $gutter
• @mixin outer-container($local-max-width: $max-width) { ... }, which references our $max-width

While we’re in our _layout.scss partial, we can also update our main two-column layout if our project is using one, e.g.:

.primary {
    @include fill-parent;

    @include wider-than(tablet-landscape) {
        @include span-columns(8);
    }
}

.secondary {
    @include fill-parent;

    @include wider-than(tablet-landscape) {
        @include span-columns(4);
        @include omega();
    }
}

SVG Icons

It seems that every design incorporates some level of iconography these days. And why not? Icons can offer a nice supplementary visual cue for most users, as long as we gracefully degrade the experience for those that do not need (or cannot) experience them.

Wd_s has a library of SVG icons available out-of-the-box that were hand-picked from IcoMoon, but this is just a starting point, and each project will require removing and adding to the library. Luckily, I just recently updated the documentation on how to work with SVGs with wd_s; check it out: https://github.com/WebDevStudios/wd_s/blob/master/images/svg-icons/README.md

Exporting and minifying all of the original design iconography can help expedite your Front-end team’s development time, and again the benefits of consistency are obvious.

@mixins, further variabling, and @extending our Sass

Yep, variabling (variaBLING?) is the technical term…not! But, you know what I mean. Keep things as DRY as possible.

Perusing the Photoshop designs will give you a sense of where repetitive patterns happen, and where you can leverage the power of Sass to keep things tidy and modular for your team.

Is there a consistent border-radius used on all buttons, or maybe even other elements? Then set a variable $border-radius: rem(x), and update all the pertinent elements.

Recently, there was a need for certain images to have a CSS black-and-white effect applied. Therefore, I wrote up a simple @mixin for the team to use:

/// Make a color <img> B&W
///
/// @link http://caniuse.com/#feat=css-filters
///
/// @example scss - Basic Usage Sass
///    .hero-img {
///        @include desaturate;
///    }
///

@mixin desaturate {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

Conclusion

Project scaffolding is an important role for each new project, and helps set up a unified codebase for your team, as well as save overall time converting elegant Photoshop comps to pixel-perfect masterpieces.

Wd_s was built to expedite the repetitive tasks that are a part of Front End building. We’re constantly learning, and improving the methods and code behind it. Submit a Pull Request, and join the ride!

The post Project Scaffolding with wd_s appeared first on WebDevStudios.

It seems that there can be allegiances to editors that can really rile people up. I’ve always been hesitant to make the jump mostly because of the productivity death effect switching can have. Obviously, the learning curve and installation seem to be the biggest obstacles. Why should I switch when I’m comfortable, and can ship code just as quick as the next person? So it was not until I had family vacation and knew I would have some downtime to try out Atom, and gave it a try.

Extending Atom with packages

Atom comes with dozens of pre-installed packages, as well as a few themes which can be switched on-and-off and tweaked to your heart’s desire. There is also a library of community contributed packages and themes. Here are a few packages I’ve found useful in my daily coding practices:

minimap

The minimap package shows a preview of source code along the side of the current file you’re working on.

Minimaps has a growing library of other packages in which it integrates nicely. Pigments is one of them. Here is a full list.

Pigments

For anyone that does a lot of CSS, Less, or Sass, this is a must-have. The Pigments package sources your code for any colors, then displays and builds a palette.

It also comes with a lot of handy features, like Pigments: Show Palette, which can show the current project’s palette from the command palette (Cmd+Shft+P / Ctrl+Shft+P). Also, there is a contextual menu that allows you to convert Hex to RGB(A), and vice versa.

File-Icons

The file-icons package adds file type icons to the Tree View, Fuzzy Finder and Tabs. Just a simple nuance to help visually distinguish one file type from another, and who does not like icons?

Highlight-line

This is a simple tool to just highlight the current line, which can be customized as well.

Markdown Preview Plus (MPP)

Markdown Preview Plus provides a realtime preview of any markdown file you’re working on.

Color Picker

Right click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4 colors – and is able to convert between the formats.

It also inspects Sass and LESS color variables. Just open the Color Picker with the cursor at a variable and it’ll look up the definition for you. From there, you can click the definition and go directly to where it’s defined.

Gist-it

Atom has a nice way to save and deal with Snippets natively, but I sometimes prefer to share and save Gists. Gist-it allows you to easily post files (or current selection) from Atom to GitHub Gists.

Conclusion

So far I’m digging Atom editor. I’ve been using the Atom Material UI theme with some simple customizations. I’ve barely scratched the surface of what lies underneath, and look forward to where the project’s Roadmap leads.

Check out the helpful documentation and get started if you like. Ultimately, I believe a tool is a tool, and it is how you use it that is most important.

The post Helpful Packages for Atom Editor appeared first on WebDevStudios.

What do all these screens have in common? They can display your website if they’re connected to the internet, and chances are it will look different on each and every one. Accounting for all these screen sizes is no small feat and certainly something you need to consider when designing your website.

Responsive Web Design allows us to try and account for, and adapt to varying screen sizes, and is also Google’s recommended method. Furthermore, balancing the use of space in and around content can be a subtle artform, and white space is your friend.

White Space, aka empty space, negative space

One key method for alleviating information overload on your website, and allowing users to easily scan and mentally prioritize elements is white space.

Many people view white space, or “negative space” as wasted space. However, it can be perceived as active space if used wisely, and allows your users to peruse, distinguish, and prioritize chunks of content. White space can help users focus, organize, and emphasize information. White space is part of the invisible interface of web design.

The classic example to observe the clever use of white space is Google.com. There appears to be a vast use of white space, which helps the user focus on the primary goal: search.

What is “Above the Fold” or “Above the Scroll”?

Similarly, an often stipulated specification we hear as designers is the need to keep all the important stuff “above the fold.” Above the fold is one of many print paradigms that people like to try and assign to the web. The screen is not a newspaper, and “above the fold” does not translate well to the multitude of screen-sizes available. However, it can still have meaning. Clarifying a website’s priority of interaction for users can sometimes be relevant to keeping it near the top of the page.

Scrolling is cheap.

“Users don’t want to scroll.” Do not assume you know your user’s habits, needs, or desires. It has been shown through click data evaluation that users do scroll, and if your content is fascinating enough, smartly utilizes (or purposely neglects) whitespace then they’ll keep scrolling.

Closing Thoughts

Ultimately, the design of your website is to tell a story. Identify the KPI (key performance indicators) and design around the content and ideas that get the user’s attention. Data can be a great means for formulating ideas around your users’ needs. Next time you’re in your Google Analytics Dashboard (or Piwik, or other) be sure to check out the section to see your audience’s various screen resolutions. Here is a handy link for a Google Analytics Custom Report template that does it for you: Conversion by Screen Resolution – Desktop & Mobile

Further Reading:

• “Life Below 600px” by Paddy Donnelly

The post White Space and the Fallacy of ‘Above the Fold’ appeared first on WebDevStudios.

Let’s look at some simple examples, and put this concept into context.

Pop Quiz – Question #1: Rule Order

<!-- HTML -->
<div class="blue red"></div>

/* CSS */
.red {
    background-color: red;
}
 
.blue {
    background-color: blue;
}

What is the background-color of the <div> based on the example above?

If you answered blue, you are correct.

Since the declaration comes later in the CSS (near the bottom), it has a higher specificity. This is fundamentally the simplest rule of the cascade in Cascading Style Sheets (CSS). If there is a conflict in rules (e.g. background-color: blue vs background-color: red), and since the classes have the same weight, then the cascade wins.

A similar scenario is the following:

<!-- HTML -->
<div class="box"></div>

/* CSS */
.box {
    background-color: red;
    background-color: blue;
}

Again, the same outcome, because background-color: blue comes later in the declaration block.

Ok, that was easy. Now let’s try one that’s a little harder:

Pop Quiz – Question #2: Pseudo-element vs Pseudo-class

<!-- HTML -->
<header>
    <h1>Pseudo-element vs Pseudo-class</h1>
</header>

/* CSS */
h1:first-child {
    color: blue;
}
 
h1::first-line {
    color: red;
}

What color will the text be?

This time red wins. The h1::first-line pseudo-element has higher specificity than the h1:first-child pseudo-class. Here is how we can calculate and know for sure:

Calculating Specificity

Here are the rules for calculating specificity, as outlined by W3C:

• Count the number of ID selectors in the selector (= a)
• Count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
• Count the number of type selectors and pseudo-elements in the selector (= c)
• Count the number of element names and pseudo-elements in the selector (= d)
• Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

/* Examples of calculating Specificity */
 
*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

So let’s calculate and compare the Specificity of the example (Pop Quiz – Question #2: Pseudo-element vs Pseudo-class) up above to verify our answer was correct.

/* Pseudo-element vs Pseudo-class - calculating Specificity */

h1:first-child {} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
h1::first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

A Few Special Rules

• Ignore the universal selector (*), as it is worth 0.
• !important overrides everything! Please avoid it at all costs.
• :not() – a negation pseudo-class adds no specificity by itself. Only what’s inside the parenthesis is added to specificity value. e.g. #s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */

Conclusions

Basically, only be as specific as you need to be. Being too specific mostly makes it harder to override things further down the line.

Tools & Further Reading

• “CSS Specificity: Things You Should Know” – SmashingMagazine.com
• Specificity Calculator – A visual way to understand CSS specificity.
• “Calculating a selector’s specificity” – W3.org
• CSSSpecificity.com – CSS Specificity infographic that uses The Shining to demonstrate specificity.
• “Specifics on CSS Specificity” – CSSTricks.com
• CSSDig.com – Chrome extension for analyzing any site’s CSS in a new way.

The post CSS Specificity: What You May Not Have Known appeared first on WebDevStudios.