Posts Tagged ‘Techniques’

We are pleased to present below all posts tagged with ‘Techniques’.

Absolute Horizontal And Vertical Centering In CSS

In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights. — Ed.

We've all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering... until now! But actually (spoiler alert!) absolute centering only requires a declared (variable) height and these styles.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

I'm not the pioneer of this method (yet I have dared to name it Absolute Centering), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article.

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...

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

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...

Choosing A Responsive Image Solution

If you code websites, it’s a good bet that at least one of your clients has asked about or requested a mobile-friendly website. If you go the responsive design route (whereby your website is flexible enough to adjust visually from mobile to desktop widths), then you’ll need a strategy to make images flexible, too — a responsive image solution.

Choosing A Responsive Image Solution

The basics are fairly simple to learn, but once you’ve mastered them, you’ll find that scaling images is only the beginning — you might also have performance and art direction conundrums to solve.

Read more...

Building A Portable Design Toolkit

It’s easy to get overwhelmed by the staggering array of resources and options available to designers. In this article, we’ll explore the idea of consciously restricting yourself to a set of core tools that you know, love and trust.

Building A Portable Design Toolkit

Take a traditional craftsman — let’s say a carpenter. While they may have access to a wide range of tools in their workshop, they will take a bag with just a few carefully chosen tools when working away. Similarly, an artist may have a wide range of paints, brushes and accessories in their studio, but will carefully select a limited palette and a few choice brushes when painting in the field.

Read more...

How To Create A Twitter Widget

Twitter needs no introduction. It has become the way to reach audiences for some people and companies and a place to hang out for others. Placing a Twitter feed on one’s website has almost become compulsory.

How To Create A Twitter Widget

Embedding a feed isn’t all that difficult if you are comfortable with Twitter’s default widget, but making your own will enable you to blend it into your website seamlessly.

Read more...

When Editors Design: Controlling Presentation In Structured Content

Thanks to the skyrocketing popularity of mobile devices, a new generation of designers and CMS developers has found the religion of Structured Content. Once the domain of semantic markup purists and information architects, structured content models are at the heart of most multi-channel and multi-device Web projects.

When Editors Design: Controlling Presentation In Structured Content

At Lullabot, we often work with media, publishing and enterprise clients. Those businesses produce so much content and manage so many publishing channels that keeping presentation and design-specific markup out of their content is an absolute requirement. Unfortunately, this doesn’t mean that editors and writers are content with rigid, predictable designs for the material they publish.

Read more...

↑ Back to top