The Div Soup problemTurnkey Frontend frameworks like Bootstrap & Foundation are great - but are not for me. They don't feel like I'm building for the web. Frameworks by definition are opinionated but class="col-md-4" loses all semantic meaning. And in order to enable even the most simplest of layouts or style, one needs to wrap div on top of div, creating an illegible "div soup." Lastly, "mobile-first" is definitely a growing theme, but all of the above lack guidance on building amazing responsive layouts & designs.
Call for a toolkitWhat I'd love to see is a "Web Platform frontend toolkit." As oppose to a framework, a toolkit doesn't hide away the features of the web and provide the tools needed to build apps rapidly.
What kind of tools? Tools like robust layouts built on Flexbox. Tools like REM calculators. And tools like polyfills for responsive videos that have yet made into specs.
Features could include:
- Layouts that fits the screen & resize with Flexbox
- Viewport-sized font using vw, vh, vmin & vmax
- Elements that scale, like images, videos & tables
- Themes with CSS variables & math
- Native, semantic elements like header, progress & dialog
- Tools to round out design, like ratio calculators & design validators
Available ResourcesOne of the best resources on responsive design is This Is Responsive /by +Brad Frost. Besides having a list of great resources, I especially like the exhaustive list of patterns with sample code. I'm also excited about new projects like Myth and the +Yeoman mobile-first generator.
Between This Is Responsive and links I've found, here is a brain dump of ideas in case someone out there is thinking about solving the toolkit problem.
Layouts that fits
- Viewport Sized Typography
- Which CSS Measurements To Use When
- Web Typography: Using The Golden Ratio and REM’s
- Font sizing with REM
- Responsive Data Table Roundup
- Grid Forms
- Responsive IMGs Part 2 — In-depth Look at Techniques
- Which responsive images solution should you use?
- WebKit Has Implemented srcset, And It’s A Good Thing
- Responsive Nav
- Responsive Elements
Native & semantic elements
Ideas for more links? Found a solution I missed? Leave a reply in the comments.