Build awesome user interfaces with CSS flexbox

get it
#5 Product of the WeekApril 20, 2016



You need to become a Contributor to join the discussion - Find out how.
Ben TossellHunter@bentossell · miniOS
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 TossellHunter@bentossell · miniOS
@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
@tribaling @bentossell This is my buddy's site. Getting that fool to claim it right now.
Ben TossellHunter@bentossell · miniOS
@dam13n I tweeted him this morning saying I added him as a maker ha :)
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@tribaling · IdeaHunt.io
Should this be viewed as a replacement for e.g. Bootstrap?
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?
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 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 · Founder, Les Pépites Tech
Great, thanks @thecjcenizal . Still, are you considering adding the prefixes in your samples? (great simple designs btw)
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! 😄