Custom responsive grid
It's easy to extend the basic grid styles into a custom responsive layout by using CSS media queries to adjust the layout and design across various screen width breakpoints.
This example is a typical news feature block that changes its layout across screen widths and illustrates how to change the grid ratios and overall layout with simple CSS. It starts as a simple set of stacked stories on phones, that goes to a layout with the lead story full width stacked over a 50/50 layout of the secondary stories. At wider widths, these secondary stories float next to the lead story in a 50/25/25 layout. When the screen gets very wide, the font size is bumped up to keep line lengths short.
Use the view source button below to see how the media queries work for each of these breakpoints.
Apple schedules 'iPad Mini' event for October 23
One of the worst-kept secrets in tech has been confirmed: Apple will hold an event October 23 in San Jose, California, at which the company is widely expected to unveil a smaller, cheaper version of its popular iPad called "Mini".
Microsoft Surface tablet goes on sale for $499
The Microsoft Surface tablet picture has come into focus. The Redmond giant filled in the blanks on the new tablet's availability and specs.
AOL unveils Alto, an email service that syncs 5 accounts
AOL, struggling to shed its outdated image, is reimagining one of the most visibly aging parts of its platform: Its email service.