Showing posts with label layout. Show all posts
Showing posts with label layout. Show all posts

Tuesday, December 18, 2012

Responsive column layouts

Responsive column layouts

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn't require any first or last class and the number of columns can be adjusted base on the viewport. In other words, it can be toggled from 4-column to 3-column or 2-column, etc.

Friday, December 14, 2012

Designing responsive websites (AKA mobile sites) properly

Designing responsive websites

Over the course of my career, I have been very fortunate to work with many creative and talented UX/UI and Visual designers that were able to come up with great solutions to very complex problems. Luckily, I still do. But whereas many of my creative colleagues have kept the pace with the advances of technology, it'd seem to me that others are struggling to design responsive websites properly.

Thursday, November 29, 2012

Responsive frameworks

Bootstrap

Bootstrap is a 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls and even a web-based Customizer. Bootstrap utilizes LESS CSS and is compiled via Node. It is probably one of the best know and mature responsive frameworks around. Check the examples to see it in action.

Tuesday, November 20, 2012

Give floats the flick in CSS layouts

Give floats the flick in CSS layouts

If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative ways is the height of skill. If you have consumed as many CSS layout tutorials as you can find, you might suppose that mastering floats is a rite of passage. You'll be dazzled by the ingenuity, astounded by the complexity and you'll gain a sense of achievement when you finally understand how floats work.

Don't be fooled. You're being brainwashed.

Monday, November 19, 2012

CSS display: inline-block: Why it rocks and why it sucks


CSS display: inline-block

Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block.

Monday, November 19, 2012

Cross-Browser inline-block

Cross-Browser inline-block

Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. Too many times have I received PSD files like this:

Cross-Browser inline-block

and begin to cry.

Friday, November 16, 2012

Understanding the viewport meta tag

Understanding the viewport meta tag
When working on a new web design one of things you need to think about is responsive design. Is the website you are about to make going to need a responsive design?

I think all external facing sites should take responsive design into consideration. There are some people who think that responsive design is not worth it as people on mobile devices can zoom in to see what they want, but I feel developers should make a website easy to use on any device.

Monday, October 22, 2012

The Web Aesthetic

The Web Aesthetic

It is the nature of the web to be flexible and it should be our role as designers and developers to embrace this flexibility and produce pages which, by being flexible, are accessible to all.

Monday, October 22, 2012

The Infinite Grid

The Infinite Grid

Grid systems are a key component of graphic design, but they've always been designed for canvases with fixed dimensions. Until now. Today we're designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment — a medium capable of displaying a single layout on a smartphone, a billboard in Times Square and everything in between.
We're designing for an infinite canvas — and for that, we need an infinite grid system.

Wednesday, September 26, 2012

Magazine-like layout for the web with CSS regions and exclusions

Magazine-like layout for the web with CSS regions and exclusions

The web is an extremely powerful platform for text, an area where Adobe has a great deal of experience and expertise. When Adobe was looking for ways to help move the web forward, therefore, advancing the web's text capabilities even further seemed like an obvious place for us to start. The web generally assumes a single column, vertical orientation for text. Although it's possible to flow text around graphics, and even to format text into multiple columns with CSS, it's still very difficult to achieve true magazine-like layout on the web. With CSS Regions and CSS Exclusions, Adobe is spearheading the effort to bring the power of desktop publishing to modern browsers. For instance, in the screenshot below, CSS Exclusions is being used to flow text along the contour of the mountain:

Monday, September 17, 2012

Making Room to Breathe: Wrapping Text Around Elements

Wrapping Text Around Elements

I constantly look through websites and wonder why designers allow text and images to get a little too close. Why don’t the elements have room to breathe?

Monday, September 17, 2012

Working with CSS regions and shadow DOM

CSS regions and shadow DOM

When we set out to develop CSS Regions we knew that most innovative applications of the technology would come from creative integrations with other web standards. Shadow DOM is one such example of a web standard just itching to be experimented with.

Wednesday, September 12, 2012

CSS Positioning

CSS Positioning

To use CSS for layout effectively, it helps to know how it's used to position page content. This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for.