├── .gitignore ├── .travis.yml ├── README.md ├── contributing.md ├── img └── cover.jpg └── license.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 2.2 4 | before_script: 5 | - gem install awesome_bot 6 | script: 7 | - awesome_bot README.md --allow-redirect 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Learning CSS Grid Layout](img/cover.jpg) 2 | # Learning CSS Grid Layout 3 | 4 | ![Build Status](https://travis-ci.org/afonsopacifer/learning-css-grid-layout.svg?branch=master) 5 | 6 | > List of resources to learn CSS Grid Layout Module or only CSS Grid. 7 | 8 | > Inspired by [Rachel Andrew](https://rachelandrew.co.uk/). 9 | 10 | ## Table of Contents 11 | * [Specification and Working Group](#specification-and-working-group) 12 | * [Newsletter](#newsletter) 13 | * [Books](#books) 14 | * [Guides](#guides) 15 | * [Cross Browser](#cross-browser) 16 | * [Articles](#articles) 17 | * [Support](#support) 18 | * [Polyfills](#polyfills) 19 | * [Other Interesting Articles](#other-interesting-articles) 20 | * [Presentations](#presentations) 21 | * [Videos](#videos) 22 | * [Slides and Notes](#slides-and-notes) 23 | * [Podcasts](#podcasts) 24 | * [Featured Projects](#featured-projects) 25 | * [Who to Follow](#who-to-follow) 26 | * [Contributing](#contributing) 27 | * [Licence](#licence) 28 | 29 | ## Specification and Working Group 30 | *This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.* 31 | * [CSS Grid Layout Editor’s Draft - W3C](https://drafts.csswg.org/css-grid/) 32 | * [CSS Grid Layout Module Level 1 - W3C](http://www.w3.org/TR/css-grid-1/) 33 | * [CSS Grid posts on www-style - W3C](https://www.w3.org/Search/Mail/Public/search?type-index=www-style&index-type=t&keywords=%5bcss-grid%5d&search=Search) 34 | 35 | ## Newsletter 36 | * [CSS Layout News](http://csslayout.news/) 37 | * [CSS Weekly](http://css-weekly.com/) 38 | 39 | ## Books 40 | * [CSS3 Layout Modules 2nd Edition - Rachel Andrew](http://rachelandrew.co.uk/books/css3-layout-modules) 41 | * [Get Ready For CSS Grid Layout - Rachel Andrew](https://abookapart.com/products/get-ready-for-css-grid-layout) 42 | 43 | ## Guides 44 | *Guides for developers or designer start their studies this wonderful technology.* 45 | * [Grid layout - Microsoft Developer Network](https://msdn.microsoft.com/en-us/library/hh673533.aspx) 46 | * [A Complete Guide to Grid - CSS Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) 47 | * [Grid Layout - Microsoft Developer Network](https://msdn.microsoft.com/en-us/library/hh772052.aspx) 48 | 49 | ## Cross Browser 50 | *Tips and tricks for your projects work anywhere :D* 51 | 52 | #### Articles 53 | * [CSS Grid Layout 2014 Recap: Implementation Status](http://blogs.igalia.com/mrego/2015/01/08/css-grid-layout-2014-recap-implementation-status/) 54 | * [CSS Grid Layout: getting to grips with the Chrome implementation](http://rachelandrew.co.uk/archives/2014/06/27/css-grid-layout-getting-to-grips-with-the-chrome-implementation/) 55 | * [Deep Dive into Grid Layout Placement](http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_27) 56 | 57 | #### Support 58 | * [Enable CSS Grid Layout](http://igalia.github.io/css-grid-layout/enable.html) 59 | * [Caniuse](http://caniuse.com/#search=css%20grid%20layout) 60 | 61 | #### Polyfills 62 | * [CSS Grid Polyfill](https://github.com/FremyCompany/css-grid-polyfill) 63 | * [Grid Layout Polyfill](https://github.com/codler/Grid-Layout-Polyfill) 64 | 65 | ## Other Interesting Articles 66 | *A list of issues related to CSS Grid.* 67 | * [How to create an adaptive layout with CSS Grid - Microsoft Developer Network](https://msdn.microsoft.com/en-us/library/jj553856.aspx) 68 | * [Don't use flexbox for overall page layout - Jake Archibald (developer advocate for Google Chrome.)](http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/) 69 | 70 | ## Presentations 71 | *Tired of reading? See an interactive presentation and learn CSS Grid now.* 72 | 73 | #### Videos 74 | * [CSS Grid Layout - Front in Vale](https://www.youtube.com/watch?v=xvGRZo0x9Ao) 75 | * [CSS Grid Layout is Just Around the Corner - CSS Conf 2015](https://www.youtube.com/watch?v=9js_5MjiGFo) 76 | * [CSS Grid Layout - CSS Day 2015](https://rachelandrew.co.uk/archives/2015/07/17/css-grid-layout-at-css-day/?utm_content=bufferaf3e7&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) 77 | * [Get on the CSS Grid! - Developers Google](https://developers.google.com/web/updates/2014/03/Get-on-the-CSS-Grid) 78 | * [CSS Grid Layout - CSSconf EU 2014](https://www.youtube.com/watch?v=GRexIOtGhBU) 79 | * [Tutorial and Documentation Reference - DevelopPHP](https://www.developphp.com/video/CSS/Grid-Layout-CSS-Tutorial-and-Documentation-Reference) 80 | 81 | #### Slides and Notes 82 | * [CSS Grid Layout: De volta para o futuro - 3° BarraJS](https://speakerdeck.com/afonsopacifer/css-grid-layout) 83 | * [Get on the CSS Grid! - Developers Google](http://sydcss-grid.appspot.com/#1) 84 | * [CSS Grid Layout - CSSconf EU 2014](http://rachelandrew.co.uk/presentations/css-grid) 85 | * [CSS Grid Layout - CSS Day 2015](http://www.slideshare.net/rachelandrew/css-day-css-grid-layout) 86 | 87 | ## Podcasts 88 | * [CSS Grid Layout: The modern way of doing layout on the Web - O'Reilly Radar](http://radar.oreilly.com/2015/05/css-grid-layout-the-modern-way-of-doing-layout-on-the-web.html) 89 | 90 | ## Featured Projects 91 | *Awesome projects about CSS Grid.* 92 | * [Grid by Example - Rachel Andrew](http://gridbyexample.com/) 93 | * [CSS Grid Layout Examples - igalia](https://igalia.github.io/css-grid-layout/index.html) - Several examples showing different CSS Grid Layout use cases. 94 | * [CSS Grid overlay sample - Microsoft Developer Network](https://code.msdn.microsoft.com/ie/Grid-overlay-b183a5a8) - The Creating an overlay with the CSS grid example demonstrates the basics of putting text over an image using only a few lines of CSS and HTML. 95 | 96 | 97 | ## Who to Follow 98 | *People who talk about it.* 99 | * Rachel Andrew [@rachelandrew](https://twitter.com/rachelandrew) 100 | * Afonso Pacifer [@afonsopacifer](https://twitter.com/afonsopacifer) 101 | * Manuel Rego [@regocas](https://twitter.com/regocas) 102 | * Diego Eis [@diegoeis](https://twitter.com/diegoeis) 103 | 104 | ## Contributing 105 | Want to contribute? [Follow these recommendations](contributing.md). 106 | 107 | ## License 108 | [MIT License](license.md) © [Afonso Pacifer](http://afonsopacifer.com/) 109 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | #Guidelines to contribute 2 | 3 | * Add section if needed. 4 | * If you create a new section, add a item in summary. 5 | * Add section title to Table of contents. 6 | * Add section using header of two level. 7 | * Add subsection using header of four level. 8 | * The items listed in the sections must be in alphabetical onder 9 | * Search previous suggestions before making a new one, as yours may be a duplicate. 10 | * Check your spelling and grammar. 11 | * Make sure your text editor is set to remove trailing whitespace. 12 | * Items that are not in English, must have their language specified. 13 | -------------------------------------------------------------------------------- /img/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/afonsopacifer/learning-css-grid-layout/5659e2d89deceb8da5ab627e4fc527a6eed130e5/img/cover.jpg -------------------------------------------------------------------------------- /license.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Afonso Pacifer, [afonsopacifer.com](http://afonsopacifer.com/) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | --------------------------------------------------------------------------------