Skip to main content

#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.

Popular posts from this blog

My weekend project: an Arduino, Raspberry Pi & Node.js robot

Yes I know, I'll get more buzzwords when I my JavaScript creates Cloud Synergy - but after I Pivot. I've been spending my wee few hours a week designing, tinkering and finally building my little robotics platform. I've had ideas brewing for a while but haven't had enough time outside of work to start hacking. It all started when I first saw Rick Waldron's Johnny Five framework  for Node.js. Sensors are asynchronous, so, ya, a node.js robot framework makes sense. A few months later I started sketching designs, reading up on firmata  and buying my arduino & Pi. Before the what & why, here's the basic BOM: 1 Arduino Uno R3 running firmata 1 original Raspberry Pi with Raspbian, Node.js & 4gb of storage 1 Magicians chassis 1 SN754410NE Quad Half H-Bridge to drive the motors 1 dual-output mobile battery back A custom mount for the Pi & some custom USB cabling for power Why Raspberry Pi The main controller is a Rpi. It tur

A Maker's Equipment List

I've been building up a nice supply of tools and components so I decided it is high-time to build a small workspace in my tiny SF apartment. There were things I knew I still needed but wrestled with some tough choices (like which Oscilloscope to buy.) I wanted either a nice Wishlist on Amazon or at least a great list to start my journey. I found a few decent starting points in the form of video & blogs: How to set up an electronics lab/workshop at home So You Want to Build Electronics How to equip your EE lab The first link is actually a transcription from +EEVblog /by +Dave Jones ( EEVblog is an awesome blog and YouTube channel, you should subscribe .) The second blog /by  +Kenneth Finnegan  covers more of the components side. What I couldn't find is a complete compiled list with links to purchase. So I made one! I put together a simple Amazon Affiliate store called Maker Workbench Equipment List . I merged what I thought made sense and added a bunch of items

Google+ Pages, Events and Hangouts On Air for organizers (part 1)

If you run a conference, meetup or event, you're probably thinking about increasing your presence on Google+. I've recently helped a few folks set up their Google+ presence in haste so I thought it would be worth typing notes on what you need to know. I've observed 3 types of events being organized on Google+: A yearly conference or unconf that it is a stand-alone brand, such as CES . An umbrella conference with several related or affiliated events, like JSConf . A broad collection of many local communities, such as the Google Developer Groups . In this multipart series, I'll dive into each main part:   Google+ Pages ,  Events  &  Hangouts On Air , starting with Google+ Pages. I'll also touch on YouTube channels. Google+ Pages In the past, organizers would create a brand new email for their event, like myconf-needs-a-gmail@gmail.com. You don't need to do that anymore. Actually, DON'T CREATE ONE OFF GMAILS ANYMORE!  Using you're existing