html/grid.html - Issue 29361708: Issue 4609 - Default grid component

Side by Side Diff: html/grid.html

Issue 29361708: Issue 4609 - Default grid component (Closed)

Patch Set: Improved demo responsiveness Created Nov. 12, 2016, 2:38 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <!--

	3 This file is part of universal-design-language

	4 Copyright (C) 2016 Eyeo GmbH

	5

	6 universal-design-language is free software: you can redistribute it and/or

	7 modify it under the terms of the GNU General Public License as published by

	8 the Free Software Foundation, either version 3 of the License, or

	9 (at your option) any later version.

	10

	11 universal-design-language is distributed in the hope that it will be useful,

	12 but WITHOUT ANY WARRANTY; without even the implied warranty of

	13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

	14 GNU General Public License for more details.

	15

	16 You should have received a copy of the GNU General Public License

	17 along with web.starter-kit. If not, see <http://www.gnu.org/licenses/>.

	18 -->

	19 <html dir="ltr">

	20 <head>

	21 <meta charset="utf-8">

	22 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">

	23 <meta http-equiv="x-ua-compatible" content="ie=edge">

	24 <title>Grid</title>

	25 <link rel="stylesheet" href="/css/main.css">

	26 <style>

	27

	28 /* These styles are for demo purposes only. */

	29

	30 .example
	saroyanm 2016/11/15 16:09:40 Note: considering the comment above I think it mak Note: considering the comment above I think it make sense to setup height and width to the 100%, we are relying to the browser to set the height and width, while in current example it works people might think it's a way to go for the wrappers. saroyanm 2016/11/15 16:09:41 I think people still may refer to this document as I think people still may refer to this document as an example of the implementation, so I'll suggest to rename the .example to something more meaningful, ex.: content-wrapper ? juliandoucette 2016/11/16 17:17:37 Acknowledged. We will clarify this class name and Show quoted text On 2016/11/15 16:09:41, saroyanm wrote: > I think people still may refer to this document as an example of the > implementation, so I'll suggest to rename the .example to something more > meaningful, ex.: content-wrapper ? Acknowledged. We will clarify this class name and function.
	31 {

	32 color: white;

	33 background-color: black;

	34 padding: 0.25em 0.5em;

	35 margin: 0em 0em 1em 0em;
	saroyanm 2016/11/15 16:09:44 Suggestion: What about setting margin-bottom on th Suggestion: What about setting margin-bottom on the column element ? In this example seems like that the content of the clumn is pushing the column that is placed below, but not the column itself, which is more intuitive IMO. juliandoucette 2016/11/16 17:17:37 Acknowledged. See comment above. Show quoted text On 2016/11/15 16:09:44, saroyanm wrote: > Suggestion: What about setting margin-bottom on the column element ? > In this example seems like that the content of the clumn is pushing the column > that is placed below, but not the column itself, which is more intuitive IMO. Acknowledged. See comment above.
	36 }

	37

	38 .mobile,

	39 .tablet

	40 {

	41 max-width: 100%;

	42 padding: 16px 0;

	43 }

	44

	45 .mobile

	46 {

	47 width: 540px;

	48 }

	49

	50 .mobile .column,

	51 .tablet .column

	52 {

	53 width: 100%;

	54 }

	55

	56 .tablet

	57 {

	58 width: 720px;

	59 }

	60

	61 @media(min-width: 576px)

	62 {

	63 .tablet .column.one-fourth

	64 {

	65 width: 50%;

	66 }

	67 }

	68 </style>

	69 </head>

	70 <body>

	71 <div class="container">

	72

	73 <h1>Grid</h1>

	74 <p>A grid is made up of one or more rows that clear and contain one or more columns. Column widths are set by modifier classes and may behave differently at different device widths. Columns may also be displayed in reverse order and/or right-to-left direction. See examples below.</p>

	75

	76 <div class="desktop">

	77 <h2>Desktop width</h2>

	78 <div class="row">

	79 <div class="one-half column"><div class="example">.one-half .column</div ></div>

	80 <div class="one-half column"><div class="example">.one-half .column</div ></div>

	81 </div>

	82 <div class="row">

	83 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	84 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	85 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	86 </div>

	87 <div class="row">

	88 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	89 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	90 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	91 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	92 </div>

	93 </div>

	94

	95 <div class="tablet">

	96 <h2>Tablet width</h2>

	97 <div class="row">

	98 <div class="one-half column"><div class="example">.one-half .column</div ></div>

	99 <div class="one-half column"><div class="example">.one-half .column</div ></div>

	100 </div>

	101 <div class="row">

	102 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	103 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	104 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	105 </div>

	106 <div class="row">

	107 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	108 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	109 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	110 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	111 </div>

	112 </div>

	113

	114 <div class="mobile">

	115 <h2>Mobile width</h2>

	116 <div class="row">

	117 <div class="one-half column"><div class="example">.one-half .column</div ></div>

	118 <div class="one-half column"><div class="example">.one-half .column</div ></div>

	119 </div>

	120 <div class="row">

	121 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	122 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	123 <div class="one-third column"><div class="example">.one-third .column</d iv></div>

	124 </div>

	125 <div class="row">

	126 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	127 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	128 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	129 <div class="one-fourth column"><div class="example">.one-fourth .column< /div></div>

	130 </div>

	131 </div>

	132

	133 <h2>Reverse order</h2>

	134 <div class="row reverse">

	135 <div class="one-half column"><div class="example">Column 1</div></div>

	136 <div class="one-half column"><div class="example">Column 2</div></div>

	137 </div>

	138

	139 <h2>Right-to-left direction</h2>

	140 <div dir="rtl">

	141 <div class="row">

	142 <div class="one-half column"><div class="example">Column 1</div></div>

	143 <div class="one-half column"><div class="example">Column 2</div></div>

	144 </div>

	145 </div>

	146

	147 <h2>Reverse order and right-to-left direction</h2>

	148 <div dir="rtl">

	149 <div class="row reverse">

	150 <div class="one-half column"><div class="example">Column 1</div></div>

	151 <div class="one-half column"><div class="example">Column 2</div></div>

	152 </div>

	153 </div>

	154

	155 </div>

	156 </body>

	157 </html>

OLD	NEW

« no previous file with comments | « no previous file | scss/_grid.scss » ('j') | scss/_grid.scss » ('J')