September 8, 2014

CSS Experiments With a Search Form Input and Button

In this tutorial, I’d like to explore how you can embellish a simple search form. We won’t be doing anything crazy, instead exploring four different takes on how you can spruce up a search input with the help of CSS transitions.

You Already Have a Basic Search Box

In your HTML file you’ll need to need to create a search input to get started. If you take a look at the code below you’ll notice four different things: a .box div, a .container-1 div, an .icon, and the search input itself. 

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

All of the four examples will have a search box – naturally – as well as a looking class icon. Each of the four examples will be housed in a container so that we can manipulate the search input independently. Lastly, the box div is responsible for keeping the container centered.

Adding Font Awesome

Font Awesome is an icon library. You can learn more about the project on Font Awesome’s own website.

<i class="fa fa-search"></i>

The code snippet above is one example of how you can include the icon within your markup. However, in order for the icon to show up you also need to include a link to the Font Awesome library, demonstrated in the snippet below. Include this link within your document head.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Basic Styling

We're now going to add some styles in a separate stylesheet (which you'll also need to link to from within the document head).

body{
  background: #343d46;
}

.box{
  margin: 100px auto;
  width: 300px;
  height: 50px;
}

In the above CSS snippet we are adding some basic styling to the page. The style of the search boxes will be navy colored so the body background shouldn't be stark white. The box class is also being centered into the page for the sake of the tutorial. 

Embellishing the Search Box

This tutorial is all about learning how to embellish the search boxes. In this first example I’ll explain what is going on in greater detail; I want to make sure you know exactly what is going on. In the remaining three examples, I will simply show you how to achieve the various transitions.

#1. Background Fade

The first example we are going to tackle is to change the background of the search input on hover. We will also be adding a transition so that the change isn’t jarring.

The HTML

You’ve already seen the HTML for the basic markup. This snippet will be similar for all the examples.

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

The CSS

In order to start the styling we need to define the CSS style of the search box itself. Let’s add all the various CSS rules one by one so you know exactly what is going on.

.container-1{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

First, we want to style the container class. The most important property is arguably position: relative. This is set specifically so that the icon can be placed on top of the input as you’ll see shortly.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Input

Next we want to style the actual input. Everything above is purely aesthetic as the border radius or background colour don’t effect how the input functions. Do make note of the left padding property. It’s there to make room for the icon so that it’s not literally on top of the text within the input.

Below we have four different rules which colour the placeholder text, which in our example is Search. The rules unfortunately need to be separate for the individual vendor prefixes and cannot be consolidated into a shorthand written rule.  It’s a little annoying and you’ll see this repeated in every example!

.container-1 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-1 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Icon

Lastly, we'll style the icon. Most importantly we are setting its position to be placed on top of the input by setting its position: absolute. Margins help position the icon in addition to setting its top position to 50%.

.container-1 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Adding Hover Effects

The next set of rules we have to create is what happens to the search box on hover. In this example we only want to change the background color. In order to get rid of the yellow or blue glow around the input (which browsers sometimes add) set outline: none

.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
    outline:none;
    background: #ffffff;
  }

As you see in the above snippet, we have added two additional states – focus and active. This way the effect doesn’t disappear when you stop hovering on the input. More importantly, the effect is also prominent when the input is in use.

Creating the Transition

In order to make the transition happen we need to add a few lines of code. Return all the way back to the rule where we defined the style of the input - .container-1 input#search. Before the closing brackets add the following snippet:

  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;

We are defining the transition property shorthand, but we could instead define those three parameters individually. Firstly, we are saying that the transition should only affect the background property. Next, we are saying the transition should take a little over half a second. Lastly, we define the transition effect to be easing. The ease is not the only effect that would work here, we also could have used linear or ease-in, for example. It simply would have looked a bit different. Try it out yourself to see if you like them better. 

The input style should now look like the code below.

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  
    -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

How do CSS Transitions Work?

If you don’t know anything about CSS transitions, let me give you a brief overview. First, in order for the transition to work, the property needs to be defined on the default state and not on hover, or on active or on focus.  

