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 TossellHunter@bentossell · newCo
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
Elia Morling@tribaling · IdeaHunt.io
@bentossell Cool, no makers?
Ben TossellHunter@bentossell · newCo
@tribaling I tracked him down this morning and added but he didnt hop in :(
Elia Morling
Elia Morling@tribaling · IdeaHunt.io
@bentossell weird, considering he's at the top :) Many people would give their right hand to claim it
@tribaling @bentossell This is my buddy's site. Getting that fool to claim it right now.
Ben TossellHunter@bentossell · newCo
@dam13n I tweeted him this morning saying I added him as a maker ha :)
Tyler Myracle
Tyler Myracle@tylermyracle · Chief Product Officer at RigUp
As someone that has been wanting to use flexbox more this should be awesome. Excited to give this a try!
Elia Morling
Elia Morling@tribaling · IdeaHunt.io
Should this be viewed as a replacement for e.g. Bootstrap?
CJ Cenizal
CJ CenizalMaker@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?
Elia Morling
Elia Morling@tribaling · IdeaHunt.io
@ptrkcsk Thats good news, thanks
Thibaut Lacave
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
CJ CenizalMaker@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@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
CJ CenizalMaker@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
Renzze Mistal@renzzemistal · Digital Strategist & Tech enthusiast
Cool! Will try these out! 😄