diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index f9317356a..958c21d6f 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -20,12 +20,12 @@ themes : ['Default']
-

Grids

+

Overview

Why Use Grids?

-

A grid is a structure, with a very rich history used to align negative space in your design.

+

A grid is a structure, with a very rich history used to align negative space in your design.

Using a grid makes content appear to flow naturally on your page, and allows you to quickly adjust layouts without assigning specific sizes directly to content elements, letting you rapidly prototype and design your page.

diff --git a/server/documents/modules/transition.html.eco b/server/documents/modules/transition.html.eco index 094fed8dc..3b43217a3 100755 --- a/server/documents/modules/transition.html.eco +++ b/server/documents/modules/transition.html.eco @@ -28,7 +28,7 @@ type : 'UI Module'

Flash

An element can flash to draw attention to itself

- $('.leaf.image') + $('.autumn.leaf') .transition('flash') ;
@@ -37,7 +37,7 @@ type : 'UI Module'

Shake

An element can shake to draw attention to its position

- $('.leaf.image') + $('.autumn.leaf') .transition('shake') ;
@@ -46,7 +46,7 @@ type : 'UI Module'

Pulse

An element can pulse to draw attention to its visibility

- $('.leaf.image') + $('.autumn.leaf') .transition('pulse') ;
@@ -55,7 +55,7 @@ type : 'UI Module'

Tada

An element can give user positive feedback for an action

- $('.leaf.image') + $('.autumn.leaf') .transition('tada') ;
@@ -64,7 +64,7 @@ type : 'UI Module'

Bounce

An element can bounce to politely remind you of itself

- $('.leaf.image') + $('.autumn.leaf') .transition('bounce') ;
@@ -75,7 +75,7 @@ type : 'UI Module'

Drop New

An element can drop into view from above

- $('.leaf.image') + $('.autumn.leaf') .transition('drop') ;
@@ -85,12 +85,12 @@ type : 'UI Module'

An element can appear and disappear as part of a series

- $('.leaf.image') + $('.autumn.leaf') .transition('browse') ;
- $('.leaf.image') + $('.autumn.leaf') .transition('browse out right') ;
@@ -100,12 +100,12 @@ type : 'UI Module'

Flip

An element can flip into or out of view vertically or horizontally

- $('.leaf.image') + $('.autumn.leaf') .transition('horizontal flip') ;
- $('.leaf.image') + $('.autumn.leaf') .transition('vertical flip') ;
@@ -115,17 +115,17 @@ type : 'UI Module'

Fade

An element can fade into or out of view descending and ascending

- $('.leaf.image') + $('.autumn.leaf') .transition('fade') ;
- $('.leaf.image') + $('.autumn.leaf') .transition('fade up') ;
- $('.leaf.image') + $('.autumn.leaf') .transition('fade down') ;
@@ -134,7 +134,7 @@ type : 'UI Module'

Scale

An element can scale into or out of view

- $('.leaf.image') + $('.autumn.leaf') .transition('scale') ;
@@ -144,12 +144,12 @@ type : 'UI Module'

Slide

An element can appear to slide in from above or below

- $('.leaf.image') + $('.autumn.leaf') .transition('slide down') ;
- $('.leaf.image') + $('.autumn.leaf') .transition('slide up') ;
@@ -159,7 +159,7 @@ type : 'UI Module'
- +
@@ -178,7 +178,7 @@ type : 'UI Module'

If a transition is called without any arguments all default settings will be used.

- $('.dog.image') + $('.green.leaf') // default everything .transition() ; @@ -187,7 +187,7 @@ type : 'UI Module'

Passing in settings

Transitions use similar argument shorthand as animate. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.

- $('.dog.image') + $('.green.leaf') .transition({ animation : 'scale', duration : '2s', @@ -215,7 +215,7 @@ type : 'UI Module'

Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.

- $('.dog.image') + $('.green.leaf') .transition('horizontal flip', '500ms') .transition('horizontal flip', 500, function() { alert('done!'); @@ -319,14 +319,14 @@ type : 'UI Module'
- +

Visibility

After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animation finishes.

- $('.kitten.image') + $('.stick.image') .transition('scale') ;
@@ -336,7 +336,7 @@ type : 'UI Module'

If an animation direction is not specified it will automatically be determined based on the elements current visibility. For no example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".

- $('.kitten.image') + $('.stick.image') // fade up out is used if available .transition('fade up') // this is now fade up in @@ -344,7 +344,7 @@ type : 'UI Module' ;
- $('.kitten.image') + $('.stick.image') // if a direction if specified it will be obeyed .transition('horizontal flip in') .transition('vertical flip in') @@ -354,7 +354,7 @@ type : 'UI Module'

Static Animations

Animations that do not have an in or out animation defined, will maintain their current visibility after running

- $('.kitten.image') + $('.stick.image') .transition('pulse') ;
@@ -362,13 +362,13 @@ type : 'UI Module'

Looping

Animation loops can be controlled by setting looping. Callbacks will occur after each loop cycle

- $('.kitten.image') + $('.stick.image') .transition('set looping') .transition('bounce', '2000ms') ;
- $('.kitten.image') + $('.stick.image') .transition('remove looping') ;
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 7095affae..fc70f2a02 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -196,6 +196,7 @@ a:hover { margin: 2rem 0em 1rem; } #example .tab.header.segment .tabular.menu { + clear: both; margin: 2rem -1px 0em; border-bottom: none; } @@ -810,7 +811,7 @@ body#example.hide { clear: both; padding: 1px; } - +#example .main.container .examples > h2, #example .main.container > h2 { position: relative; } @@ -1788,7 +1789,7 @@ body.progress .ui.progress .bar { } @media only screen and (min-width : 998px) { #example .examples { - margin-right: 330px; + margin-right: 320px; padding: 1px; } #example .fixed.column, @@ -1796,14 +1797,4 @@ body.progress .ui.progress .bar { float: right; width: 300px; } -} -@media only screen and (min-width : 1500px) { - #example .examples { - margin-right: 500px; - } - #example .fixed.column, - #example .fixed.column .fixed { - float: right; - width: 400px; - } } \ No newline at end of file