CSS transitions allow for gradually changing effect and you can define specific parameters to control, such as which property will be affected, the duration of the transition and the kind of transition. You can have multiple transitions set for one element. But, most importantly, you should always include vendor prefixes in order to accommodate the various browsers, as the support for this property is not yet universal.

For more information take a look at: CSS3 Transitions And Transforms From Scratch

#2. Expand Input on Hover

In this example the search will start out as only the looking glass icon. When you hover over the icon, the search will expand at which point you can then type in your query.  The majority of the code in this example will be very similar to the previous example. 

The HTML

<div class="box">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

The CSS

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

The input styling for this transition is different. The input is significantly smaller so that the icon can appear to be behind a square. All of the remaining properties, like background or font color, are the same as we don’t want to change the styling of the search completely. 

.container-2 input#search{
  width: 50px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;

  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

As you can also see I’ve redefined the transition property to affect only the width. I’ve kept the time the same because it’s quick enough not to annoy users, yet long enough to create a nice effect. 

Below is the code for recoloring the placeholder text.

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

And once again we have the icon CSS style. It should be the same as in the previous example.

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

Adding the Hover Effects

The very last thing we need to do is to define how the search will look like when it's being hovered over. In the snippet below the first rule makes sure that the form doesn’t have the browser-induced glow and that when you are using the input – when typing in it – the search box remains expanded. The middle rule just expands the input to full width on hover. 

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}

.container-2:hover input#search{
width: 300px;
}

.container-2:hover .icon{
  color: #93a2ad;
}

The very last thing happening in the above code is that on hover the icon changes its color. It’s just a small detail to quickly show a user that the search box is active and working, rather than an idle input. The change is not implemented by a transition.

#3. Increasing Icon Size on Hover

Out of all the four examples, this one is the most subtle, both in terms of code and visual effect. In this case the looking glass icon is going to pop up slightly and increase in size. 

The HTML

Once again the HTML markup of the icon and the search box is the same as in the previous two examples. The exception, of course, is the .container-3.

<div class="box">
  <div class="container-3">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

The CSS

The CSS for this example is nothing special. For the most part it starts out very similar to the first examples where the default state is no different at all. Below is the code for the container and the input. Note that there is no transition on the input this time around.

.container-3{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-3 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}

Once more we have the placeholder rules.

.container-3 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-3 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-3 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-3 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Now, by the look of it, the icon for this example is the same as well. It’s the same color, the same position and so on. However, I have added a transition to it. These transitions target all properties, which is a shorter approach rather than spelling them out individually.

.container-3 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;

   -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

Adding the Hover Effects

.container-3 input#search:focus, .container-3 input#search:active{
    outline:none; 
}

