FlexboxPatterns

Build awesome user interfaces with CSS flexbox

#5 Product of the WeekApril 20, 2016
+1
Discussion
Would you recommend this product?
No reviews yet
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.
@tribaling I tracked him down this morning and added but he didnt hop in :(
@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.
@dam13n I tweeted him this morning saying I added him as a maker ha :)
As someone that has been wanting to use flexbox more this should be awesome. Excited to give this a try!
Should this be viewed as a replacement for e.g. Bootstrap?
@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?
@ptrkcsk Thats good news, thanks
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;
@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.
Great, thanks @thecjcenizal . Still, are you considering adding the prefixes in your samples? (great simple designs btw)
@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.
Cool! Will try these out! πŸ˜„