FlexboxPatterns

Build awesome user interfaces with CSS flexbox

get it
#5 Product of the WeekApril 20, 2016
+1

Reviews

Discussion

You need to become a Contributor to join the discussion - Find out how.
Ben Tossell
Hunter
@bentossell · Partner https://theupstarters.co/
From the site: These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end, and you can start using them in your own code right away.
Elia Morling@tribaling · IdeaHunt.io
@bentossell Cool, no makers?
Ben Tossell
Hunter
@bentossell · Partner https://theupstarters.co/
@tribaling I tracked him down this morning and added but he didnt hop in :(
Elia Morling@tribaling · IdeaHunt.io
@bentossell weird, considering he's at the top :) Many people would give their right hand to claim it
dam13n@dam13n
@tribaling @bentossell This is my buddy's site. Getting that fool to claim it right now.
Ben Tossell
Hunter
@bentossell · Partner https://theupstarters.co/
@dam13n I tweeted him this morning saying I added him as a maker ha :)
dam13n@dam13n
@bentossell did you email him through his site? he mentioned not getting anything
Ben Tossell
Hunter
@bentossell · Partner https://theupstarters.co/
@dam13n sent a tweet!
dam13n@dam13n
@bentossell ahh he's not active on it, but should be signing in
dam13n@dam13n
@bentossell can you tweet him at @TheCJCenizal? his other account is linked to an email that doesn't exist anymore, hahaha
Tyler Myracle@tylermyracle · Director of Product at RigUp
As someone that has been wanting to use flexbox more this should be awesome. Excited to give this a try!
Elia Morling@tribaling · IdeaHunt.io
Should this be viewed as a replacement for e.g. Bootstrap?
CJ Cenizal
Maker
@thecjcenizal · UI Engineer
@tribaling Hmm... I would say probably not, since Bootstrap covers way more use cases than these humble examples do. But I think they could definitely help someone who wanted to build a Bootstrap-alternative. Would you like to see a Bootstrap replacement? Is Bootstrap not meeting your needs?
Patrik Csak@ptrkcsk · Front-End Dev + UX @ Hoffman Academy
@tribaling Bootstrap 4 will support flexbox: http://v4-alpha.getbootstrap.com...
Elia Morling@tribaling · IdeaHunt.io
@ptrkcsk Thats good news, thanks
Thibaut Lacave@thibaut_lacave · Founder, Les Pépites Tech
Great but what about "browser support"? https://css-tricks.com/using-fle... It's pain in the a** but i always have to do something like this: display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; align-items: stretch;
CJ Cenizal
Maker
@thecjcenizal · UI Engineer
@thibaut_lacave Take a look at PostCSS and Autoprefixer (https://github.com/postcss/autop...). After you write/compile your CSS, PostCSS will run through it and add vendor prefixes for all of your properties to ensure cross-browser compatibility. It's very well-maintained and basically works like magic. I've found it indispensable.
Thibaut Lacave@thibaut_lacave · Founder, Les Pépites Tech
Great, thanks @thecjcenizal . Still, are you considering adding the prefixes in your samples? (great simple designs btw)
CJ Cenizal
Maker
@thecjcenizal · UI Engineer
@thibaut_lacave Thank you! I don't think I'll add the prefixes because I think there are better resources out there for learning about them, and they'll make it more difficult to read the code examples.
Renzze Mistal@renzzemistal · Digital Marketer & Startup enthusiast
Cool! Will try these out! 😄