Browse Source

removes legacy column.css, adds page grid

Former-commit-id: f19fcc08b9
Former-commit-id: 506935f77f
pull/258/head
Jack Lukic 12 years ago
parent
commit
fc3aa3ac7e
3 changed files with 48 additions and 107 deletions
  1. 33
      node/src/documents/collections/grid.html
  2. 17
      src/collections/grid.css
  3. 105
      src/elements/column.css

33
node/src/documents/collections/grid.html

@ -170,11 +170,40 @@ type : 'UI Collection'
<h2>Variations</h2>
<h3>Grid</h3>
<div class="example">
<h4>Page Grid</h4>
<p>A grid can be formatted for page content adding gutters before and after the content of the grid to help make page contents easier to read.</p>
<div class="ui two column page grid">
<div class="column">
<div class="ui labeled vertical fluid inverted icon menu">
<a class="item">
<i class="icon mail"></i>
Mail
</a>
<a class="item">
<i class="icon th-list"></i>
Directory
</a>
<a class="item">
<i class="icon star"></i>
Favorites
</a>
</div>
</div>
<div class="column">
<div class="ui segment">
<b>Inbox</b>
<p>Welcome to your inbox. Would you like to see more information?</p>
</div>
</div>
</div>
</div>
<div class="example">
<h4>Responsive Grid</h4>
<p>A responsive grid is a special type of grid useful for designing page layouts.</p>
<p>A standard grid does not make any assumptions about how it should change gutters depending on content. Page grids will automatically resize the gutters as a browsers resolution changes size.</p>
<p>A grid can be responsive and resize the proportions of its gutters as a browser resolution changes.</p>
<div class="ui two column responsive grid">
<div class="column">

17
src/collections/grid.css

@ -73,12 +73,29 @@
padding-top: 0px;
}
/*-------------------
Content
--------------------*/
.ui.grid > .row > img,
.ui.grid > .row > .column > img {
max-width: 100%;
}
/*******************************
Variations
*******************************/
/*-------------------
Page
--------------------*/
.ui.page.grid {
padding: 0% 5%;
}
/*-------------------
Responsive

105
src/elements/column.css

@ -1,105 +0,0 @@
/*******************************
Columns
*******************************/
/* Text Columns */
.ui.columns > .column,
.ui.column {
width: 50%;
margin: 0px;
padding: 0px 4% 0px;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-left: 1px solid rgba(255, 255, 255, 0.7);
-webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15);
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.15);
}
.ui.columns > .column:first-child,
.ui.column:first-child {
border-left: none;
box-shadow: none;
}
/* Sizing Combinations */
.ui.one.columns .column {
width: 100%;
padding-left: 3.5%;
padding-right: 3.5%;
}
.ui.two.columns .column {
width: 50%;
padding-left: 3%;
padding-right: 3%;
}
.ui.three.columns .column {
width: 33.333%;
padding-left: 3%;
padding-right: 3%;
}
.ui.four.columns .column {
width: 25%;
padding-left: 2%;
padding-right: 2%;
}
.ui.five.columns .column {
width: 20%;
padding-left: 1%;
padding-right: 1%;
}
.ui.six.columns .column {
width: 16.66%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.seven.columns .column {
width: 14.28%;
padding-left: 0.5%;
padding-right: 0.5%;
}
.ui.eight.columns .column {
width: 12.5%;
padding-left: 0.25%;
padding-right: 0.25%;
}
.ui.nine.columns .column {
width: 11.11%;
padding-left: 0.25%;
padding-right: 0.25%;
}
.ui.ten.columns .column {
width: 10%;
padding-left: 0.2%;
padding-right: 0.2%;
}
.ui.eleven.columns .column {
width: 9.09%;
padding-left: 0.2%;
padding-right: 0.2%;
}
.ui.twelve.columns .column {
width: 8.3333%;
padding-left: 0.1%;
padding-right: 0.1%;
}
/* Fitted Colums */
.ui.fitted.columns .column:first-child {
padding-left: 0px;
}
.ui.fitted.columns .column:last-child {
padding-right: 0px;
}
/* Simple Columns */
.ui.columns.simple .column,
.ui.column.simple {
border-left: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Loading…
Cancel
Save