diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index 4eea19f6a..d3c8516c6 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -21,16 +21,15 @@ themes : ['Default']

Overview

- +
+ + +

Why Use Grids?

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.

-
- - -

All grid systems use an arbitrary column count. Semantic's default theme assumes 16 columns. This number can be adjusted in your project by adjust the @columnCount value in site.variables.

@@ -456,26 +455,24 @@ themes : ['Default']
+
+ +
-
- Inbox -

Welcome to your inbox. Would you like to see more information?

+ +
+
+
+ +
+
+ +
+
+
@@ -487,17 +484,13 @@ themes : ['Default']

A grid can have dividers between its columns

-
How We Collect and Use Information
-

We ask for certain information such as your username, real name, birthdate, address, phone number and e-mail address when you register for a Semantic UI account, or if you correspond with us. We may also retain any messages you send through the Service, and may collect information you provide in User Content you post to the Service. We use this information to operate, maintain, and provide to you the features and functionality of the Service. Your username and if you choose to disclose it, your real name, will be published publicly. Once published your username and / or real name may not be able to be removed.

+
-
- Information we may receive from third parties -
-

We may receive information about you from third parties. For example, if you access our websites or Service through a third-party connection or log-in, for example, through Facebook Connect, by “following,” “liking,” adding the Semantic UI application, linking your account to the Semantic UI Service, etc., that third party may pass certain information about your use of its service to Semantic UI. This information could include, but is not limited to, the user ID associated with your account (for example, your Facebook UID), an access token necessary to access that service, any information that you have permitted the third party to share with us, and any information you have made public in connection with that service.

+
-

Semantic UI may, in its sole discretion, develop a feature that allows you to invite third parties to the Service. If you choose to use our invitation service to invite a third party to the Service through our “Invite friends” feature, you may directly choose a friend to invite through your mobile device’s native contact list – but we do not require that you import your contacts list to the Service, and we do not retain the information contained in your contacts list. You understand that by inviting a friend to Semantic UI through the “Invite friends” feature, you are directly sending a text or email from your personal accounts and that we are not storing your contact list. In addition, you understand and agree that normal carrier charges apply to communications sent from you phone. Since this invitation is coming directly from your email or phone, we do not have access to or control this communication.

+
@@ -508,21 +501,21 @@ themes : ['Default']
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -535,25 +528,21 @@ themes : ['Default']
- +
-

What are Leaves?

-

A leaf is an above-ground plant organ. Its main functions are photosynthesis and gas exchange. A leaf is often flat, so it absorbs the most light, and thin, so that the sunlight can get to the chloroplasts in the cells.

+
- +
-

Types of Leaves

-

Leaves come in many shapes and sizes. The biggest undivided leaf is that of a giant edible aroid. This lives in marshy parts of the tropical rain forest of Borneo.

-

One of its leaves can be ten feet across and have a surface area of over 30 square feet. -

-
+ +
- +
@@ -564,28 +553,24 @@ themes : ['Default']
- +
-

What are Leaves?

-

A leaf is an above-ground plant organ. Its main functions are photosynthesis and gas exchange. A leaf is often flat, so it absorbs the most light, and thin, so that the sunlight can get to the chloroplasts in the cells.

+
- +
- +
-

Types of Leaves

-

Leaves come in many shapes and sizes. The biggest undivided leaf is that of a giant edible aroid. This lives in marshy parts of the tropical rain forest of Borneo.

-

One of its leaves can be ten feet across and have a surface area of over 30 square feet. -

-
+ +
- +
@@ -599,19 +584,13 @@ themes : ['Default']
-
- A -
+
-
- A -
+
-
- A -
+
@@ -621,29 +600,19 @@ themes : ['Default']
-
- B -
+
-
- B -
+
-
- B -
+
-
- B -
+
-
- B -
+
@@ -682,45 +651,47 @@ themes : ['Default']

Column Count

A grid can have a different number of columns per row

-
-
-
-

Log-in

-
- - -
-
- - -
-
-
- - -
-
-
Login
+
+
+
+ +
+
+ +
+
+
-
-
-

Register

-
- - -
-
- - -
-
-
- - -
-
-
Submit
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
@@ -730,35 +701,38 @@ themes : ['Default']

Padded

A grid can preserve its vertical and horizontal gutters on first and last columns

-

This paragraph of text will not align with the edges of the first column below because the grid preserves its outter gutters

+

The following grid has vertical and horizontal gutters

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

This paragraph of text will not align vertically with the edges of the first column below because the grid preserves its outter gutters

+

The following grid has vertical gutters.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

