diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 62ab10157..6e84efc8a 100644 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -2,8 +2,10 @@ ** Breaking Changes +* Grid (previously Elements/Element) now have children called "columns" * Renamed UI Blocks to UI Messages (may 13, 2013) * Messages are automatically hidden inside forms (may 04, 2013) * Renamed UI Item Grid variation to standard item prototype to avoid conflict with ui grid (may 12, 2013) * Renamed "grid" variation of table to "celled" to fix conflict with ui grid (may 10, 2013) -* Buttons are now grey by default \ No newline at end of file +* Buttons are now grey by default +* Header styles have changed significantly \ No newline at end of file diff --git a/node/src/documents/collection.html b/node/src/documents/collection.html index c5f599f60..3fb4aff7a 100755 --- a/node/src/documents/collection.html +++ b/node/src/documents/collection.html @@ -6,93 +6,94 @@ title : 'UI Collections' type : 'Library' --- -
-
+
+

UI Collection

-

UI collections are heterogeneous groups of elements

+

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

-
- -

Types of Collections

- -
-
-
-
-
- - -
-
- - +
+
+

Types of Collections

+ +
+
+
+
+
+ + +
+
+ + +
-
-
- Form -

A form is used to solicit a user response

-
-
-
-
-
-
Top
-
Middle
-
Bottom
+
+ Form +

A form is used to solicit a user response

-
- Grid -

A grid helps harmonize negative space in a layout

-
-
-
-
-
-
Friends
-
Messages
+
+
+
+
First
+
Second
+
Third
+
+
+
+ Grid +

A grid helps harmonize negative space in a layout

-
- Menu -

A menu organizes related links

-
-
-
-
- - - - - - - - - - - -
NameStatus
John Approved
-
-
- Table -

A table organizes data that is grouped into rows

+
+
+
+
Friends
+
Messages
+
+
+
+ Menu +

A menu organizes related links

+
-
-
-
-
-
Alert
-

You forgot your name!

+
+
+ + + + + + + + + + + +
NameStatus
John Approved
+
+
+ Table +

A table collects related data into rows of content

-
- Text Block -

A text block is used to alert a user.

+
+
+
+
Alert
+

You forgot your name!

+
+
+
+ Message +

Messages alert a user to something important.

+
+
-
diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html index 9738efbcd..0046460a7 100755 --- a/node/src/documents/collections/form.html +++ b/node/src/documents/collections/form.html @@ -33,7 +33,7 @@ type : 'UI Collection'

Form:

A form is a collection of user input elements, and has no stylings of its own.

-
+

This example uses a ui segment to add the padding and background color. This is not required.

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

Text Block

Text blocks have special meaning inside a form tag. All message blocks are hidden by default.

