Oh-Flex! Toolkit

Flexible Designs with no custom CSS
Oh-Flex Objective: Help non-designers build flexible and beautiful interfaces using only HTML attributes.

Examples
The following examples were built using only Oh-Flex attributes - no custom CSS.
iOS Mail Example (widescreen)

A mockup of iOS 11 Mail using only tag attributes (or class names)

iOS Messages Example (widescreen)

A mockup of iOS 11 Messages using only tag attributes (or class names)

Brandon's Portfolio

My version of a modern day resume

Facebook (widescreen)

A mockup of Facebook on the Tablet

Documentation
Oh-Flex Style Guide

(work in progress)

Github
Installation
Just the Stylesheet
From Source
In your own SASS file
What's the Point?

I've been a product consultant for most of my adult life. Often I'm brought in to help development teams with little or no UI or UX skills build products that don't suck - without a dedicated creative resource.

Time and time again I would see the following: Dev team starts a new project using whatever the year's hottest UI framework is - and all starts off swimmingly. Then they start hitting all of the outlier design patterns that aren't included in their framework - and the hacking begins. It's usually an innocent: "I'll just through it over here in main.css", but over the years the once tame "main.css" has turned into a 12 headed monster.

A year ago, I was presented with the previous scenario and I postulated that if they hated CSS so much, then why not just get rid of custom CSS all together?

All of the CSS and attributes I've used over the years has now be combined into a single CSS file that can be added to any project using any UI framework - without causing any UI interference.

What's included?
Insane Flexibility

Oh-Flex should work with any existing UI library - including Bootstrap, Angular Material, SemanticUI, etc. Everyhting is prefixed as to not mess up any existing design.

Flexbox

.f-rubber, .f-flex, .f-row, .f-column, .f-grow, .f-shrink

List Item

A sensible and simple list item using flexbox

Toolbar

A highlevel toolbar class for creating flexible and responsive toolbars.

Layout Control

Have sticky headers and footers, side menus and the likes - without a bunch of crazy code.

Margin and Padding

Pixel level control of padding and margin with shortcuts. .f-p-20px adds 20px padding on all sides. While .f-p-b-10px adds padding to the bottom.

Font Size and Colors

Pixel level font control .f-t-20px .f-t-bolder .f-t-bold