This paragraph of text will not align horizontally with the edges of the first column below because the grid preserves its outter gutters

+

The following grid has horizontal gutters

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -766,99 +740,34 @@ themes : ['Default']

Relaxed

A grid can increase its gutters to allow for more negative space

-
+
-
-

Log-in

-
- - -
-
- - -
-
Login
-
+
-
-

Register

-
-
- - -
-
- - -
-
-
- - -
-
- - -
-
-
- - -
-
-
Submit
-
+ +
+
+ +
+
+
-
+
-
-

Log-in

-
- - -
-
- - -
-
Login
-
+
-
-

Register

-
-
- - -
-
- - -
-
-
- - -
-
- - -
-
-
- - -
- -
-
Submit
-
+ +
+
+ +
+
+
@@ -872,32 +781,32 @@ themes : ['Default']
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
@@ -912,14 +821,14 @@ themes : ['Default']
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
@@ -968,31 +877,14 @@ themes : ['Default']
- +
- + +
- +
@@ -1087,14 +979,30 @@ themes : ['Default']

Equal Height

A row can specify that it is equal height so all of its columns appear the length of its longest column.

+
+
+

This is a short row

+
+
+

This is a short row

+
+
+

This is a very long row with lots of text in it and way more text than the other rows

+

It might even span for multiple paragraphs.

+
+
+
+
+
+
-
+

This is a short row

-
+

This is a short row

-
+

This is a very long row with lots of text in it and way more text than the other rows

It might even span for multiple paragraphs.

@@ -1107,94 +1015,43 @@ themes : ['Default']
- +
- + +
- +
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.

+

Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.

- +
- + +
- +
- +
- + +
- +
@@ -1207,30 +1064,10 @@ themes : ['Default']

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

- +
- +
@@ -1239,13 +1076,13 @@ themes : ['Default']

A column can vary in width taking up more than a single grid column.

-
Column One Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.
+
-
Column Two Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.
+
-
Column Three Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat.
+
diff --git a/server/documents/elements/divider.html.eco b/server/documents/elements/divider.html.eco index 9840096cc..e40fdc9b1 100755 --- a/server/documents/elements/divider.html.eco +++ b/server/documents/elements/divider.html.eco @@ -22,15 +22,15 @@ themes : ['default']

Divider

If you are looking to add a divider in between grid rows, you can use the ui divided grid variation. For more information check out the grid definition

A standard divider

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Vertical Divider

-
- If you use a vertical divider inside a stackable grid it will automatically adjust from a vertical divider to a horizontal divider at mobile resolutions. +
+ A vertical divider will automatically adjust to a horizontal divider at mobile resolutions when used inside a stackable grid

A divider can segment content vertically

@@ -127,9 +127,9 @@ themes : ['default']

Inverted

A divider can have its colors inverted

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -147,30 +147,29 @@ themes : ['default']

Hidden

A hidden divider divides content without creating a dividing line

Section One

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Section Two

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Section

A divider can provide greater margins to divide sections of content

Section One

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Section Two

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+

Clearing

A divider can clear the contents above it

-

Left Header

-

Right Header

+

Floated Content

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
diff --git a/server/documents/elements/header.html.eco b/server/documents/elements/header.html.eco index 88ab1cbda..974437aa0 100755 --- a/server/documents/elements/header.html.eco +++ b/server/documents/elements/header.html.eco @@ -26,7 +26,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Account Settings

- +
@@ -36,7 +36,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby'] Account Settings
Manage your account settings and set e-mail preferences.
- +

@@ -46,7 +46,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Manage your account settings and set e-mail preferences.

- +
@@ -59,7 +59,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Manage your account settings and set e-mail preferences.
- +
@@ -73,15 +73,15 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

First header

- +

Second header

- +

Third header

- +

Fourth header

- +
Fifth header
- +
@@ -95,15 +95,15 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Huge Header
- +
Large Header
- +
Medium Header
- +
Small Header
- +
Tiny Header
- +
@@ -115,7 +115,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Disabled Header
- +

Variations

@@ -124,11 +124,11 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Dividing

A header can be formatted to divide itself from the content below it

- +

Dividing Header

- +
@@ -138,7 +138,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']

Block Header

- +
@@ -149,13 +149,13 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby'] Top Attached
- +

Attached

- +

Bottom Attached diff --git a/server/documents/elements/segment.html.eco b/server/documents/elements/segment.html.eco index ebd4d968e..471f86c1c 100755 --- a/server/documents/elements/segment.html.eco +++ b/server/documents/elements/segment.html.eco @@ -21,7 +21,7 @@ themes : ['default', 'GitHub']

Segment

