richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

updates columns to sixteen

pull/13/head
Jack Lukic 12 years ago
parent
44b1ecdc44
commit
a37c72b223
7 changed files with 190 additions and 60 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      build/minified/collections/grid.min.css
  2. 2
      build/packaged/semantic.min.css
  3. 55
      build/uncompressed/collections/grid.css
  4. 66
      node/src/documents/collections/grid.html
  5. 55
      node/src/files/components/semantic/collections/grid.css
  6. 4
      node/src/files/stylesheets/semantic.css
  7. 66
      src/collections/grid.less

2
build/minified/collections/grid.min.css
File diff suppressed because it is too large
View File

2
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File

55
build/uncompressed/collections/grid.css
View File

@ -39,8 +39,8 @@
display: inline-block; display: inline-block;
text-align: left; text-align: left;
font-size: 1rem; font-size: 1rem;
padding-left: 1.33%;
padding-right: 1.33%;
padding-left: 1%;
padding-right: 1%;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
@ -121,39 +121,51 @@
--------------------*/ --------------------*/
/* Sizing Combinations */ /* Sizing Combinations */
.ui.grid .one.wide.column { .ui.grid .one.wide.column {
width: 8.3333%;
width: 6.25%;
} }
.ui.grid .two.wide.column { .ui.grid .two.wide.column {
width: 16.66667%;
width: 12.5%;
} }
.ui.grid .three.wide.column { .ui.grid .three.wide.column {
width: 25%;
width: 18.75%;
} }
.ui.grid .four.wide.column { .ui.grid .four.wide.column {
width: 33.3333%;
width: 25%;
} }
.ui.grid .five.wide.column { .ui.grid .five.wide.column {
width: 41.6666%;
width: 31.25%;
} }
.ui.grid .six.wide.column { .ui.grid .six.wide.column {
width: 50%;
width: 37.5%;
} }
.ui.grid .seven.wide.column { .ui.grid .seven.wide.column {
width: 58.3333%;
width: 43.75%;
} }
.ui.grid .eight.wide.column { .ui.grid .eight.wide.column {
width: 66.6666%;
width: 50%;
} }
.ui.grid .nine.wide.column { .ui.grid .nine.wide.column {
width: 75%;
width: 56.25%;
} }
.ui.grid .ten.wide.column { .ui.grid .ten.wide.column {
width: 83.3333%;
width: 62.5;
} }
.ui.grid .eleven.wide.column { .ui.grid .eleven.wide.column {
width: 91.666%;
width: 68.75;
} }
.ui.grid .twelve.wide.column { .ui.grid .twelve.wide.column {
width: 75%;
}
.ui.grid .thirteen.wide.column {
width: 81.25%;
}
.ui.grid .fourteen.wide.column {
width: 87.5%;
}
.ui.grid .fifteen.wide.column {
width: 93.75%;
}
.ui.grid .sixteen.wide.column {
width: 100%; width: 100%;
} }
/*------------------- /*-------------------
@ -162,7 +174,7 @@
/* Standard */ /* Standard */
.ui.grid > .column, .ui.grid > .column,
.ui.grid > .row > .column { .ui.grid > .row > .column {
width: 8.3333%;
width: 6.25%;
} }
/* Assume full width with one column */ /* Assume full width with one column */
.ui.grid > .column:only-child, .ui.grid > .column:only-child,
@ -199,6 +211,21 @@
.ui.eleven.column.grid .column { .ui.eleven.column.grid .column {
width: 9.0909%; width: 9.0909%;
} }
.ui.twelve.column.grid .column {
width: 8.3333%;
}
.ui.thirteen.column.grid .column {
width: 7.6923%;
}
.ui.fourteen.column.grid .column {
width: 7.1428%;
}
.ui.fifteen.column.grid .column {
width: 6.6666%;
}
.ui.sixteen.column.grid .column {
width: 6.25%;
}
/*------------------- /*-------------------
Padded Padded
--------------------*/ --------------------*/

66
node/src/documents/collections/grid.html
View File

