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.
72708
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.
175906
Elia Morling@tribaling · IdeaHunt.io
@bentossell Cool, no makers?
72708
Ben TossellHunter@bentossell · newCo
@tribaling I tracked him down this morning and added but he didnt hop in :(
175906
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.
72708
Ben TossellHunter@bentossell · newCo
@dam13n I tweeted him this morning saying I added him as a maker ha :)
170526
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!
175906
Elia Morling@tribaling · IdeaHunt.io
Should this be viewed as a replacement for e.g. Bootstrap?
121433
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?
72626
Patrik Csak@ptrkcsk · Front-End Dev + UX @ Hoffman Academy
@tribaling Bootstrap 4 will support flexbox: http://v4-alpha.getbootstrap.com...
175906
Elia Morling@tribaling · IdeaHunt.io
@ptrkcsk Thats good news, thanks
176166
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;
121433
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.
176166
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)
121433
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@renzzemistal · Digital Strategist & Tech enthusiast
Cool! Will try these out! 😄