A segment of content

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -30,13 +30,13 @@ themes : ['default', 'GitHub']

A vertical segment formats content to be aligned as part of a vertical group

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -52,17 +52,17 @@ themes : ['default', 'GitHub']
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -104,7 +104,7 @@ themes : ['default', 'GitHub']

Disabled

A segment may show its content is disabled

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -182,17 +182,17 @@ themes : ['default', 'GitHub']

Colored

A segment can be colored

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
@@ -203,22 +203,22 @@ themes : ['default', 'GitHub']

These colors can be inverted

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+
diff --git a/server/documents/views/card.html.eco b/server/documents/views/card.html.eco index a28a5a4fe..911383ede 100755 --- a/server/documents/views/card.html.eco +++ b/server/documents/views/card.html.eco @@ -9,7 +9,7 @@ title : 'Card' description : 'A card displays site content in a manner similar to a playing card' type : 'UI View' -themes : ['Default', 'Basic', 'GitHub'] +themes : ['Default', 'Basic', 'Classic'] --- <%- @partial('header') %> diff --git a/server/files/javascript/header.js b/server/files/javascript/header.js index c1c3df483..1fc6c11ef 100644 --- a/server/files/javascript/header.js +++ b/server/files/javascript/header.js @@ -18,7 +18,7 @@ semantic.header.ready = function() { increase: function() { var - $container = $(this).parent().next('.ui.segment'), + $container = $(this).parent().next('.sizer'), fontSize = parseInt( $container.css('font-size'), 10) ; $container @@ -27,7 +27,7 @@ semantic.header.ready = function() { }, decrease: function() { var - $container = $(this).parent().next('.ui.segment'), + $container = $(this).parent().next('.sizer'), fontSize = parseInt( $container.css('font-size'), 10) ; $container diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 409b617d7..622b0dd4e 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -585,15 +585,37 @@ semantic.ready = function() { $annotation = $example.find('.annotation'), $code = $annotation.find('.code'), $header = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'), - $ignored = $('i.code:last-child, .anchor, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'), + $ignored = $('i.code:last-child, .wireframe, .anchor, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'), $demo = $example.children().not($header).not($ignored), code = '' ; if( $code.size() === 0) { $demo - .each(function(){ - var $this = $(this).clone(false); - if($this.not('br')) { + .each(function() { + var + $this = $(this).clone(false), + $wireframe = $this.find('.wireframe').add($this.filter('.wireframe')) + ; + $wireframe + .each(function() { + var + src = $(this).attr('src'), + image = (src.search('image') !== -1), + paragraph = (src.search('paragraph') !== -1) + ; + if(paragraph) { + $(this).replaceWith('

') + } + else if(image) { + $(this).replaceWith(''); + } + }) + ; + + // remove wireframe images + $this.find('.wireframe').remove(); + + if($this.not('br').not('.wireframe')) { // allow inline styles only with this one class if($this.is('.my-container')) { code += $this.get(0).outerHTML + "\n"; diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index d1c5d6518..00899058b 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -91,6 +91,19 @@ h1 { padding: 50px 0px 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } +#example .example .wireframe.image { + opacity: 0.5; +} +#example .example .wireframe.image { + margin: 1em 0em; +} +#example .example .wireframe.image:first-child { + margin-top: 0em; +} +#example .example .wireframe.image:last-child { + margin-bottom: 0em; +} + #example .example .anchor + p { margin: 0px 0px 1em; } @@ -810,6 +823,10 @@ body#example.hide { #example .highlighted.special.example .page.grid > .column:last-child:after { display: none; } +#example.animated .negative.example > .grid { + margin: -1rem !important; + background-color: #FFEEEE; +} /* Animation */ #example.animated .highlighted.example > .grid, @@ -819,20 +836,19 @@ body#example.hide { -moz-animation: grid 7s ease infinite; animation: grid 7s ease infinite; } -/* Grid Inside Grid */ -#example.animated .highlighted.example .grid .grid, -#example.animated .animated.example .grid .grid { +#example.animated .negative.example > .grid { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } -#example.animated .negative.example > .grid { +/* Grid Inside Grid */ +#example.animated .highlighted.example .grid .grid, +#example.animated .animated.example .grid .grid { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; - background-color: #FFEEEE; } @-webkit-keyframes grid { @@ -1403,6 +1419,15 @@ body.progress.animated .ui.progress .bar { } @media only screen and (max-width : 998px) { + + #example .pusher > .page { + display: block; + width: 100%; + } + #example .pusher > .page > .full.height { + display: block; + height: 100%; + } #example .following.menu { display: none; }