Wednesday, July 31, 2013

General CSS notes, advice and guidelines

General CSS notes, advice and guidelines

CSS Document Anatomy

No matter the document, we must always try and keep a common formatting. This means consistent commenting, consistent syntax and consistent naming.

General

Limit your stylesheets to a maximum 80 character width where possible. Exceptions may be gradient syntax and URLs in comments. That's fine, there's nothing we can do about that.

I prefer four (4) space indents over tabs and write multi-line CSS.

Sunday, July 28, 2013

Pure: What, Why, & How?

Pure: What, Why, & How?
This tutorial will introduce you to Pure, a CSS library made of small modules, that can help you in writing completely responsive layouts, in a very fast and easy way. Along the way, I'll guide you through the creation of a simple page in order to highlight how you can use some of the library’s components.

Why Create Responsive Layouts?

Over the past few years in web development, three words that are bouncing around, over and over again are: Responsive Web Design (RWD).

Wednesday, July 24, 2013

Simple Responsive Images With CSS Background Images

Simple Responsive Images With CSS Background Images
On an iPhone, a 290 × 183 pixel image that is 18 KB in size looks identical to the 452 KB, 1940 × 1229 pixel image on the MacBook Pro.

With all the talk of new HTML5 standards such as the srcset attribute and <picture> element, as well as server-side techniques such as Responsive Web Design + Server Side Components (RESS), you'd be forgiven for concluding that simple, static websites can’t support responsive images today. That conclusion might be premature, however. In fact, there's an easy, straightforward way to deliver responsive images that's supported by all of today's Web browsers: CSS background images.

Tuesday, July 16, 2013

Coding A Responsive Resume In HTML5/CSS3

Coding A Responsive Resume In HTML5/CSS3

Almost everybody in the business section has created a resume at some point. When working as a freelancer you are always vying to land new projects. Because of this transitory work cycle it helps to offer potential clients a brief peek into your past experience. And what a better opportunity than offering your professional resume online?

Tuesday, July 16, 2013

Photoshop’s Role in a Web Design Workflow

Photoshop’s Role in a Web Design Workflow
kuhboom.com: Densely textured web designs will have you reaching for the slice tool.

The web has undergone some serious changes in recent years and the way in which the web is designed is changing along with it. Photoshop may still be the "go-to" tool for many web designers, but for some, Photoshop is no longer king. In this article, Ian Yates, Editor of Webdesigntuts+ will explain how Photoshop was used in the past, how it can be used in the future, and why.

Sunday, July 14, 2013

Getting started with CSS sourcemaps and in-browser Sass editing

CSS sourcemaps and in-browser Sass editing

CSS sourcemaps allow the browser to map CSS generated by a pre-processor, such as Sass, back to the original source file, including exactly which Sass mixin, placeholder or variable is responsible for a given line of CSS. And when you combine sourcemaps with Chrome's new in-browser local file editing (workspaces) and automatic stylesheet reloading, you end up with a very fast in-browser editing workflow.

Saturday, July 13, 2013

30 Useful Responsive Web Design Tutorials

30 Useful Responsive Web Design Tutorials

This list is not meant to be an exhaustive one but it will get you started on understanding the basics of designing an adaptive website that will cater to all sorts of screen sizes.

We'll start off with introductory tutorials in "Breaking the Ice", something like an RWD: 101 class you should attend to get the hang of the concept before we move on to "Start Building" exercises.

Friday, July 12, 2013

Web Design: 20 Hottest Trends To Watch Out For In 2013

Web Design: 20 Hottest Trends

The design influence is merely a reflection of our culture and expectations for user interfaces. Ideally these trends represent favorable ideas in the web design community. However designers will always have their own opinions when it comes to design terms, so take these ideas with a grain of salt.

If you are interested, keep your eyes peeled for examples of these trends and techniques.

Friday, July 12, 2013

Life Beyond 960px: Designing for Large Screens

Life Beyond 960px

The premise behind a responsive web isn't purely that websites be built in a mobile-friendly way. It's about setting our content free so that it can be experienced by whatever means necessary – and that includes at large scale. Let's take a look at the design considerations behind the often neglected huge desktop screen.

Thursday, July 11, 2013

CSS3 Multiple Column Layout Module

CSS3 Multiple Column Layout Module

The Multi Column Layout Module has been introduced to help us create columns quickly and easily using CSS3 only. In this tut I'm going to be taking a look at some of its properties and demonstrate them through a series of examples.

Tuesday, July 09, 2013

Expanding Search Bar Deconstructed

Expanding Search Bar

Summarized, this is what we want the search component to do:

  • Initially, we only want to show a button with a search icon.
  • When clicking on the icon, we want a search input to slide out.
  • The component should be fluid, meaning that we can use it in a responsive context.
  • When we type something we want to be able to submit the form by either hitting enter or clicking on the search icon.

Tuesday, July 09, 2013

View Mode Switch

View Mode Switch

A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

Tuesday, July 09, 2013

Responsive Icon Grid

Responsive Icon Grid

A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.

Tuesday, July 09, 2013

Loading Effects for Grid Items with CSS Animations

Loading Effects for Grid Items with CSS Animations

Today we'd like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we'd like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.

Tuesday, July 09, 2013

Caption Hover Effects

Caption Hover Effects

Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.

Saturday, July 06, 2013

A Beginner’s Guide to Wireframing

A Beginner’s Guide to Wireframing

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you've yet to use wireframing, it’s time to get your feet wet...

Saturday, July 06, 2013

Designing the dreaded form: getting creative

Designing the dreaded form

In my first article "Designing the Dreaded Form" I discussed planning your forms ahead time by selecting proper UI patterns and handling the dreaded long forms. But the generic title for the article completely left out the “design” part of the form. Although planning ahead is a hugely important part of any design process — the focus on the previous article, this article aims directly at the visual design aspects of the dreaded form.

Saturday, July 06, 2013

Centering Percentage Width/Height Elements

Centering Percentage Width/Height Elements

If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the width and height of the element you're trying to center, but what if they are percentages?

Monday, July 01, 2013

Some cool CSS selectors’ addition in selectors level 4 – The future

cool CSS selectors
The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as "Selectors level 4". Selectors have been with us since the beginning of CSS. Most awaited selector of level 4 is; Parent Selector of a given element. This advance selector will offer the possibility to target parent of any element without javaScript. There are many such new cool selectors in this level that make website management easier.