@ -24,9 +24,9 @@ type : 'UI Collection'
<p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p> <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p>
<p>Each set of columns matching up to the number of columns in a grid create a row.</p> <p>Each set of columns matching up to the number of columns in a grid create a row.</p>
<div class="ui ignore warning message"><i class="icon heart"></i> <b>Using Grids</b>
<p>The semantic library assumes 12 columns by default. If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></p>
<p>It is also important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div>
<div class="ui ignore green message"><i class="icon heart"></i> <b>Column Count</b> <p>All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes <b>16 columns</b></div>
<div class="ui ignore warning message"><i class="icon info circle"></i> <b>Using Grids</b>
<p>It is important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div>
<div class="ui grid"> <div class="ui grid">
<div class="column"> <div class="column">
<div class="ui segment"> <div class="ui segment">
@ -88,6 +88,26 @@ type : 'UI Collection'
12 12
</div> </div>
</div> </div>
<div class="column">
<div class="ui segment">
13
</div>
</div>
<div class="column">
<div class="ui segment">
14
</div>
</div>
<div class="column">
<div class="ui segment">
15
</div>
</div>
<div class="column">
<div class="ui segment">
16
</div>
</div>
</div> </div>
</div> </div>
@ -188,6 +208,26 @@ type : 'UI Collection'
12a 12a
</div> </div>
</div> </div>
<div class="column">
<div class="ui segment">
13a
</div>
</div>
<div class="column">
<div class="ui segment">
14a
</div>
</div>
<div class="column">
<div class="ui segment">
15a
</div>
</div>
<div class="column">
<div class="ui segment">
16a
</div>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="column"> <div class="column">
@ -250,6 +290,26 @@ type : 'UI Collection'
12b 12b
</div> </div>
</div> </div>
<div class="column">
<div class="ui segment">
13b
</div>
</div>
<div class="column">
<div class="ui segment">
14b
</div>
</div>
<div class="column">
<div class="ui segment">
15b
</div>
</div>
<div class="column">
<div class="ui segment">
16b
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

55
node/src/files/components/semantic/collections/grid.css
View File

@ -39,8 +39,8 @@
display: inline-block; display: inline-block;
text-align: left; text-align: left;
font-size: 1rem; font-size: 1rem;
padding-left: 1.33%;
padding-right: 1.33%;
padding-left: 1%;
padding-right: 1%;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
@ -121,39 +121,51 @@
--------------------*/ --------------------*/
/* Sizing Combinations */ /* Sizing Combinations */
.ui.grid .one.wide.column { .ui.grid .one.wide.column {
width: 8.3333%;
width: 6.25%;
} }
.ui.grid .two.wide.column { .ui.grid .two.wide.column {
width: 16.66667%;
width: 12.5%;
} }
.ui.grid .three.wide.column { .ui.grid .three.wide.column {
width: 25%;
width: 18.75%;
} }
.ui.grid .four.wide.column { .ui.grid .four.wide.column {
width: 33.3333%;
width: 25%;
} }
.ui.grid .five.wide.column { .ui.grid .five.wide.column {
width: 41.6666%;
width: 31.25%;
} }
.ui.grid .six.wide.column { .ui.grid .six.wide.column {
width: 50%;
width: 37.5%;
} }
.ui.grid .seven.wide.column { .ui.grid .seven.wide.column {
width: 58.3333%;
width: 43.75%;
} }
.ui.grid .eight.wide.column { .ui.grid .eight.wide.column {
width: 66.6666%;
width: 50%;
} }
.ui.grid .nine.wide.column { .ui.grid .nine.wide.column {
width: 75%;
width: 56.25%;
} }
.ui.grid .ten.wide.column { .ui.grid .ten.wide.column {
width: 83.3333%;
width: 62.5;
} }
.ui.grid .eleven.wide.column { .ui.grid .eleven.wide.column {
width: 91.666%;
width: 68.75;
} }
.ui.grid .twelve.wide.column { .ui.grid .twelve.wide.column {
width: 75%;
}
.ui.grid .thirteen.wide.column {
width: 81.25%;
}
.ui.grid .fourteen.wide.column {
width: 87.5%;
}
.ui.grid .fifteen.wide.column {
width: 93.75%;
}
.ui.grid .sixteen.wide.column {
width: 100%; width: 100%;
} }
/*------------------- /*-------------------
@ -162,7 +174,7 @@
/* Standard */ /* Standard */
.ui.grid > .column, .ui.grid > .column,
.ui.grid > .row > .column { .ui.grid > .row > .column {
width: 8.3333%;
width: 6.25%;
} }
/* Assume full width with one column */ /* Assume full width with one column */
.ui.grid > .column:only-child, .ui.grid > .column:only-child,
@ -199,6 +211,21 @@
.ui.eleven.column.grid .column { .ui.eleven.column.grid .column {
width: 9.0909%; width: 9.0909%;
} }
.ui.twelve.column.grid .column {
width: 8.3333%;
}
.ui.thirteen.column.grid .column {
width: 7.6923%;
}
.ui.fourteen.column.grid .column {
width: 7.1428%;
}
.ui.fifteen.column.grid .column {
width: 6.6666%;
}
.ui.sixteen.column.grid .column {
width: 6.25%;
}
/*------------------- /*-------------------
Padded Padded
--------------------*/ --------------------*/

4
node/src/files/stylesheets/semantic.css
View File

