Flexible Designs with no custom CSS
Oh-Flex Objective: Help non-designers build flexible and beautiful interfaces using only HTML attributes.
A mockup of iOS 11 Mail using only tag attributes (or class names)
A mockup of iOS 11 Messages using only tag attributes (or class names)
My version of a modern day resume
A mockup of Facebook on the Tablet
(work in progress)
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.
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.
.f-rubber, .f-flex, .f-row, .f-column, .f-grow, .f-shrink
A sensible and simple list item using flexbox
A highlevel toolbar class for creating flexible and responsive toolbars.
Have sticky headers and footers, side menus and the likes - without a bunch of crazy code.
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.
Pixel level font control .f-t-20px .f-t-bolder .f-t-bold