YAMB - Yet Another Mobile Boilerplate - is a tool for responsive web design.

DOWNLOAD AND ENJOY TUTORIAL ON RESPONSIVE WEBDESIGN & YMAB

YAMB is a small set of tools and best practices that allow web designers to build responsive websites faster. Websites built with YAMB will be optimized for screen widths between 320px and anything. Resize your browser to check it out.

YAMB includes features that are requested by the clients all the time:

• Fluid grid layout.

• Drop-down menu with possibility of unlimited sub-levels or/and mega subs.

• For small screens drop-down menu is automatically converted into select box.

• Responsive image slideshow with captions.

• Responsive images in content part of the website

How To use YAMB

1. Download archive with all the source files.
2. Unzip and inspect demo.html. The code is well commented.
3. Insert your own pictures, caption, menu links and content into Demo.html.
4. Add new styles for your own content to the main stylesheet: style.css. NOTE: you only need to edit style.css.
5. Test to see what touch ups to CSS and HTML are needed. Don't forget to resize your browser to see how your content will look on smaller screens.

There are some things YAMB automatically takes care of:

• Adjust width of all the columns for smaller resolutions. Columns begin spanning half of the parent container width when screen size is max. 600px, and 100% of the parent container width when screen size is max. 480px.
• Convert main menu into select list box when screen size is max. 480px.
• Adjust width and height of images in slideshow and content area (scale proportionally) for any resolution.
• Hide address bar after the page is loaded on mobile devices.

When you will add your own content and styles, remember to test often and add necessary updates to the media-queries section of main stylesheet: style.css. Rest of the CSS files are:

1. normalize.css. Normalization stylesheet by Nicolas Gallagher and with Jonathan Neal.
2. grid.css. Responsive grid by Tiny Fluid Grid.
3. superfish.css. Main menu.
4. flexslider.css. Responsive image slideshow.

It's advisable that all changes are done in the last CSS file, style.css. They will override the styles in the other CSS files.

DOWNLOAD AND ENJOY TUTORIAL ON RESPONSIVE WEBDESIGN & YMAB