Responsive layouts are everywhere on the web. But, for e-mails (whose standards almost never changed), usually, we still prefer fixed-width layouts.
Antwort is a free newsletter template that still uses tables but manages to provide a responsive layout.
It is a multi-column layout where columns are transformed into rows in smaller screens.
And, the template works in all major e-mail clients (including Outlook).
The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes.
Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly.
The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all.
Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).
Modal boxes are so functional in displaying any HTML content with a focused interface and there are many great ones around.
iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite.
It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode.
The gallery mode can display other items as thumbnails and allows browsing via keyboard, mousewheel and touch events (swipe).
There are retina-ready skins, it can be completely customized and
iLightbox can also be used as a good-looking replacement for JavaScript’s alert, prompt and confirm dialogs.
It has a powerful JavaScript API for customizing it further when needed. And, yes, it is responsive.
The plugin supports a wide range of browsers starting with IE7+ and works with mobile ones too.
For WordPress fans, there is also a WordPress plugin offered which is compatible with the regular wordpress gallery shortcode
Many web designers now have a favorite front-end framework for developing sites easily.
Groundwork is another good alternative that is built with SASS + Compass and offers an advanced responsive layout.
It has a flexible, fluid and nestable grid system which makes creating any layout possible.
The framework includes many UI components like tabs, buttons, forms, navigation, icons and more.
Groundwork is documented very well and there are templates to get started quickly.
There are many ready-to-use frameworks and kits for creating responsive websites.
For anyone who is in search of a simple and focused resource for such layouts, here is Responsive Boilerplate.
It is a lightweight (only 2kb) base that makes use of CSS3, for bringing responsive websites to life.
The boilerplate has a single container + a 12-column grid and supports any content with images, video or fluid media with major breakpoints.
Also, the download package include a PSD grid, Sublime snippets and some JavaScript for responsive navigations.
If you are looking for a quick way to create a good-looking portfolio website, there is a nice and professional option for that: Showkase.
Showkase is a self-hosted, PHP-powered and very easy-to-use app for building HTML5 portfolio websites.
It has a portfolio-focused, simplified admin interface where new pages (about and contact us pages) can be added, galleries can be created and images uploaded.
Images can be uploading with multiple ways, Showkase auto-creates the thumbnails and they can be ordered with drag ‘n’ drops.
The galleries can be presented with a choice of multiple viewers (JuiceBox or SimpleViewer) where both supports a chic navigation with thumbnails prev-next and/or bullet navigation options.
There are 3 built-in themes and new themes can be created with ease (uses Smarty 3 template engine).
Besides these galleries, there is also a “Library” feature for uploading images and using them within the site.
Websites created work pretty fast as the app creates lightweight HTML pages and doesn’t make any database queries.
Also, when it comes to different devices and browsers, Showkase themes are responsive and they work well on tablets + mobile as well.
Showkase is giving away 3 Standard licenses ($49/each) to WRD readers.
In order to join the giveaway, just comment this article and winners will be sent 1 week later (4 Feb 2013) randomly with the query below:
SELECT * FROM wp_comments WHERE comment_post_id=3627 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3
Good luck.
Here they are:
Congratulations.
xyCSS is a simplistic and lightweight CSS framework (with a single CSS file) for building responsive and liquid layouts.
It includes styles for the structure + typography and focuses on clean, semantic markup.
The CSS reset used is the popular one from Eric Meyer. It is ready to support any device with any resolution and there is a detailed documentation with demos.
Also, it has a wide-range of tools for working easier including jQuery plugins for displaying a grid in the background or changing the srceen width, xyCSS-compatible WP plugins and more.
Profound Grid is a fresh grid system for creating responsive layouts (fixed and fluid).
The grid system uses semantic markup and renders just the same in all browsers (it is using negative margins to calculate columns).
It is built with SCSS, has support for nested grids and rules for pulling/pushing columns.
There are various examples provided in Profound Grid’s website and a documentation helps learning it (which is pretty straightforward).
For any web designer/developer willing to build a quality and good-looking website quickly, Bootstrap is probably the 1st option that comes to mind.
It is an impressive front-end framework with the wide range of elements + components it includes and the consistency (in means of design + functionality) of each of them.
Today, we are releasing an amazing and exclusive freebie for WRD readers: a free Bootstrap template: Bootstrapper which is designed by the popular template marketplace FlashMint and comes with the HTML5-CSS3 + PSD source files.
Bootstrapped is a perfect fit for the website of any creative individual, company or app/service: like designers, photographers, developers, web agencies, a product, etc. Almost any use.
It is responsive and includes a slider in the frontpage to showcase any content wanted and a slider of featured works + latest news.
A portfolio page exists with a choice of 2-3-4 columns where items can be categorized and sorted with the popular Isotope interface.
Also, there are pages for About, Contact and a possible blog (listing and entry pages).
And, a footer completes the design with the ability to present the latest tweets, a quick contact form, testimonials and Flickr stream. Of course, you can customize them however you wish.
Like mentioned, the Bootstrapped is brought to WRD readers freely by FlashMint, thanks very much to them. And, if you are hunting for more Bootstrap templates, they have a pretty big library of professional Bootstrap templates.
Bootstrapper is free to use in both personal and commercial projects without the need of any attribution. However, it can not be redistributed (and please link to this post for any links to downloads, thanks very much).
CSS Browser Selector + is a tiny JavaScript code that empowers CSS selectors, enabling us to write specific CSS code for each operating system and browser.
It forces no hacks but promotes compliant code and also provides an alternative method of mediaqueries for older browsers.
The details it can detect include browser, browser version, platform, platform version, device, device version, min-width/max-width screen detection and orientation screen detection (landscape or portrait).
A sample usage would look like: <html lang="pt-br" class="webkit chrome chrome21 win win8 js orientation_landscape minw_980 maxw_1199"> that is pretty self-explanatory.
