Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

In the past, we featured some exciting tools and libraries: PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin and CSSComb. All of them have been developed and released by active members of the Web design community as open-source projects. Today, we present LiveStyle, a plugin for live bi-directional (editor ↔ browser) CSS editing of the new generation! — Ed.

Tools for live CSS editing aren't new these days. You may already be familiar with tools like LiveReload, CodeKit and Brackets. So, why would someone ever need to create yet another tool and even call it a "live CSS editor of the new generation"?

Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

The tool I'd like to introduce to you today is Emmet LiveStyle. This plugin takes a completely different approach on updating CSS. Unlike other live editors, it doesn't simply replace a whole CSS file in a browser or an editor, but rather maps changes from one CSS file to the other.

Read more...

Type & Grids: Free Responsive HTML5 Template

Today, we are pleased to introduce Type & Grids, a free responsive HTML5 template by Jeremiah Shoaf. It looks great on all devices, including desktops, laptops, tablets and phones. All of the content resides in a single HTML file, so setting it up is super-simple.

Type & Grids: Free Responsive HTML5 Template

Its extensive customization options set Type & Grids apart from other templates out there. The template has 21 type themes and 29 color themes built in, giving you over 500 unique design combinations.

Read more...
Advertisement Advertise with us!

A Journey Through Beautiful Typography In Web Design

First impressions are lasting impressions. Whether you realize it or not, your typography helps to create an experience for users before they’ve even read a word or clicked a button. Typography has the potential to go beyond merely telling a story — it shows the user who is behind the website and what you’re about. The treatment of type creates an atmosphere and elicits a response much the same way as tone of voice does.

A Journey Through Beautiful Typography In Web Design

You need to ask yourself, what do you want to say and how do you want to say it? Consider the user: What do you want them to feel and experience when the page loads? Typography establishes a mode of communication and, in turn, the personality of the website. The choice of typeface will determine how people respond to your website.

Read more...

Teaching Web Design To New Students In Higher Education

The Web is evolving rapidly. Front-end Web development has been majorly affected by recent changes in coding techniques and approaches. In 2003, a competent front-end Web developer would have known HTML and CSS, possibly with a bit of copy-and-pasted JavaScript, and they built websites that would be viewed on desktop computers.

Teaching Web Design To New Students In Higher Education

Not so in 2013! Now, a competent front-end Web developer is well-versed in HTML and CSS, JavaScript and jQuery, CSS preprocessors, new techniques such as responsive design and mobile first, and a world of new devices for viewing websites.

Read more...

The “Other” Interface: Atomic Design With Sass

As front-end developers and designers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future, when adjustments or full-scale redesigns must be made.

Yet we tend to assign the role of “user” to the first group, often forgetting that the code we write must work for developers in a similar way. We shouldn’t forget that developers are users, too.

Read more...

Desktop Wallpaper Calendars: August 2013

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork. And as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd.

Desktop Wallpaper Calendar: August 2013

This creativity mission has been going on for over five years now, and we are very thankful to all the designers who have contributed and are still diligently contributing each month. This post features free desktop wallpapers created by artists across the globe for August 2013. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine by taking part in our Desktop Wallpaper Calendar series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?
Read more...

Part TwoHow To Fix The Web: Obscure Back-End Techniques And Terminal Secrets

Editor's Note: Today we are happy to present to you the second part of the sample chapter from the upcoming printed Smashing Book #4: New Perspectives on Coding, written by Paul Tero. You might want to read the first part of this chapter beforehand — if you haven't already. Also, feel free to download the full chapter from the Smashing eBook Library.

Imagine that you wake up one morning, reach groggily for your laptop and fire it up. You’ve just finished developing a brand new website and last night you were proudly clicking through the product list. The browser window is still open, the Widget 3000 is still sparkling in its AJAXy newness.

How To Fix The Web: Obscure Back-End Techniques And Terminal Secrets

You grin like a new parent and expectantly click on “More details”. And nothing happens. You click again, still nothing. You press Refresh and get that annoying swirling icon and then the page goes blank. Help! The Internet is gone!

Read more...

↑ Back to top