@ -806,8 +806,8 @@ a:hover {
} }
#example .highlighted.example .grid, #example .highlighted.example .grid,
#example .ui.type.items .image .grid { #example .ui.type.items .image .grid {
-webkit-animation: grid 5s ease-in-out infinite;
-moz-animation: grid 5s ease-in-out infinite;
-webkit-animation: grid 15s ease infinite;
-moz-animation: grid 15s ease infinite;
background-color: #F6F6F6; background-color: #F6F6F6;
margin: 0em auto; margin: 0em auto;
} }

66
src/collections/grid.less
View File

@ -47,8 +47,8 @@
text-align: left; text-align: left;
font-size: 1rem; font-size: 1rem;
padding-left: 1.33%;
padding-right: 1.33%;
padding-left: 1%;
padding-right: 1%;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -164,42 +164,53 @@
Column Width Column Width
--------------------*/ --------------------*/
/* Sizing Combinations */ /* Sizing Combinations */
.ui.grid .one.wide.column { .ui.grid .one.wide.column {
width: 8.3333%;
width: 6.25%;
} }
.ui.grid .two.wide.column { .ui.grid .two.wide.column {
width: 16.66667%;
width: 12.5%;
} }
.ui.grid .three.wide.column { .ui.grid .three.wide.column {
width: 25%;
width: 18.75%;
} }
.ui.grid .four.wide.column { .ui.grid .four.wide.column {
width: 33.3333%;
width: 25%;
} }
.ui.grid .five.wide.column { .ui.grid .five.wide.column {
width: 41.6666%;
width: 31.25%;
} }
.ui.grid .six.wide.column { .ui.grid .six.wide.column {
width: 50%;
width: 37.5%;
} }
.ui.grid .seven.wide.column { .ui.grid .seven.wide.column {
width: 58.3333%;
width: 43.75%;
} }
.ui.grid .eight.wide.column { .ui.grid .eight.wide.column {
width: 66.6666%;
width: 50%;
} }
.ui.grid .nine.wide.column { .ui.grid .nine.wide.column {
width: 75%;
width: 56.25%;
} }
.ui.grid .ten.wide.column { .ui.grid .ten.wide.column {
width: 83.3333%;
width: 62.5;
} }
.ui.grid .eleven.wide.column { .ui.grid .eleven.wide.column {
width: 91.666%;
width: 68.75;
} }
.ui.grid .twelve.wide.column { .ui.grid .twelve.wide.column {
width: 75%;
}
.ui.grid .thirteen.wide.column {
width: 81.25%;
}
.ui.grid .fourteen.wide.column {
width: 87.5%;
}
.ui.grid .fifteen.wide.column {
width: 93.75%;
}
.ui.grid .sixteen.wide.column {
width: 100%; width: 100%;
} }
@ -210,7 +221,7 @@
/* Standard */ /* Standard */
.ui.grid > .column, .ui.grid > .column,
.ui.grid > .row > .column { .ui.grid > .row > .column {
width: 8.3333%;
width: 6.25%;
} }
/* Assume full width with one column */ /* Assume full width with one column */
.ui.grid > .column:only-child, .ui.grid > .column:only-child,
@ -218,46 +229,51 @@
width: 100%; width: 100%;
} }
.ui.two.column.grid .column { .ui.two.column.grid .column {
width: 50%; width: 50%;
} }
.ui.three.column.grid .column { .ui.three.column.grid .column {
width: 33.3333%; width: 33.3333%;
} }
.ui.four.column.grid .column { .ui.four.column.grid .column {
width: 25%; width: 25%;
} }
.ui.five.column.grid .column { .ui.five.column.grid .column {
width: 20%; width: 20%;
} }
.ui.six.column.grid .column { .ui.six.column.grid .column {
width: 16.66667%; width: 16.66667%;
} }
.ui.seven.column.grid .column { .ui.seven.column.grid .column {
width: 14.2857%; width: 14.2857%;
} }
.ui.eight.column.grid .column { .ui.eight.column.grid .column {
width: 12.5%; width: 12.5%;
} }
.ui.nine.column.grid .column { .ui.nine.column.grid .column {
width: 11.1111%; width: 11.1111%;
} }
.ui.ten.column.grid .column { .ui.ten.column.grid .column {
width: 10%; width: 10%;
} }
.ui.eleven.column.grid .column { .ui.eleven.column.grid .column {
width: 9.0909%; width: 9.0909%;
} }
.ui.twelve.column.grid .column {
width: 8.3333%;
}
.ui.thirteen.column.grid .column {
width: 7.6923%;
}
.ui.fourteen.column.grid .column {
width: 7.1428%;
}
.ui.fifteen.column.grid .column {
width: 6.6666%;
}
.ui.sixteen.column.grid .column {
width: 6.25%;
}
/*------------------- /*-------------------

Write Preview
Loading…
Cancel
Save