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 - Vibe Coding for Product Teams
Build websites and apps with AI that understands 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