.container-3:hover .icon{
  margin-top: 16px;
  color: #93a2ad;

  -webkit-transform:scale(1.5); /* Safari and Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  }

There are a couple of things happening in the above code. Firstly, we are changing the color of the icon on hover and moving it a bit higher so that it’s vertically centered when it’s bigger. Secondly we are adding a transformation to the icon element on hover so that it will in fact be 1.5 times its original size. Because the previously defined transition was set to impact all properties, it appears as if the icon grows in size on hover.

Again, take a look at CSS3 Transitions And Transforms From Scratch to learn more about the transformation property.

#4. On Hover Button

Unlike the last three examples, this one will be more complex. On hover, a button will slide on top of the input to let you proceed – kind of like Send or Go. The button will have the looking glass icon within it.

The HTML

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Search..." />
    <button class="icon"><i class="fa fa-search"></i></button>
  </div>
</div>

Here the HTML is a bit different. The input is still there, of course, but the icon is now inside a button element which comes after the input. It’s important that the button is after the input as it relates to how the hover effect will be created in CSS.

The CSS

The CSS in this example is different so pay attention! Below is the snippet for styling the container. First, position: relative is missing; it’s no longer important as the icon doesn’t rely on it to be placed on top of the input. However, we do have overflow:hidden. This keeps the button from showing up when it’s not on hover. Technically the button that appears is present to the right of the input, but thanks to overflow:hidden it’s not showing when it falls beyond the width of the container – the container and the input are the same width. 

.container-4{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}

Below the input doesn’t have the transition because it’s not the element being affected this time around.

.container-4 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

The snippet to recolor the placeholders is next. 

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

Below is the code to style the button that appears on hover. The trick to making it slide in from the side is to place it right behind the input, and make it invisible unless on hover.  The button is the element that changes - it moves – therefore it’s the one where the transition is defined. To make things simpler, I’ve identified the transition to impact all properties. 

.container-4 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

Adding the Hover Effects

In order to fade in the button, it needs to be moved on top of the input. That’s done through the negative margin. Previously we set the opacity of the button to 0 so we have to reset it to 1 in order that the button can be visible too.

The last rule only changes the background of the button if you hover over the button. It’s good to let a user know that the button is active and you can click it to submit the search; there is no point in having a button if it appears inactive.

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
    outline: none;
    opacity: 1;
    margin-left: -50px;
  }

  .container-4:hover button.icon:hover{
    background: white;
  }

Conclusion

Well, that brings us to the end of our CSS experiments! We took a basic search form input and used a small selection of effects to change its behavior. How else would you suggest changing a search input like this? What other aspects of it would you apply CSS transitions or transforms to? Let us know in the comments!

September 3, 2014

7 Ways You Might Not Know Your Sites Are Exploding

Once upon a time in web design, all you had to do to make your sites cross compatible was set them to be 960px wide and fix the issues that popped up in IE6. Ah, the old days....

Today, the internet is made up of so many moving parts it's almost certain at least some of your end users are having less than perfect experiences, due to issues you probably had no idea were happening.

We've just opened the doors on a brand new course entitled Bombproof Web Design that will help you chase off any sneaky gremlins that might be hiding away in the corners of the internet, blowing up your sites when you're not looking.

In this article, we'll be running through 7 ways you might not know your sites are exploding, each of which are deftly handled in the Bombproof Web Design course.

If you can go through all seven of these points and say your sites are solid on all counts I'll be super impressed, and you'll get a great big gold star!

The first way you might not know your sites are exploding is:

1. Web Fonts Not Rendering Properly

You may not realize it, but your web fonts can actually look notably different from one operating system to the next, even in the same browser. For example, the following three screenshots are all of the exact same site, with the exact same font settings and code.

The first is taken in Chrome on a Mac:


Okay, all seems to be well there. Let's check out the same site on Chrome again, this time through Ubuntu:

Hmm, that's a pretty unpleasant look in the headings there. You can barely make out the letter "s" and the letters "A" and "e" are almost closed solid. How about Chrome on Windows?

Gah, look at those artifacts! Every letter curve has a little tag hanging off it and overall it's pixelated and ugly.

There are several different ways you can get caught out with inconsistently rendered or even entirely absent fonts unless you have a plan for evaluating and deploying your typography choices.

2. Barely Rendering at all on Opera Mini

Even the worst web font rendering is still going to make your sites look great compared to browsers that don't render web fonts at all, such as Opera Mini. And web fonts aren't the only thing that Opera Mini doesn't render. This is the same site that you see above, this time in Opera Mini:

As you can see, pretty much everything failed, short of basic colors and text. Opera Mini is a mobile browser designed to handle sites in a very light weight manner, allowing it to be used on lower spec devices and for those trying to conserve bandwidth or system resources. Unfortunately, part of the way it does that is by not supporting a whole range of CSS properties, particularly CSS3.

Opera Mini has a small but significant user base. To put it in perspective, stats that I've looked at showed Opera Mini use at around a third of total IE users, and higher than for Android Browser and Opera Desktop. It's quite probably the most difficult browser to wrangle today, but one way or another you'll want to have some kind of plan for it.

3. Not Accounting for User Preference

On Firefox, when you go to Preferences > Content you'll see this:

On Chrome, when you go to Settings > Show advanced settings > Web Content you'll see this:

Both of these settings panels are designed to allow users to adjust the font size of their browser to suit their needs. People with visual impairments will commonly use these settings to help them read more easily. They are also handy for people who use their living room TV's for browsing, something which is becoming increasingly popular.

It's a very common practice to set a base font size for a site like 14px or 16px  against the html and body elements. However, this prevents the user's font size preferences from taking effect. If a user is visually impaired, being unable to enlarge text makes life a lot more difficult, or if the font size has been altered to suit a particular display size it can make text very hard to read.

On top of that, if a user does have a non-default font size selected it's important to have your whole layout able to scale along with it. You don't want to end up with a layout that's all out of whack because it only suits one text size.

For example, here's our same demo site again, but built without the ability to scale and the base font size set to 22px:


Yet with scaling built into the code, the same site with a font size set by the user of 22px looks like this:

You might not be able to see what's going on in the above screenshot as the image has been shrunk to fit in this column. At first glance it might look just like the very first screenshot in the article, but that's only because it has scaled up proportionally with the user's font size settings.

To give you a better idea, here's a section of the site at its actual size:

Building your sites this way means you give the user the same viewing experience no matter what preferences they have set in their browser.

4. Not Fitting All Displays Comfortably

Almost all web designers have already made the transition from desktop-only layouts to including support for common tablet and phone resolutions, but that's still only part of the picture.

The list of possible resolutions today is longer than your arm, and we then also have to factor in pixel density, the portion of the display the viewport takes up, and the actual physical size of the display.

Right now your sites could be visited by users on displays both miniscule and gigantic, and it's almost impossible to predict what combination of resolution, pixel density, viewport size and physical size your visitors will have. A 5" smart phone could have the exact same resolution as a 65" TV, yet browsing a site on each device is very different from the user's point of view.

That said, it's actually not at all difficult to create layouts that are completely flexible for all displays. With the right set of principles underlying your layout code all your sites will be equally at home on any display, from TVs at one end of the spectrum:

My own 40" TV showing our demo site at a size that's totally comfortable for reading from the couch.

To tiny little smart watches at the other end of the spectrum, such as through the WebBrowser app for the Sony SmartWatch 2:

Site shown at actual display size for WebBrowser app on Sony Smartwatch 2

5. Bombing Out When JavaScript Fails

It's easy to assume all users will have functional JavaScript that we can depend on absolutely. JavaScript tends to play a part in almost every site, and in some cases entirely drives content through things like web components and client side rendering.

But what if JavaScript isn't as ever present as we might think?

There are actually plenty of reasons why a visitor might not see a JavaScript dependent site as you intended it to appear.

  • Some workplaces enforce a network wide block on JavaScript as a security policy.
  • Some mobile browsers prevent JavaScript from executing.
  • Some people follow advice from security advisers and disable JavaScript at the browser settings level.
  • Some people run browser extensions that block JavaScript by default so they can add exceptions on a case by case basis. For example, the most popular such extension for Firefox right now has over two million users.
  • Sometimes JavaScript will just fail to properly execute due to incomplete script downloads, limited system resources or other potentially unforeseen circumstances.

The bottom line is that even if the percentage of users who don't have fully functional JavaScript is small, it's still present and becomes ever more significant the more successful and well trafficked your sites are.

If you don't have a plan, instead of your otherwise awesome blazing fast client side rendered site your visitors might just see a bunch of unrendered HTML:

Or instead of your amazing web components, your visitors might see a collapsed layout:

6. Depending on Absent Input Devices

For a long time interaction with websites was almost entirely dependent on a mouse, however you can no longer assume a user either has a mouse, or is able to comfortably use a mouse. People are very often not at a desk when visiting your sites, instead viewing through a touch based device or from the couch.

This means if your site requires mouse interactions to get around, you might find some of your visitors can never access certain parts of your site.

Ideally sites should be navigable not only without a mouse, but also specifically keyboard friendly. If your site can be navigated via a keyboard it very likely can be navigated via other input devices such as TV remotes or console controllers.

On top of that, people with mobility impairment, such as sufferers of arthritis or stroke for example, may prefer to navigate via an assistive device such as a large key keyboard.

Assistive keyboards. Image courtesy of https://www.flickr.com/photos/oregondot/6235420475

And speaking of your sites working with assistive devices...

7. Not As Accessible As You Think

Don't get me wrong, I know you're probably already doing the right thing and incorporating WAI-ARIA roles into your sites and trying to make them as accessible as possible.

But what I found in my own experience is that you might think you've made your sites accessible, until you actually try to access them the same way a person with a disability has to.

Within moments of trying to navigate the web via screen reader and keyboard for the first time I felt pretty bad about some of the sites I'd built in the past, sites I'd honestly thought I created according to accessibility guidelines.

One of the main issues I encountered as I attempted to screen read my way around the internet was a lack of optimized WAI-ARIA landmark roles, which help users jump to the main "landmarks" in sites.

What I discovered was that many well meaning sites incorporated WAI-ARIA landmarks, but in a way that unfortunately didn't give any information to the user that would help them find their way around the site:

Five navigation areas but no main content area for screen reader users to jump to.

Some other well known sites just didn't use any accessibility code at all:

Including WAI-ARIA landmark roles in your code is actually super easy and adds only minutes to a project, it's just a matter of knowing how to add them in the right way.

You'd be surprised how easy it is overall to have a solid baseline of accessibility with a few simple techniques, such as optimizing heading structure, controlling color contrast, plus some of the points we talked about above like allowing font size scaling and supporting different input devices.

Make Your Sites “Bombproof”

If you checked off each item on the list above and said to yourself, "Already nailing it" then well done, you're amazing! Like I said, you get a great big gold star for being epic.

However, if you found yourself saying "Oh I didn't realize that" or "Not sure if I'm covered on that one" then it's quite possible your sites might be exploding out there on the internet as we speak - and by "exploding" I don't mean in the good kind of way!

If there was more than one of these points you weren't aware of, don't worry. It's actually a lot easier to "Bombproof" your sites than you might think. It's just a matter of being fully aware of the necessary information, and rolling out some straightforward solutions.

That's what our new course "Bombproof Web Design" will equip you to do. Through fifteen easy to follow video lessons I'll personally guide you through exactly what to watch out for, and the steps to follow to "Bombproof" all your sites from here on out.

The first two videos are completely free, so go ahead and take a sneak peak at "Bombproof Web Design" now: 

Watch 2 Free Videos from Bombproof Web Design

I'll see you there!















September 2, 2014

New Course: Building Your Own Pattern Library for the Web

What You'll Learn

Have you ever heard about patterns in web design? In our latest course on Building Your Own Pattern Library, expert instructor Adi Purdila will teach you what they are, how to build one, and how to properly maintain it.

You'll learn how to build simple components like buttons and forms, as well as more complex ones, like carousels. Additionally, you'll learn how to create an awesome presentation page for all of these patterns.

  • If you're a beginner web designer or theme developer, you may find that you often repeat yourself, designing and building the same modules for your websites. Popular frameworks such as Bootstrap often add bloat to a project, so this course will help you develop your own reusable collection of web patterns.
  • Improve your HTML, CSS and JavaScript skills by practicing a modular workflow.
  • Work towards building a complete pattern library which you can take away and use to speed up your own projects.
  • Learn how to maintain your library and use modern tools to collaborate with others on its development.

Watch the Introduction

Subscribe or Buy Now

Take a look at our monthly or yearly subscription options to access everything at Tuts+ — all our courses, eBooks, subscriber benefits, and more. Or, if you're just interested in this course, you can buy it individually for $15!

Part of the Pattern Library you'll be building
September 2, 2014

Building a Logger Mixin in Sass

In this tutorial we'll build a "logger" mixin, which outputs a flexible, informative log as CSS when Sass is compiled.Logging is the process of recording application actions and state to a secondary interface. - Code ProjectThe IdeaThe other day, Neat ...