6 ms·

Just as popular JavaScript libraries spawn many superfluous forks and microframeworks, the landing of Flexbox has resulted in dozens of these CSS 'frameworks' a

by wanda 11y ago

Just as popular JavaScript libraries spawn many superfluous forks and microframeworks, the landing of Flexbox has resulted in dozens of these CSS 'frameworks' and grid systems: 1. http://basegui.de http://basegui.de 2. https://github.com/ButaneCSS/butanecss https://github.com/ButaneCSS/butanecss 3. http://juicedcss.com http://juicedcss.com 4. http://bowlingx.github.io/flexcss http://bowlingx.github.io/flexcss 5. http://codepen.io/geoffyuen/pen/ogrPbZ http://codepen.io/geoffyuen/pen/ogrPbZ 6. https://github.com/meerita/flexsasscandy https://github.com/meerita/flexsasscandy 7. http://getmdl.io/components/index.html#layout-section/grid http://getmdl.io/components/index.html#layout-section/grid 8. https://kevinpy.com/Projects/Flexo https://kevinpy.com/Projects/Flexo 9. http://philippkuehn.github.io/gridilydidily http://philippkuehn.github.io/gridilydidily 10. http://stylusgrid.com http://stylusgrid.com 11. https://github.com/IonicaBizau/gridly https://github.com/IonicaBizau/gridly 12. https://github.com/colourgarden/avalanche https://github.com/colourgarden/avalanche 13. https://milligram.github.io/ https://milligram.github.io/ 14. https://github.com/ButaneCSS/butanecss https://github.com/ButaneCSS/butanecss 15. http://bulma.io/documentation/grid/ http://bulma.io/documentation/grid/ 16. http://gridlex.devlint.fr/ http://gridlex.devlint.fr/ 17. http://crabcss.com http://crabcss.com and that's but a fraction of the full list. I haven't bothered to sit down and actually assess whether these flexbox grids actually differ from each other (my gut says that it's not possible for them to differ too much). My gut also tells me that there has to be an apex, an optimal Flex-based grid from which there can be no improvement. I think a big part of the problem of why websites all look a bit similar is because they're all developed using Bootstrap, Bourbon or Foundation, and apparently on the rare occasion where a front-end framework is not used, an offshoot or "heavily-inspired by" alternative is used instead. Nobody is thinking about what /could/ be, but rather what can be done in the least time to produce the best approximation of a contemporary website. Nobody wants to push the boundaries. Maybe we've reached an optimal paradigm for the design and layout of websites. I don't think so. I always implement my own CSS, mainly because I really don't like carrying frameworks around. If I need all of a framework's features, I'll consider using it. Since I never need all of a framework's freatures, that never happens. If I ever do need a full front-end framework's worth of features, here's a framework that seems flexible, modular and solid to me: http://www.basscss.com/ http://www.basscss.com/ and if you want a great grid, look at this: http://peterramsing.github.io/lost/ http://peterramsing.github.io/lost/ and if you want to wait for a more powerful future grid tool, investigate the CSS Grid Spec: http://gridbyexample.com/ http://gridbyexample.com/ http://gridbyexample.com/examples/page-layout/ http://gridbyexample.com/examples/page-layout/ http://abookapart.com/products/get-ready-for-css-grid-layout http://abookapart.com/products/get-ready-for-css-grid-layout https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/ https://24ways.org/2015/grid-flexbox-box-alignment-our-new-s... https://rachelandrew.co.uk/archives/2015/11/03/three-years-with-css-grid-layout/ https://rachelandrew.co.uk/archives/2015/11/03/three-years-w... https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-automatic-placement-and-packing-modes/ https://rachelandrew.co.uk/archives/2015/04/14/grid-layout-a...

k__ 11y ago
It really comes down to dev speed. Thats why I don't write CSS anymore I can simply sprinkle CSS classes around and then ask someone to create a Bootstrap theme for me.
deleted 11y ago
[deleted]
jessedhillon 11y ago
IMO the optimal framework would be Google's Angular-Material, except for the fact that it is massively coupled with AngularJS for no reason. The assigning of layouts to row/columns, and dividing the space within are done very easily. Someone would be wise to use their system as the basis of a great CSS-only framework. https://material.angularjs.org/latest/ https://material.angularjs.org/latest/
- wanda 11y ago
  I've looked at this for all of three minutes, but it appears that it's basically an Angular version of Masonry with a dash of flexbox. Masonry is something I'd love to implement in pure CSS, but it's not really possible. You need to know the heights and then be able to position your grid items absolutely, it's not something that can be done dynamically without using JavaScript. You can use CSS3 Columns, but then your content is going to be displayed in a counter-intuitive order. It works great for a photo grid or Pinterest-style site, but most cases require some kind of intuitive display order. I am especially thinking of e-commerce, where it's imperative to offer the end-user the ability to sort products alphabetically, and search results in terms of relevance or whatever.
  - jessedhillon 11y ago
    Angular Material doesn't suffer from any of those issues because it is based on flexbox. It works without Javascript, only it hasn't been written to do that. There are two issues: - first, the elements being selected are all angular directives like `md-content`, `md-button` -- not a dependency on Javascript but clearly targeting a JS app - a second theme stylesheet is dynamically generated and injected into the head None of these are strict requirements -- I've extracted the stylesheet and repurposed it for my own projects.

by wanda 11y ago

k__ 11y ago

It really comes down to dev speed. Thats why I don't write CSS anymore I can simply sprinkle CSS classes around and then ask someone to create a Bootstrap theme for me.

deleted 11y ago

[deleted]

jessedhillon 11y ago

IMO the optimal framework would be Google's Angular-Material, except for the fact that it is massively coupled with AngularJS for no reason. The assigning of layouts to row/columns, and dividing the space within are done very easily. Someone would be wise to use their system as the basis of a great CSS-only framework. https://material.angularjs.org/latest/ https://material.angularjs.org/latest/

wanda 11y ago
I've looked at this for all of three minutes, but it appears that it's basically an Angular version of Masonry with a dash of flexbox. Masonry is something I'd love to implement in pure CSS, but it's not really possible. You need to know the heights and then be able to position your grid items absolutely, it's not something that can be done dynamically without using JavaScript. You can use CSS3 Columns, but then your content is going to be displayed in a counter-intuitive order. It works great for a photo grid or Pinterest-style site, but most cases require some kind of intuitive display order. I am especially thinking of e-commerce, where it's imperative to offer the end-user the ability to sort products alphabetically, and search results in terms of relevance or whatever.
- jessedhillon 11y ago
  Angular Material doesn't suffer from any of those issues because it is based on flexbox. It works without Javascript, only it hasn't been written to do that. There are two issues: - first, the elements being selected are all angular directives like `md-content`, `md-button` -- not a dependency on Javascript but clearly targeting a JS app - a second theme stylesheet is dynamically generated and injected into the head None of these are strict requirements -- I've extracted the stylesheet and repurposed it for my own projects.