#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

Viewport-sizing

Scalable elements

Themes

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

Native & semantic elements

Tools

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

./+Jonathan Beri

Show your support

Clapping shows how much you appreciated Jonathan Beri’s story.