#want Web Platform Frontend Toolkit

The Div Soup problem

Turnkey 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 toolkit

What 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

Notice how almost all the features touch responsive design in some way? Responsive design is in such a greenfield state and that’s where we need to most help as a community.

Available Resources

One 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

• Solved by Flexbox
• The Ultimate Flexbox Cheatsheet

Viewport-sizing

• Viewport Sized Typography
• Which CSS Measurements To Use When
• Web Typography: Using The Golden Ratio and REM’s
• Font sizing with REM

Scalable elements

• FlowType.JS
• Responsive Data Table Roundup
• Grid Forms
• ResponsiveImages.org
• 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
• FitVids.JS
• Responsive Elements

Themes

I haven’t seen anyone try to make a CSS3-based theme off of var() & calc().

Native & semantic elements

• dialog element: Modals made easy
• Web Components & Polymer polyfills

Tools

• RWD Wireframes
• Screen Siz.es
• Sass-CSS Utitilies
• Bourbon
• PXtoEM

Ideas for more links? Found a solution I missed? Leave a reply in the comments.

./+Jonathan Beri