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 firmata1 original Raspberry Pi with Raspbian, Node.js & 4gb of storage1 Magicians chassis1 SN754410NE Quad Half H-Bridge to drive the motors1 dual-output mobile battery backA custom mount for the Pi & some custom USB cabling for power Why Raspberry Pi The main controller is a Rpi. It turns 2 small motors by delegating instru…

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 homeSo You Want to Build ElectronicsHow 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 I think any good Mak…

The factory, not just R&D, can be on a desktop

3D printing is certainly a hot topic and it hasn't even hit its stride. The machines are getting smaller, more accurate & cheaper. We're seeing less toy/protoypes and more "real products" - even a life-size robot!

But to make a final product, you need more than just the frame. New Startups are entering the arena to enable a Maker to complete the entire product development lifecycle in their own workshop.
Circuit Board Prototyping

The folks at AgiC sourced special conductive tape that only conducts in the Z-axis so soldering a SMT is literally just placing it on paper.
Milling

The mill can cut out tons of materials from copperclad for more permanent circuit boards to metals.
Pick & Place
I saw an more updated version of the machine and I was surprised how impressive it was (and no idea how expensive a real P&P cost!)
Is it ready yet for my apartment? Not quite. These startups are just getting off the ground. Furthermore, if you were to buy all of them it w…