Flexbox is really amazing: it allows for easy vertical centering, effortless responsive layouts, and elements ordering independent from source order. However, as it is now, the implementation is spotty and it requires a mix of old and new syntax to work in all browsers. The flexbox layout module introduces many new properties, and it is easy to get confused at first. Css-tricks.com and smashingmagazine.com have a few comprehensive articles about the “magical” flexbox. Take the time to learn it, as it is the way we will create layouts in the future.
• A comprehensive Guide to Flexbox
• Using Flexbox
• Does Flexbox have a Performance Problem?
• Flexible Box Layout Explained (2011)
• Designing With Flexbox is As Easy As Pie
The smooth-scroll js plug-in we have been using has a small issue with Modernizr. To make it work with Morenzr, you need to include new event, and include the $(document).ready function inside of it. The original answer can be found here. This is a sample code:
// test for media query support, if not load respond.js
test : Modernizr.mq(‘only all’),
// If not, load the respond.js file
nope : ‘../js/respond.min.js’
Relative font size is an essential part of designing responsive layout. It is, however, not always easy to picture just how big 3.375em really is in that specific font. Enter type-scale. It is a free tool that allows you to choose a web font, and visually show it at various em sizes. Quite handy!
Joshua, a previous student, recommended this great site, Codrops. You can find articles, demos, tutorials and code sources. Check it out!
If you are looking for a way to test your CSS Greatness, look no further than CSS Diner. This simple app will test your knowledge of CSS selectors, from the most basic to the most complex. It is also a wonderful source for reviewing the most obscure selector and see how they work.
Nth of Type with a formula anyone?
Photo galleries are a very common feature in modern websites, but they may create problems when developing a responsive site. Lucky for us, though, there are many, excellent, galleries out there that, not only offer responsive features, but usually incorporate also touch events, such as swipes for images. bxSlider, Photoswipe, Fresco and Galleria are four good ones. They are very easy to implement and seem to work on a variety of devices.
Do you hate math? You are not alone. Flexible grids are awesome, but if you are starting with a fixed-width comp, you need to convert all these values in percentage. Who had the time for that? Enter the Responsive Calculator. It will do the math for you, and provide the code necessary. It also applies the box-sizing:border-box if you like. No more excuses: be flexible my friend.
There are many, many different tools for wireframing. These below are two interesting ones: Moqups offers a free plan, while WRD Wireframes is completely free.
There are many source of inspiration out there. These are two of the best known galleries of great responsive designs.