-
+
We had some issues
  • Please enter your first name
    • @@ -210,7 +210,7 @@ type : 'UI Collection'

    Error

    If a form is in an error state, it will automatically show any error message blocks:

    -
    +
    Action Forbidden

    You can only sign up for an account once with a given e-mail address.

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

    If a form is in warning state, it will automatically show any warning message block:

    -
    +
    Could you check something!
    • You forgot your first name
      • @@ -382,7 +382,7 @@ type : 'UI Collection'
      -
      +
      We had some issues
      • Please enter your first name
        • diff --git a/node/src/documents/collections/grid.html b/node/src/documents/collections/grid.html index 2b09a4d6c..1e6b09ae4 100755 --- a/node/src/documents/collections/grid.html +++ b/node/src/documents/collections/grid.html @@ -19,52 +19,77 @@ type : 'UI Collection'

        Collection

        -
        +

        Grid

        A grid is made up of columns of content. By default a grid must assume a certain number of columns. The semantic library assumes 12 columns by default.

        -
        Tip -

        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 one wide column

        +
        Tip +

        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 one wide column

        +

        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.

        - 1 +
        + 1 +
        - 2 +
        + 2 +
        - 3 +
        + 3 +
        - 4 +
        + 4 +
        - 5 +
        + 5 +
        - 6 +
        + 6 +
        - 7 +
        + 7 +
        - 8 +
        + 8 +
        - 9 +
        + 9 +
        - 10 +
        + 10 +
        - 11 +
        + 11 +
        - 12 +
        + 12 +
        -
        +

        Rows

        A basic grid has padding on the first and last columns of each row.

        A row is used to create vertical padding between rows of columns on a page. If no rows are specified, a grid column will sit flush along each side of the grid.

        @@ -72,97 +97,157 @@ type : 'UI Collection'
        - 1a +
        + 1a +
        - 2a +
        + 2a +
        - 3a +
        + 3a +
        - 4a +
        + 4a +
        - 5a +
        + 5a +
        - 6a +
        + 6a +
        - 7a +
        + 7a +
        - 8a +
        + 8a +
        - 9a +
        + 9a +
        - 10a +
        + 10a +
        - 11a +
        + 11a +
        - 12a +
        + 12a +
        - 1b +
        + 1b +
        - 2b +
        + 2b +
        - 3b +
        + 3b +
        - 4b +
        + 4b +
        - 5b +
        + 5b +
        - 6b +
        + 6b +
        - 7b +
        + 7b +
        - 8b +
        + 8b +
        - 9b +
        + 9b +
        - 10b +
        + 10b +
        - 11b +
        + 11b +
        - 12b +
        + 12b +
        -
        +

        Grid

        A grid will automatically center any columns that do not match a full row width. This is useful for centering content

        -
        -
        - 1 -
        -
        - 2 -
        -
        - 3 +
        +
        +
        +
        + 1 +
        +
        +
        +
        + 2 +
        +
        +
        +
        + 3 +
        +
        -
        - 4 +
        +
        +
        + 4 +
        +
        @@ -310,7 +395,7 @@ type : 'UI Collection'
        -

        Horizontal Alignment

        +

        Floating (Horizontal Alignment)

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

        diff --git a/node/src/documents/collections/menu.html b/node/src/documents/collections/menu.html index 0e7e3d114..3b0b69341 100755 --- a/node/src/documents/collections/menu.html +++ b/node/src/documents/collections/menu.html @@ -56,7 +56,7 @@ type : 'UI Collection'

        Vertical Menu

        A vertical menu can have its own sub menus. This example uses three levels of menu depth.

        -
        A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
        +
        A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with ui grid.
        Username @@ -120,7 +120,7 @@ type : 'UI Collection'

        Text Item

        A menu may have a simple text item.

        -
        +

        Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname text

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

        Dropdown Item

        An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.

        -
        +

        A dropdown menu will, by default, automatically show when the parent element is hovered.

        If you need to programmatically close the dropdown, use the class name dynamic and the javascript state module, which will allow you to manipulate the hover state in javascript.

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

        Hover

        A menu item can be hovered

        -
        Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.
        +
        Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.
        Link diff --git a/node/src/documents/download.html b/node/src/documents/download.html index 51ac9ee44..1424297fd 100755 --- a/node/src/documents/download.html +++ b/node/src/documents/download.html @@ -12,15 +12,6 @@ type : 'Library'
        -
        -
        -
        Collection
        -
        Elements
        -
        States
        -
        Variations
        -
        -
        -

        Collection

        diff --git a/node/src/documents/module.html b/node/src/documents/module.html index 28735ba5f..6a15818bc 100755 --- a/node/src/documents/module.html +++ b/node/src/documents/module.html @@ -9,22 +9,93 @@ type : 'Library'

        UI Modules

        -

        UI modules are interface elements which require a definition of their behavior.

        +

        UI modules are interface elements whose behavior is an essential part of their definition.

        - Definition - Distinction + Types + Usage
        -

        Definition

        -

        zzzz

        +

        Types

        -

        Distinction

        +

        Usage

        + + +

        Settings

        +

        Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins. + +

        Common Settings

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        NameUsage
        moduleNameName used in debug logs to differentiate this widget from other debug statements.
        debugProvides standard debug output to console.
        performanceProvides performance logging to console of internal method calls.
        verboseProvides extra debug output to console
        namespaceNamespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.
        selectorsAn object containing all selectors used in the module, these are usually children of the module.
        classNamesAn object containing all classnames used in the module.
        errorsA javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements. +
        + +

        Changing Settings

        +
          +
        1. A settings object can be passed in when initializing the plugin +
          $('.foo') + .module({ + moduleName: 'Godzilla', + verbose: true + }) +;
          +
          2. +
        2. Default settings for the module can be overridden by modifying $.fn.module.settings. +
          $.fn.module.settings.moduleName = 'Godzilla';
          +
          3. +
        3. Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. +
          $('.foo') + // lets initialize that! + .module() + // oh wait forgot something + .module('setting', 'moduleName', 'Godzilla') +;
          +
          4. +
        +

        Reading Settings

        +

        Settings can also be read programmatically:

        $('.foo').module('setting', 'moduleName'); +// outputs godzilla
        diff --git a/node/src/documents/modules/checkbox.html b/node/src/documents/modules/checkbox.html index 74a8b7b48..dbc05044a 100755 --- a/node/src/documents/modules/checkbox.html +++ b/node/src/documents/modules/checkbox.html @@ -16,7 +16,9 @@ type : 'UI Module'
        - Examples + Structure + Behavior + Examples Getting Started Settings
        @@ -83,26 +85,6 @@ type : 'UI Module'
        $('.ui.checkbox') .checkbox('disableAll') ;
        - -

        Settings

        -

        Changing Settings

        -
          -
        1. A settings object can be passed in when initializing the plugin -
          $('.foo') - .checkbox({ - moduleName: 'Godzilla' - }) -;
          -
          2. -
        2. Default settings for the module can be overridden by modifying $.fn.checkbox.settings. -
          $.fn.checkbox.settings.moduleName = 'Godzilla';
          -
          3. -
        3. Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. -
          $('.foo').checkbox('setting', 'moduleName', 'Godzilla');
          -
          4. -
        -

        Reading Settings

        -

        Settings can also be read programmatically:

        $('.foo').checkbox('setting', 'moduleName');

        Defaults

        diff --git a/node/src/documents/sink.html b/node/src/documents/sink.html index 5daaa0c0c..3eba710a9 100755 --- a/node/src/documents/sink.html +++ b/node/src/documents/sink.html @@ -163,7 +163,7 @@ type : 'Other'
        -
        +
        @@ -185,7 +185,7 @@ type : 'Other'
        -
        +
        UI Elements

        This is an estimate of total time left to compete reskin and docs for the following elements

        @@ -309,7 +309,7 @@ type : 'Other'
        -
        +
        UI Collections
        diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css index 14872d59f..868312a6c 100644 --- a/node/src/files/components/semantic/src/collections/grid.css +++ b/node/src/files/components/semantic/src/collections/grid.css @@ -119,7 +119,7 @@ } @media only screen and (min-width : 1000px) { .ui.responsive.grid { - padding: 0% 5%; + padding: 0% 10%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -127,7 +127,7 @@ } @media only screen and (min-width : 1500px) { .ui.responsive.grid { - padding: 0% 10%; + padding: 0% 20%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -135,7 +135,7 @@ } @media only screen and (min-width : 1750px) { .ui.responsive.grid { - padding: 0% 20%; + padding: 0% 30%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -143,7 +143,7 @@ } @media only screen and (min-width : 2000px) { .ui.responsive.grid { - padding: 0% 27%; + padding: 0% 35%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -194,7 +194,7 @@ } /*------------------- - Column Count + Column Count --------------------*/ /* Standard */ diff --git a/node/src/files/components/semantic/src/collections/message.css b/node/src/files/components/semantic/src/collections/message.css index e100bf2f5..7b06347a8 100644 --- a/node/src/files/components/semantic/src/collections/message.css +++ b/node/src/files/components/semantic/src/collections/message.css @@ -11,7 +11,7 @@ */ /******************************* - Text Message + Text Block *******************************/ .ui.message { @@ -36,13 +36,13 @@ Content ---------------*/ -/* message with header */ +/* block with headers */ .ui.message .header { font-size: 1.33em; font-weight: bold; } -/* message with paragraph */ +/* block with paragraphs */ .ui.message p { opacity: 0.85; margin: 0.2em 0em; diff --git a/node/src/files/components/semantic/src/elements/label.css b/node/src/files/components/semantic/src/elements/label.css index 60d169fe8..8cd87f35d 100644 --- a/node/src/files/components/semantic/src/elements/label.css +++ b/node/src/files/components/semantic/src/elements/label.css @@ -203,6 +203,20 @@ a.ui.label { } + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + /*------------------- Colors --------------------*/ diff --git a/node/src/files/components/semantic/src/elements/progress.css b/node/src/files/components/semantic/src/elements/progress.css index d02d4cf6d..dbfddbfb8 100644 --- a/node/src/files/components/semantic/src/elements/progress.css +++ b/node/src/files/components/semantic/src/elements/progress.css @@ -1,7 +1,7 @@ .ui.progress { border: 1px solid #DDDDDD; - width: 350px; + width: 100%; max-width: 100%; height: 35px; @@ -66,19 +66,26 @@ } /* State */ -.ui.success.progress .bar { + +.ui.successful.progress .bar { background-color: #73E064 !important; } -.ui.success.progress .bar, -.ui.success.progress .bar::after { +.ui.successful.progress .bar, +.ui.successful.progress .bar::after { -webkit-animation: none !important; -moz-animation: none !important; } -.ui.error.progress .bar { + +.ui.failed.progress .bar { background-color: #DF9BA4 !important; } -.ui.error.progress .bar, -.ui.error.progress .bar::after { +.ui.failed.progress .bar, +.ui.failed.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { -webkit-animation: none !important; -moz-animation: none !important; } diff --git a/node/src/files/components/semantic/src/elements/segment.css b/node/src/files/components/semantic/src/elements/segment.css index 1097aae13..947082c26 100644 --- a/node/src/files/components/semantic/src/elements/segment.css +++ b/node/src/files/components/semantic/src/elements/segment.css @@ -16,6 +16,11 @@ -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; } @@ -30,11 +35,6 @@ margin-top: 0em; } -/* Compatability with Grid */ -.ui.fitted.elements .ui.segment.element:first-child { - border-radius: 5px 0px 0px 5px; -} - .ui.segment.attached { top: -1px; bottom: -1px; diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index c94398cf2..d4079d608 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -251,7 +251,8 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ /* segment headers */ #example > .segment { margin: 0px 0px 46px; - padding: 65px 0px 20px; + padding-top: 65px; + padding-bottom: 20px; background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; } @@ -309,7 +310,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ clear: both; } #example .page { - font-family: "Arial, Helvetica, sans-serif"; + /* font-family: "Arial, Helvetica, sans-serif"; */ } #example .page .of { font-family: 'Neutraface'; @@ -553,7 +554,30 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ opacity: 1; } -#example .ui.items > .item > .image { +#example .highlighted.example .grid, +#example .ui.type.items .image .grid { + background-color: #F0F0F0; +} +#example .highlighted.example .grid .column, +#example .ui.type.items .image .grid .column { + background-color: #E0E0E0; + height: 150px; +} +#example .highlighted.example .grid .segment, +#example .ui.type.items .image .grid .segment { + height: 150px; + border: 1px solid #DDDDDD; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; +} + +#example .ui.type.items > .item > .image { padding: 1em; vertical-align: middle; } diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 73a1a2e86..14b794ba6 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -27,6 +27,7 @@ + diff --git a/src/collections/grid.css b/src/collections/grid.css index 14872d59f..868312a6c 100755 --- a/src/collections/grid.css +++ b/src/collections/grid.css @@ -119,7 +119,7 @@ } @media only screen and (min-width : 1000px) { .ui.responsive.grid { - padding: 0% 5%; + padding: 0% 10%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -127,7 +127,7 @@ } @media only screen and (min-width : 1500px) { .ui.responsive.grid { - padding: 0% 10%; + padding: 0% 20%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -135,7 +135,7 @@ } @media only screen and (min-width : 1750px) { .ui.responsive.grid { - padding: 0% 20%; + padding: 0% 30%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -143,7 +143,7 @@ } @media only screen and (min-width : 2000px) { .ui.responsive.grid { - padding: 0% 27%; + padding: 0% 35%; } .ui.responsive.grid > .column, .ui.responsive.grid > .row > .column { @@ -194,7 +194,7 @@ } /*------------------- - Column Count + Column Count --------------------*/ /* Standard */ diff --git a/src/elements/label.css b/src/elements/label.css index 60d169fe8..8cd87f35d 100755 --- a/src/elements/label.css +++ b/src/elements/label.css @@ -203,6 +203,20 @@ a.ui.label { } + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + /*------------------- Colors --------------------*/ diff --git a/src/elements/progress.css b/src/elements/progress.css index d02d4cf6d..dbfddbfb8 100755 --- a/src/elements/progress.css +++ b/src/elements/progress.css @@ -1,7 +1,7 @@ .ui.progress { border: 1px solid #DDDDDD; - width: 350px; + width: 100%; max-width: 100%; height: 35px; @@ -66,19 +66,26 @@ } /* State */ -.ui.success.progress .bar { + +.ui.successful.progress .bar { background-color: #73E064 !important; } -.ui.success.progress .bar, -.ui.success.progress .bar::after { +.ui.successful.progress .bar, +.ui.successful.progress .bar::after { -webkit-animation: none !important; -moz-animation: none !important; } -.ui.error.progress .bar { + +.ui.failed.progress .bar { background-color: #DF9BA4 !important; } -.ui.error.progress .bar, -.ui.error.progress .bar::after { +.ui.failed.progress .bar, +.ui.failed.progress .bar::after { + -webkit-animation: none !important; + -moz-animation: none !important; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { -webkit-animation: none !important; -moz-animation: none !important; } diff --git a/src/elements/segment.css b/src/elements/segment.css index 1097aae13..947082c26 100755 --- a/src/elements/segment.css +++ b/src/elements/segment.css @@ -16,6 +16,11 @@ -moz-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; } @@ -30,11 +35,6 @@ margin-top: 0em; } -/* Compatability with Grid */ -.ui.fitted.elements .ui.segment.element:first-child { - border-radius: 5px 0px 0px 5px; -} - .ui.segment.attached { top: -1px; bottom: -1px;