From 1d94d1a75ef32029ad428f4fecc0a3295f1fddf9 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Mon, 13 May 2013 12:23:12 -0400 Subject: [PATCH] iterating on grid --- README.md | 12 +++++----- node/src/documents/collection.html | 12 +++++----- node/src/documents/collections/grid.html | 16 ++++++------- node/src/documents/element.html | 24 ++++++++++++++----- .../semantic/src/collections/grid.css | 3 ++- node/src/files/stylesheets/semantic.css | 12 +++++----- src/collections/grid.css | 3 ++- 7 files changed, 48 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 034f826f6..43e1b0e18 100755 --- a/README.md +++ b/README.md @@ -34,13 +34,13 @@ By defining a vocabulary the development community can exchange javascript and c **All UI**: The specification defines class name and html structures which can be used to represent an element -**Elements**: The specification outlines states that an elements can exist, lists common types, or variations, of an element, and if necessary, defines how the element functions in groups. +**Elements**: An element definition gives states which an elements can occupy, common types of that element, and if necessary, defines how the element functions in groups. -**Collections**: The specification defines a list of elements that it can include, and ways which variations in the collection can affect each element. +**Collections**: Collection definitions list elements that it can include, and variations which can apply to both the collection, or individual elements found in the collection. -**Modules**: The specification defines a set of behaviors the module is expected to perform. +**Modules**: Module definitions include a list of behaviors that are commonly associated with an element -**Views**: The specification defines the types of content it usually contains, and a standard heirarchy for presenting the content to the user. +**Views**: View specifications defines the types of content the view usually display, and the heirarchy typical to presenting this content to the user. #### Based on class @@ -122,9 +122,9 @@ UI elements can have plural definitions when they are known to exist together fr In this case each button will be large because we understand it is a part of the large button group ``` html -
+
Cancel
-
Continue
+
Continue
``` diff --git a/node/src/documents/collection.html b/node/src/documents/collection.html index 3fb4aff7a..dc03b699c 100755 --- a/node/src/documents/collection.html +++ b/node/src/documents/collection.html @@ -6,13 +6,13 @@ title : 'UI Collections' type : 'Library' --- -
-
+
+

UI Collection

UI collections are elements which contain other elements which often appear together.

-
+

Types of Collections

@@ -38,9 +38,9 @@ type : 'Library'
-
First
-
Second
-
Third
+
1
+
2
+
3
diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index 1e6b09ae4..d698f0fb6 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -256,7 +256,7 @@ type : 'UI Collection'

Grid

-
+

Page Grid

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.

@@ -286,11 +286,11 @@ type : 'UI Collection'
-
+

Responsive Grid

A grid can be responsive to a browsers width.

-
+

Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals.

@@ -321,7 +321,7 @@ type : 'UI Collection'
-
+

Changing column count

A grid can have a different number of columns

@@ -394,7 +394,7 @@ type : 'UI Collection'
-
+

Floating (Horizontal Alignment)

A column can be aligned, or "floated", to either the left or right of its row.

@@ -427,7 +427,7 @@ type : 'UI Collection'
-
+

Vertical Alignment

A grid or row can specify its vertical alignment can have its columns vertically centered.

@@ -521,7 +521,7 @@ type : 'UI Collection'
-
+

Evenly Divided Grid w/ Rows

Content that does not match evenly finish a row will be centered in the next row

@@ -601,7 +601,7 @@ type : 'UI Collection'

Columns

-
+

Column Width

A column can span across multiple grid columns.

diff --git a/node/src/documents/element.html b/node/src/documents/element.html index 48fdfcf42..41f87d2f9 100755 --- a/node/src/documents/element.html +++ b/node/src/documents/element.html @@ -17,23 +17,35 @@ type : 'Library'
Definition - Distinction + Types

Definition

+

UI Elements are single interface elements that do not contain other elements inside themselves.

-

zzzz

+

Elements are often found in groups, so many element definitions include a plural definition.

-

Distinction

+
+

Groups

+

The plural of button is "buttons" a button wrapped inside "buttons" will automatically apply styling appropriate for a group. Also many button variations can be used on plural definitions just like they would be used in singular.

+

For example, in this case each button will be large because we understand it is a part of the large button group

+
+
+
Cancel
+
Continue
+
+
+ +

Types

-
+
Follow
-
Button
+ Button

A button indicates a possible user action.

@@ -44,7 +56,7 @@ type : 'Library'
User Favorite
-
Label
+ Label

A button indicates a possible user action.

diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css index a29526e35..674d62aaa 100644 --- a/node/src/files/components/semantic/src/collections/grid.css +++ b/node/src/files/components/semantic/src/collections/grid.css @@ -26,7 +26,8 @@ -ms-box-sizing: border-box; box-sizing: border-box; } -.ui.grid:after { +.ui.grid:after, +.ui.row:after { content: "."; display: block; height: 0; diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 56627107c..122d310a5 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -564,15 +564,15 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ } #example .highlighted.example .grid .column, #example .ui.type.items .image .grid .column { - background-color: #E0E0E0; - height: 150px; - -webkit-box-shadow: 0px 0px 0px 1px #FFFFFF; - -moz-box-shadow: 0px 0px 0px 1px #FFFFFF; - box-shadow: 0px 0px 0px 1px #FFFFFF; + background-color: #F4F4F4; + min-height: 100px; + -webkit-box-shadow: 0px 0px 0px 1px #E2E2E2; + -moz-box-shadow: 0px 0px 0px 1px #E2E2E2; + box-shadow: 0px 0px 0px 1px #E2E2E2; } #example .highlighted.example .grid .segment, #example .ui.type.items .image .grid .segment { - height: 150px; + min-height: 100px; border: 1px solid #DDDDDD; -webkit-box-shadow: none; diff --git a/src/collections/grid.css b/src/collections/grid.css index a29526e35..674d62aaa 100755 --- a/src/collections/grid.css +++ b/src/collections/grid.css @@ -26,7 +26,8 @@ -ms-box-sizing: border-box; box-sizing: border-box; } -.ui.grid:after { +.ui.grid:after, +.ui.row:after { content: "."; display: block; height: 0;