1 line
No EOL
18 KiB
JSON
1 line
No EOL
18 KiB
JSON
{"slug": "afonsopacifer--awesome-flexbox", "title": "Flexbox", "description": ":eyeglasses: A curated list of CSS Flexible Box Layout Module or only Flexbox.", "github_url": "https://github.com/afonsopacifer/awesome-flexbox", "stars": "1.1K", "tag": "Front-End Development", "entry_count": 136, "subcategory_count": 2, "subcategories": [{"name": "Table of Contents", "parent": "", "entries": [{"name": "W3C Specification", "url": "#w3c-specification", "description": ""}, {"name": "Newsletter", "url": "#newsletter", "description": ""}, {"name": "Books", "url": "#books", "description": ""}, {"name": "Guides", "url": "#guides", "description": ""}, {"name": "Cross Browser", "url": "#cross-browser", "description": ""}, {"name": "Articles", "url": "#articles", "description": ""}, {"name": "Support", "url": "#support", "description": ""}, {"name": "Preprocessors in Action", "url": "#preprocessors-in-action", "description": ""}, {"name": "Polyfills", "url": "#polyfills", "description": ""}, {"name": "Other Interesting Articles", "url": "#other-interesting-articles", "description": ""}, {"name": "Presentations", "url": "#presentations", "description": ""}, {"name": "Videos", "url": "#videos", "description": ""}, {"name": "Slides and Notes", "url": "#slides-and-notes", "description": ""}, {"name": "Tools", "url": "#tools", "description": ""}, {"name": "Libraries and Frameworks", "url": "#libraries-and-frameworks", "description": ""}, {"name": "Featured Projects", "url": "#featured-projects", "description": ""}, {"name": "Courses", "url": "#courses", "description": ""}, {"name": "Who to Follow", "url": "#who-to-follow", "description": ""}, {"name": "Contributing", "url": "#contributing", "description": ""}, {"name": "Licence", "url": "#licence", "description": ""}, {"name": "CSS Flexible Box Layout Module Level 1", "url": "http://www.w3.org/TR/css3-flexbox/", "description": ""}, {"name": "CSS Layout News", "url": "http://csslayout.news/", "description": ""}, {"name": "CSS Weekly", "url": "http://css-weekly.com/", "description": ""}, {"name": "Responsive Design Weekly", "url": "http://responsivedesignweekly.com/", "description": ""}, {"name": "Web Design Weekly", "url": "https://web-design-weekly.com/", "description": ""}, {"name": "CSS3 Layout Modules 2nd Edition - Rachel Andrew", "url": "http://rachelandrew.co.uk/books/css3-layout-modules", "description": ""}, {"name": "A guide to flexbox", "url": "https://css-tricks.com/snippets/css/a-guide-to-flexbox/", "description": ""}, {"name": "A visual guide to CSS3 flexbox properties", "url": "https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties", "description": ""}, {"name": "flexbox (pt-br)", "url": "http://desenvolvimentoparaweb.com/css/flexbox/", "description": ""}, {"name": "Dive into flexbox", "url": "http://bocoup.com/weblog/dive-into-flexbox/", "description": ""}, {"name": "How Flexbox works\u200a\u2014\u200aexplained with big, colorful, animated gifs", "url": "https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35", "description": ""}, {"name": "How Flexbox works\u200a\u2014\u200aexplained with big, colorful, animated gifs (pt-br)", "url": "https://medium.com/@lucasjs/como-o-flexbox-funciona-explicado-com-gifs-grandes-e-coloridos-26c42a0bcdc", "description": ""}, {"name": "Learn layout - flexbox (pt-br)", "url": "http://pt-br.learnlayout.com/flexbox.html", "description": ""}, {"name": "Learn layout - flexbox", "url": "http://learnlayout.com/flexbox.html", "description": ""}, {"name": "Reference of flexbox", "url": "http://tympanus.net/codrops/css_reference/flexbox/", "description": ""}, {"name": "Responsive design of the future with flexbox", "url": "http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox", "description": ""}, {"name": "The Flexbox Reading List: Techniques and Tools", "url": "https://www.smashingmagazine.com/author/cosima-mielke/", "description": ""}, {"name": "Um guia visual para Flexbox (pt-br)", "url": "http://edsonjunior.com/um-guia-visual-para-flexbox/", "description": ""}, {"name": "Usando caixas flexiveis CSS (pt-br)", "url": "https://developer.mozilla.org/pt-BR/docs/CSS/Usando_caixas_flexiveis_css", "description": ""}, {"name": "Using CSS flexible boxes", "url": "https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes", "description": ""}, {"name": "What IS Flexbox?", "url": "https://medium.com/@spaceninja/what-is-flexbox-6aed968555ef", "description": ""}, {"name": "Desarrollo de aplicaciones web Flexibles (es-es)", "url": "http://nucliweb.github.io/flexbox/", "description": ""}, {"name": "Webflow Flexbox", "url": "https://flexbox.webflow.com/", "description": ""}, {"name": "6 Reasons to Start Using Flexbox", "url": "http://bitsofco.de/6-reasons-to-start-using-flexbox/?utm_campaign=CSS%2BLayout%2BNews\\&utm_medium=email\\&utm_source=CSS_Layout_News_31", "description": ""}, {"name": "Advanced cross-browser flexbox", "url": "https://dev.opera.com/articles/advanced-cross-browser-flexbox/", "description": ""}, {"name": "Are we ready to use flexbox?", "url": "http://www.sitepoint.com/are-we-ready-to-use-flexbox/", "description": ""}, {"name": "CSS Flexbox Is Entirely Logical (Almost)", "url": "https://paulrobertlloyd.com/2016/03/logical_flexbox", "description": ""}, {"name": "Designing A Product Page Layout with Flexbox", "url": "https://css-tricks.com/designing-a-product-page-layout-with-flexbox/", "description": ""}, {"name": "Normalizando bugs no flexbox em diversos navegadores (pt-br)", "url": "http://imasters.com.br/front-end/css/normalizando-bugs-no-flexbox-em-diversos-navegadores/?trace=1519021197\\&source=single", "description": ""}, {"name": "Normalizing cross-browser Flexbox bugs", "url": "http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/", "description": ""}, {"name": "Using flexbox: mixing old and new for the best browser support", "url": "https://css-tricks.com/using-flexbox/", "description": ""}, {"name": "Using Modernizr with Flexbox", "url": "http://zomigi.com/blog/using-modernizr-with-flexbox/?utm_campaign=CSS%2BLayout%2BNews\\&utm_medium=email\\&utm_source=CSS_Layout_News_8", "description": ""}, {"name": "Caniuse", "url": "http://caniuse.com/flexbox", "description": ""}, {"name": "Compass Flexbox", "url": "http://compass-style.org/reference/compass/css3/flexbox/", "description": ""}, {"name": "Sass flex mixin", "url": "https://github.com/mastastealth/sass-flex-mixin", "description": "", "stars": "1.1k"}, {"name": "Stylus flex mixin", "url": "https://github.com/differui/stylus-flex-mixin", "description": "", "stars": "11"}, {"name": "Flexibility", "url": "https://github.com/10up/flexibility", "description": "", "stars": "4.4k"}, {"name": "Flexie", "url": "https://github.com/doctyper/flexie", "description": "", "stars": "1.1k"}, {"name": "Reflexie", "url": "https://github.com/doctyper/reflexie", "description": "", "stars": "252"}, {"name": "Almost complete guide to flexbox (without flexbox)", "url": "http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox?utm_campaign=CSS%2BLayout%2BNews\\&utm_medium=email\\&utm_source=CSS_Layout_News_36", "description": ""}, {"name": "Designing CSS layouts with flexbox is as easy as pie", "url": "http://www.smashingmagazine.com/2015/03/02/harnessing-flexbox-for-todays-web-apps/", "description": ""}, {"name": "Flexbox For Interfaces All The Way: Tracks Case Study", "url": "http://www.smashingmagazine.com/2015/11/flexbox-interfaces-tracks-case-study/?utm_source=html5weekly\\&utm_medium=email", "description": ""}, {"name": "Flexbox\u2019s Best-Kept Secret", "url": "https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.i0v3krqo0", "description": ""}, {"name": "Grid, Flexbox, Box Alignment: Our New System for Layout", "url": "https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/?utm_campaign=CSS%2BLayout%2BNews\\&utm_medium=email\\&utm_source=CSS_Layout_News_20", "description": ""}, {"name": "Old flexbox and new flexbox", "url": "https://css-tricks.com/old-flexbox-and-new-flexbox/", "description": ""}, {"name": "Using flexbox today", "url": "https://chriswrightdesign.com/experiments/using-flexbox-today/", "description": ""}, {"name": "Laying Out A Flexible Future For Web Design With Flexbox", "url": "https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/", "description": ""}, {"name": "Flexbox Cheatsheet", "url": "http://jonibologna.com/flexbox-cheatsheet/", "description": ""}, {"name": "CSS Layout o ontem, o hoje e o depois (pt-br)", "url": "https://www.youtube.com/watch?v=MjK1MCjqmpU\\&list=PLnjYA3TxpDpgWE9cXwT5H7wEsG6ql-Q59\\&index=15", "description": ""}, {"name": "CSS FlexBox Essentials", "url": "https://www.youtube.com/watch?v=G7EIAgfkhmg", "description": ""}, {"name": "CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)", "url": "https://www.youtube.com/watch?v=H1lREysgdgc", "description": ""}, {"name": "Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap", "url": "https://css-tricks.com/video-screencasts/140-exploring-css-layout-techniques-while-trying-to-get-a-subtitle-to-wrap/", "description": ""}, {"name": "Enhancing Responsiveness With Flexbox", "url": "https://www.youtube.com/watch?v=_98SE8WUvLk", "description": ""}, {"name": "Flexbox - CSS Day", "url": "https://vimeo.com/131664957", "description": ""}, {"name": "Gu\u00eda Completa de Flexbox desde 0 (ESP)", "url": "https://www.youtube.com/watch?v=F-KCncXMPk0", "description": ""}, {"name": "HTML5. Desenvolvimento avan\u00e7ado", "url": "https://www.youtube.com/watch?v=b9ZrOdTFkNk", "description": ""}, {"name": "Introduction to Flexbox", "url": "https://mijingo.com/lessons/guide-to-flexbox/?utm_campaign=CSS%2BLayout%2BNews\\&utm_medium=email\\&utm_source=CSS_Layout_News_34", "description": ""}, {"name": "Leveling up with flexbox", "url": "https://vimeo.com/96406277", "description": ""}, {"name": "What the flexbox?", "url": "http://flexbox.io", "description": "A simple 20 video course that will help you master"}, {"name": "Flexbox Fundamentals", "url": "https://egghead.io/lessons/misc-flexbox-fundamentals", "description": ""}]}, {"name": "[Sketching with CSS](http://www.sketchingwithcss.com) Flexbox Guide by [@sfioritto](https://github.com/sfioritto)", "parent": "Presentations", "entries": [{"name": "Access 20+ Page Guide on Flexbox", "url": "http://www.sketchingwithcss.com/flexbox-tutorial/", "description": ""}, {"name": "Flex-Container Pt. 1: Position Items within a flexbox container", "url": "http://www.sketchingwithcss.com/flex-container", "description": ""}, {"name": "Flex-Container Pt. 2: Rows and Columns", "url": "http://www.sketchingwithcss.com/flex-container-2/", "description": ""}, {"name": "Grow and Shrink Flex Items", "url": "http://www.sketchingwithcss.com/grow-shrink/", "description": ""}, {"name": "Implementing the Sticky Footer and Holy Grail layout", "url": "http://www.sketchingwithcss.com/flex-layouts/", "description": ""}, {"name": "Building responsive layouts presentation", "url": "http://zomigi.com/blog/responsive-layouts-css-dev-conf/", "description": ""}, {"name": "CSS Flexbox: Estruturando layouts sem gambiarras (pr-br)", "url": "https://speakerdeck.com/afonsopacifer/flexbox", "description": ""}, {"name": "CSS3 layout", "url": "http://zomigi.com/blog/css3-layout/", "description": ""}, {"name": "Flexbox", "url": "http://zomigi.com/blog/flexbox-presentation/", "description": ""}, {"name": "Flexbox and Grid Layout", "url": "http://pt.slideshare.net/diegoeis/flexbox-to-the-people", "description": ""}, {"name": "Future css layout fowd", "url": "http://zomigi.com/blog/future-css-layout-fowd/", "description": ""}, {"name": "Leveling up with flexbox", "url": "http://zomigi.com/blog/leveling-up-with-flexbox/", "description": ""}, {"name": "RWD flexbox", "url": "http://zomigi.com/blog/rwd-flexbox/", "description": ""}, {"name": "CSS Layout: from Table to Flexbox", "url": "https://speakerdeck.com/diogomoretti/css-layout-from-table-to-flexbox", "description": ""}, {"name": "Build with Flexbox", "url": "http://flexbox.buildwithreact.com/", "description": ""}, {"name": "CSS flexbox please", "url": "http://demo.agektmr.com/flexbox/", "description": ""}, {"name": "CSS Flexbox snippets for Atom", "url": "https://github.com/brenopolanski/css-flexbox-atom-snippets", "description": "", "stars": "4"}, {"name": "CSS Flexbox snippets for Sublime Text 2/3", "url": "https://github.com/brenopolanski/css-flexbox-sublime-snippets", "description": "", "stars": "13"}, {"name": "Fibonacci", "url": "https://github.com/maxsteenbergen/Fibonacci", "description": "", "stars": "438"}, {"name": "Flexbox in 5 minutes", "url": "https://cvan.io/flexboxin5/", "description": ""}, {"name": "Flexbox playground", "url": "https://web.archive.org/web/20151207135410/http://flexiejs.com/playground/", "description": ""}, {"name": "Flexbox property manipulator", "url": "http://codepen.io/enxaneta/full/adLPwv/", "description": ""}, {"name": "Flexplorer", "url": "http://bennettfeely.com/flexplorer/", "description": ""}, {"name": "Flexyboxes", "url": "http://the-echoplex.net/flexyboxes/", "description": ""}, {"name": "Test CSS Flexbox Rules Live", "url": "http://flexbox.help/", "description": ""}, {"name": "Try Flexbox", "url": "https://zyxneo.github.io/flexbox/try-flexbox", "description": ""}, {"name": "Bem grid", "url": "https://github.com/bem-incubator/bem-grid", "description": "", "stars": "135"}, {"name": "Flexboxgrid", "url": "https://github.com/kristoferjoseph/flexboxgrid", "description": "", "stars": "9.3k"}, {"name": "Flex Grid Framework", "url": "https://afonsopacifer.github.io/flex-grid-framework/", "description": ""}, {"name": "Flexbox Grid for Stylus", "url": "http://stylusgrid.com", "description": ""}, {"name": "Fuux", "url": "https://github.com/henriquecustodia/fuux", "description": "Fuux is a Flexbox library that uses the same flexbox interface like classes.", "stars": "9"}, {"name": "Ginger Grid", "url": "https://github.com/erwstout/ginger/", "description": "A Flexbox grid framework named after a cute dog.", "stars": "31"}, {"name": "Bulma", "url": "http://bulma.io/", "description": "A modern CSS framework based on Flexbox"}, {"name": "Milligram", "url": "http://milligram.github.io/", "description": "A minimalist CSS framework"}, {"name": "RolleiFLEX", "url": "http://kaisermann.github.io/rolleiflex/", "description": "Just a responsive flexbox grid"}, {"name": "Waffle Grid", "url": "https://lucasgruwez.github.io/waffle-grid", "description": "An easy to use flexbox grid system"}, {"name": "Cool examples of flexbox layout", "url": "http://codepen.io/collection/KegmA/", "description": "A codepen a collection."}, {"name": "flex-box", "url": "https://github.com/potch/flex-box", "description": "A Custom Element to make the basics of flexbox easier to use.", "stars": "2"}, {"name": "Flexbugs", "url": "https://github.com/philipwalton/flexbugs", "description": "A community-curated list of flexbox issues and cross-browser workarounds for them.", "stars": "13k"}, {"name": "Flexbox Froggy", "url": "http://flexboxfroggy.com/", "description": "A game for learning CSS flexbox."}, {"name": "Flexbox Patterns", "url": "http://www.flexboxpatterns.com/", "description": "Examples and source code that will teach you how to build UI components with CSS flexbox! What\u2019s flexbox?"}, {"name": "Flexbox Defense", "url": "http://www.flexboxdefense.com/", "description": "Tower Defense with a twist: all towers must be positioned with CSS Flexbox."}, {"name": "Flexbox tester", "url": "http://madebymike.com.au/demos/flexbox-tester/", "description": "Understand how to calculate the width of flex items."}, {"name": "Flexbox layout", "url": "https://github.com/google/flexbox-layout", "description": "FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android.", "stars": "18k"}, {"name": "FlexLayout for iOS", "url": "https://github.com/lucdion/FlexLayout", "description": "FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax.", "stars": "1.7k"}, {"name": "grid-styled", "url": "https://github.com/jxnblk/grid-styled", "description": "Flexbox based responsive ReactJS grid system built with styled-components", "stars": "2.1k"}, {"name": "iron-flex-layout", "url": "https://www.webcomponents.org/element/PolymerElements/iron-flex-layout", "description": "Style mixins for cross-platform flex-box layouts"}, {"name": "Post Apocalypse Flexbox", "url": "https://github.com/afonsopacifer/post-apocalypse-flexbox", "description": "", "stars": "29"}, {"name": "React-flexbox", "url": "https://github.com/tcoopman/react-flexbox", "description": "Implementation of css flexbox in react with inline styles.", "stars": "162"}, {"name": "Reflexbox", "url": "https://github.com/jxnblk/reflexbox", "description": "Responsive React flexbox grid system higher order component.", "stars": "1.4k"}, {"name": "Solved by flexbox", "url": "https://github.com/philipwalton/solved-by-flexbox", "description": "A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.:metal:", "stars": "13k"}, {"name": "Visualizing Flexbox", "url": "http://codepen.io/paultrone/pen/xwxNmQ?utm_campaign=CSS%2BLayout%2BNews\\&utm_medium=email\\&utm_source=CSS_Layout_News_6", "description": "A neat little CodePen Demo to play around with Flex properties."}, {"name": "ZEEF CSS Flexbox", "url": "https://css-flexbox.zeef.com/afonso.pacifer", "description": "The awesome flexbox on zeef.:metal:"}, {"name": "Flexbox Zombies", "url": "http://flexboxzombies.com/p/flexbox-zombies", "description": "A game for learning CSS flexbox."}, {"name": "CSS Flexbox Layout", "url": "https://teamtreehouse.com/library/css-flexbox-layout?utm_source=Responsive+Design+Weekly\\&utm_campaign=e4dbc18ebc-Responsive_Design_Weekly_184\\&utm_medium=email\\&utm_term=0_df65b6d7c8-e4dbc18ebc-59080665\\&goal=0_df65b6d7c8-e4dbc18ebc-59080665", "description": "treehouse"}, {"name": "Learn Flexbox for free", "url": "https://scrimba.com/g/gflexbox", "description": "scrimba"}]}], "name": ""} |