@@ -78,8 +78,8 @@ <h1>CSS Grid Layout Examples</h1>
7878 < h4 class ="list-group-item-heading "> Simple grid example</ h4 >
7979 < p >
8080 < a href ="simple.html " class ="label label-primary "> example</ a >
81- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /simple.html " class ="label label-success "> html</ a >
82- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /simple.png " class ="label label-info "> screenshot</ a >
81+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /simple.html " class ="label label-success "> html</ a >
82+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /simple.png " class ="label label-info "> screenshot</ a >
8383 < a href ="http://www.w3.org/TR/css-grid/#track-sizing " class ="label label-warning "> spec</ a >
8484 </ p >
8585 < p > Very simple 2x2 grid with fixed breadths.</ p >
@@ -88,8 +88,8 @@ <h4 class="list-group-item-heading">Simple grid example</h4>
8888 < h4 class ="list-group-item-heading "> Flexible breadth</ h4 >
8989 < p >
9090 < a href ="breadth.html " class ="label label-primary "> example</ a >
91- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /breadth.html " class ="label label-success "> html</ a >
92- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /breadth.png " class ="label label-info "> screenshot</ a >
91+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /breadth.html " class ="label label-success "> html</ a >
92+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /breadth.png " class ="label label-info "> screenshot</ a >
9393 < a href ="http://www.w3.org/TR/css-grid/#fr-unit " class ="label label-warning "> spec</ a >
9494 </ p >
9595 < p > Example with 3 columns. First and last columns are 200px width, and middle column should use the remaining space.</ p >
@@ -98,8 +98,8 @@ <h4 class="list-group-item-heading">Flexible breadth</h4>
9898 < h4 class ="list-group-item-heading "> Grid areas</ h4 >
9999 < p >
100100 < a href ="areas.html " class ="label label-primary "> example</ a >
101- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /areas.html " class ="label label-success "> html</ a >
102- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /areas.png " class ="label label-info "> screenshot</ a >
101+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /areas.html " class ="label label-success "> html</ a >
102+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /areas.png " class ="label label-info "> screenshot</ a >
103103 < a href ="http://www.w3.org/TR/css-grid/#grid-template-areas-property " class ="label label-warning "> spec</ a >
104104 </ p >
105105 < p > Example usage of grid areas.</ p >
@@ -108,8 +108,8 @@ <h4 class="list-group-item-heading">Grid areas</h4>
108108 < h4 class ="list-group-item-heading "> < tt > max-content</ tt > and < tt > min-content</ tt > </ h4 >
109109 < p >
110110 < a href ="max-min-content.html " class ="label label-primary "> example</ a >
111- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /max-min-content.html " class ="label label-success "> html</ a >
112- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /max-min-content.png " class ="label label-info "> screenshot</ a >
111+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /max-min-content.html " class ="label label-success "> html</ a >
112+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /max-min-content.png " class ="label label-info "> screenshot</ a >
113113 < a href ="http://www.w3.org/TR/css-grid/#valuedef-max-content " class ="label label-warning "> spec</ a >
114114 </ p >
115115 < p > Example to show behavior of < tt > max-content</ tt > and < tt > min-content</ tt > in columns.</ p >
@@ -118,8 +118,8 @@ <h4 class="list-group-item-heading"><tt>max-content</tt> and <tt>min-content</tt
118118 < h4 class ="list-group-item-heading "> Auto-placement form</ h4 >
119119 < p >
120120 < a href ="autoplacement-form.html " class ="label label-primary "> example</ a >
121- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /autoplacement-form.html " class ="label label-success "> html</ a >
122- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /autoplacement-form.png " class ="label label-info "> screenshot</ a >
121+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /autoplacement-form.html " class ="label label-success "> html</ a >
122+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /autoplacement-form.png " class ="label label-info "> screenshot</ a >
123123 < a href ="http://www.w3.org/TR/css-grid/#grid-auto-flow-property " class ="label label-warning "> spec</ a >
124124 </ p >
125125 < p > Example of auto-placement grid applied to a simple form. Span is not supported yet as you can see in the buttons row.</ p >
@@ -129,17 +129,17 @@ <h4 class="list-group-item-heading">Auto-placement span</h4>
129129 < p > Span is not supported yet as you can see in the example.</ p >
130130 < p >
131131 < a href ="autoplacement-span.html " class ="label label-primary "> example</ a >
132- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /autoplacement-span.html " class ="label label-success "> html</ a >
133- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /autoplacement-span.png " class ="label label-info "> screenshot</ a >
132+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /autoplacement-span.html " class ="label label-success "> html</ a >
133+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /autoplacement-span.png " class ="label label-info "> screenshot</ a >
134134 < a href ="http://www.w3.org/TR/css-grid/#grid-auto-flow-property " class ="label label-warning "> spec</ a >
135135 </ p >
136136 </ li >
137137 < li class ="list-group-item ">
138138 < h4 class ="list-group-item-heading "> z-index</ h4 >
139139 < p >
140140 < a href ="z-index.html " class ="label label-primary "> example</ a >
141- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /z-index.html " class ="label label-success "> html</ a >
142- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /z-index.png " class ="label label-info "> screenshot</ a >
141+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /z-index.html " class ="label label-success "> html</ a >
142+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /z-index.png " class ="label label-info "> screenshot</ a >
143143 < a href ="http://www.w3.org/TR/css-grid/#z-order " class ="label label-warning "> spec</ a >
144144 </ p >
145145 < p > Example with several overlaping grid items where painting order is defined by the implicit DOM order and different z-index values.</ p >
@@ -148,8 +148,8 @@ <h4 class="list-group-item-heading">z-index</h4>
148148 < h4 class ="list-group-item-heading "> Explicit Grid Shorthand: grid-template</ h4 >
149149 < p >
150150 < a href ="grid-template-shorthand.html " class ="label label-primary "> example</ a >
151- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /grid-template-shorthand.html " class ="label label-success "> html</ a >
152- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /grid-template-shorthand.png " class ="label label-info "> screenshot</ a >
151+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /grid-template-shorthand.html " class ="label label-success "> html</ a >
152+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /grid-template-shorthand.png " class ="label label-info "> screenshot</ a >
153153 < a href ="http://www.w3.org/TR/css-grid/#propdef-grid-template " class ="label label-warning "> spec</ a >
154154 </ p >
155155 < p > Example usage of the 'Explicit Grid' shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration.</ p >
@@ -158,8 +158,8 @@ <h4 class="list-group-item-heading">Explicit Grid Shorthand: grid-template</h4>
158158 < h4 class ="list-group-item-heading "> DOM order</ h4 >
159159 < p >
160160 < a href ="dom-order-issue.html " class ="label label-primary "> example</ a >
161- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /dom-order-issue.html " class ="label label-success "> html</ a >
162- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /dom-order-issue.png " class ="label label-info "> screenshot</ a >
161+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /dom-order-issue.html " class ="label label-success "> html</ a >
162+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /dom-order-issue.png " class ="label label-info "> screenshot</ a >
163163 < a href ="http://www.w3.org/TR/css-grid/#valuedef-max-content " class ="label label-warning "> spec</ a >
164164 </ p >
165165 < p > Items painting should respect DOM order.</ p >
@@ -168,8 +168,8 @@ <h4 class="list-group-item-heading">DOM order</h4>
168168 < h4 class ="list-group-item-heading "> Repaint</ h4 >
169169 < p >
170170 < a href ="repaint-issue.html " class ="label label-primary "> example</ a >
171- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /repaint-issue.html " class ="label label-success "> html</ a >
172- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /repaint-issue.png " class ="label label-info "> screenshot</ a >
171+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /repaint-issue.html " class ="label label-success "> html</ a >
172+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /repaint-issue.png " class ="label label-info "> screenshot</ a >
173173 < a href ="http://www.w3.org/TR/css-grid/#valuedef-max-content " class ="label label-warning "> spec</ a >
174174 </ p >
175175 < p > Items that expands to several cells are painted more than once.</ p >
@@ -178,26 +178,26 @@ <h4 class="list-group-item-heading">Repaint</h4>
178178 < h4 class ="list-group-item-heading "> Alignment</ h4 >
179179 < p >
180180 < a href ="basic-alignment.html " class ="label label-primary "> Basic Alignment example</ a >
181- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /basic-alignment.html " class ="label label-success "> html</ a >
182- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /basic-alignment.png " class ="label label-info "> screenshot</ a >
181+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /basic-alignment.html " class ="label label-success "> html</ a >
182+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /basic-alignment.png " class ="label label-info "> screenshot</ a >
183183 < a href ="http://dev.w3.org/csswg/css-grid/#alignment " class ="label label-warning "> spec</ a >
184184 </ p >
185185 < p >
186186 < a href ="full-alignment.html " class ="label label-primary "> Full Alignment example</ a >
187- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /full-alignment.html " class ="label label-success "> html</ a >
188- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /full-alignment.png " class ="label label-info "> screenshot</ a >
187+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /full-alignment.html " class ="label label-success "> html</ a >
188+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /full-alignment.png " class ="label label-info "> screenshot</ a >
189189 < a href ="http://dev.w3.org/csswg/css-align-3/#overview " class ="label label-warning "> spec</ a >
190190 </ p >
191191 < p >
192192 < a href ="self-alignment.html " class ="label label-primary "> Self Alignment example</ a >
193- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /self-alignment.html " class ="label label-success "> html</ a >
194- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /self-alignment.png " class ="label label-info "> screenshot</ a >
193+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /self-alignment.html " class ="label label-success "> html</ a >
194+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /self-alignment.png " class ="label label-info "> screenshot</ a >
195195 < a href ="http://dev.w3.org/csswg/css-align-3/#self-alignment " class ="label label-warning "> spec</ a >
196196 </ p >
197197 < p >
198198 < a href ="overflow-alignment.html " class ="label label-primary "> Overflow example</ a >
199- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /overflow-alignment.html " class ="label label-success "> html</ a >
200- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /overflow-alignment.png " class ="label label-info "> screenshot</ a >
199+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /overflow-alignment.html " class ="label label-success "> html</ a >
200+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /overflow-alignment.png " class ="label label-info "> screenshot</ a >
201201 < a href ="http://dev.w3.org/csswg/css-align-3/#overflow-alignment " class ="label label-warning "> spec</ a >
202202 </ p >
203203 < p > Examples of how to apply the CSS Box Alignment properties in the Grid Layout spec.</ p >
@@ -215,26 +215,26 @@ <h4 class="list-group-item-heading">Alignment</h4>
215215 < h4 class ="list-group-item-heading "> Responsive grid</ h4 >
216216 < p >
217217 < a href ="responsive-grid.html " class ="label label-primary "> example</ a >
218- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /responsive-grid.html " class ="label label-success "> html</ a >
219- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /responsive-grid.png " class ="label label-info "> screenshot</ a >
218+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /responsive-grid.html " class ="label label-success "> html</ a >
219+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /responsive-grid.png " class ="label label-info "> screenshot</ a >
220220 </ p >
221221 < p > Example grid that adapts itself to window size. Layout changes depending on window size (portrait/landscape). Some items are clickable and change their content.</ p >
222222 </ li >
223223 < li class ="list-group-item ">
224224 < h4 class ="list-group-item-heading "> Gallery</ h4 >
225225 < p >
226226 < a href ="gallery.html " class ="label label-primary "> example</ a >
227- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /gallery.html " class ="label label-success "> html</ a >
228- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /gallery.png " class ="label label-info "> screenshot</ a >
227+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /gallery.html " class ="label label-success "> html</ a >
228+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /gallery.png " class ="label label-info "> screenshot</ a >
229229 </ p >
230230 < p > Example app using grid layout. Responsive design depending on window size.</ p >
231231 </ li >
232232 < li class ="list-group-item ">
233233 < h4 class ="list-group-item-heading "> Auto-placement Algorithm</ h4 >
234234 < p >
235235 < a href ="autoplacement.html " class ="label label-primary "> example</ a >
236- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /autoplacement.html " class ="label label-success "> html</ a >
237- < a href ="https://github.com/Igalia/css-grid-layout/blob/master /autoplacement.png " class ="label label-info "> screenshot</ a >
236+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /autoplacement.html " class ="label label-success "> html</ a >
237+ < a href ="https://github.com/Igalia/css-grid-layout/blob/gh-pages /autoplacement.png " class ="label label-info "> screenshot</ a >
238238 < a href ="http://www.w3.org/TR/css-grid-1/#auto-placement " class ="label label-warning "> spec</ a >
239239 </ p >
240240 < p > Auto-placement algorithm demo. Allow to new add grid items in different positions in order to check how the algorithm works.</ p >
0 commit comments