FlexboxPatterns

FlexboxPatterns

Build awesome user interfaces with CSS flexbox

10 followers

FlexboxPatterns gallery image
FlexboxPatterns gallery image
FlexboxPatterns gallery image
FlexboxPatterns gallery image
Launch Team
Anima Playground
AI with an Eye for Design
Promoted

What do you think? …

Elia Morling
Should this be viewed as a replacement for e.g. Bootstrap?
CJ Cenizal
@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
@ptrkcsk Thats good news, thanks
Tyler Myracle
As someone that has been wanting to use flexbox more this should be awesome. Excited to give this a try!
David
Beautiful design, straight-forward explanations. I'm wondering what scrollbar lib he's using here...
Andreas Mitschke
@robotnoises I'm unsure but I doubt using a polyfill for it. Most certainly just prefixed "scrollbar-thumb" CSS property. Scrollbar hacking with js is highly questionable anyways.
CJ Cenizal
@andmitsch @robotnoises You're right, Andreas, it's just a few webkit-specific CSS scrollbar properties. Here's a CodePen of the mixin I use: http://codepen.io/cjcenizal/pen/...
David
@thecjcenizal Thanks for sharing!
Thibaut Lacave
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
@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
Great, thanks @thecjcenizal . Still, are you considering adding the prefixes in your samples? (great simple designs btw)
CJ Cenizal
@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
Cool! Will try these out! 😄
Arunoda Susiripala
Looking forward to try this out. Looks great.
Scott Miller
Can't wait to try this! Gorgeous design too!
123
Next
Last