diff --git a/server/documents/elements/header.html.eco b/server/documents/elements/header.html.eco
index 35282cc81..88ab1cbda 100755
--- a/server/documents/elements/header.html.eco
+++ b/server/documents/elements/header.html.eco
@@ -26,6 +26,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
+
@@ -35,6 +36,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Account Settings
+
+
@@ -56,6 +59,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
+
@@ -64,20 +68,20 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Page headings size themselves relative to the base font of the entire page not the surrounding text.
-
+
-
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.
+

-
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
+

-
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
+

-
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+

-
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+
@@ -86,20 +90,20 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Headers may be oriented to give the importance of a section in the context of the content that surrounds it
Content headings size themselves relative to the base font of the surrounding text
-
+
-
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.
+

-
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
+

-
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
+

-
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+

-
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+
@@ -111,6 +115,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
+
@@ -119,12 +124,11 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
A header can be formatted to divide itself from the content below it
+

-
Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.
-
When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!
-
Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.
+
@@ -134,29 +138,28 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+
+
A header can be attached to other content, like a segment
-
+
-
Bulldog is the name for a breed of dog commonly referred to as the English Bulldog. Other Bulldog breeds include the American Bulldog, Old English Bulldog (now extinct), Olde English Bulldogge, and the French Bulldog. The Bulldog is a muscular, heavy dog with a wrinkled face and a distinctive pushed-in nose.
-
The American Kennel Club (AKC), The Kennel Club (UK), and the United Kennel Club (UKC) oversee breeding standards. Bulldogs are the 5th most popular purebreed in the United States in 2013 according to the American Kennel Club.
+
-
+
-
The Catahoula Cur is an American dog breed named after Catahoula Parish, in the state of Louisiana, in the United States. After becoming the state dog of Louisiana in 1979, its name was officially changed to Louisiana Catahoula Leopard Dog. The Catahoula is believed to be the first dog breed developed in North America.
-
The breed is sometimes referred to as the "Catahoula Hound" or "Catahoula Leopard Hound", although it is not a true hound, but a cur. It is also called the "Catahoula Hog Dog", reflecting its traditional use in hunting wild boar.
+
-
+
@@ -195,27 +198,21 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
A header can be formatted with different colors
diff --git a/server/documents/elements/image.html.eco b/server/documents/elements/image.html.eco
index 46c544a3f..f8cfa1ba3 100755
--- a/server/documents/elements/image.html.eco
+++ b/server/documents/elements/image.html.eco
@@ -20,15 +20,17 @@ themes : ['Default']
An image
-
Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.
-

+
+ Unless a size if specified, images will use the original dimensions of the image, with a maximum width of its container size max-width: 100%
.
+
+
An image can be formatted to link to other content
-
+
@@ -39,7 +41,7 @@ themes : ['Default']
An image can show that it is disabled and cannot be selected
-

+
@@ -47,60 +49,116 @@ themes : ['Default']
An image may be formatted to appear inline with text as an avatar
-

Dog Doggington
+

Username
+
+
+
+
+
An image may include a border to emphasize the edges of white or transparent content
+
An image may appear rounded
-

+
An image may appear circular
-

+
+
-

Dog Doggington
+

Top Aligned
-

Dog Doggington
+

Middle Aligned
-

Dog Doggington
+

Bottom Aligned
An image can sit to the left or right of other content
-

-
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
-

-
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
+

+
Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.
+

+
Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.
-
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
+
Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.
-
An image may be formatted to be different sizes
-

-
-

-
-

-
-

-
-

-
-

-
-

-
-

+
An image may appear at different sizes
+
+ Semantic uses arbitrary default values for image sizes from mini to massive. It is recommended to update these with values used in your project in image.variables
.
+
+
+
+
+ Class Name |
+ Size |
+
+
+
+
+ Mini |
+ 20px |
+
+
+ Tiny |
+ 80px |
+
+
+ Small |
+ 150px |
+
+
+ Medium |
+ 300px |
+
+
+ Large |
+ 450px |
+
+
+ Big |
+ 600px |
+
+
+ Huge |
+ 800px |
+
+
+ Massive |
+ 960px |
+
+
+
+

+
+

+
+

+
+

+
+
+
@@ -110,19 +168,19 @@ themes : ['Default']
A group of images can be formatted to have the same size.
-
-
diff --git a/server/files/images/animals/2033_m3.jpg b/server/files/images/animals/moose-love.jpg
old mode 100755
new mode 100644
similarity index 100%
rename from server/files/images/animals/2033_m3.jpg
rename to server/files/images/animals/moose-love.jpg
diff --git a/server/files/images/animals/2032_m3.jpg b/server/files/images/animals/moose.jpg
old mode 100755
new mode 100644
similarity index 100%
rename from server/files/images/animals/2032_m3.jpg
rename to server/files/images/animals/moose.jpg
diff --git a/server/files/images/animals/2045_m3.jpg b/server/files/images/animals/poney.jpg
old mode 100755
new mode 100644
similarity index 100%
rename from server/files/images/animals/2045_m3.jpg
rename to server/files/images/animals/poney.jpg
diff --git a/server/files/images/leaves/10.png b/server/files/images/leaves/10.png
index d70ea4e31..318946f6c 100755
Binary files a/server/files/images/leaves/10.png and b/server/files/images/leaves/10.png differ
diff --git a/server/files/images/wireframe/centered-paragraph.png b/server/files/images/wireframe/centered-paragraph.png
new file mode 100644
index 000000000..ea15612a9
Binary files /dev/null and b/server/files/images/wireframe/centered-paragraph.png differ
diff --git a/server/files/images/wireframe/image-square.png b/server/files/images/wireframe/image-square.png
new file mode 100644
index 000000000..246405c63
Binary files /dev/null and b/server/files/images/wireframe/image-square.png differ
diff --git a/server/files/images/wireframe/image-text.png b/server/files/images/wireframe/image-text.png
new file mode 100644
index 000000000..50a718581
Binary files /dev/null and b/server/files/images/wireframe/image-text.png differ
diff --git a/server/files/images/wireframe/image.png b/server/files/images/wireframe/image.png
new file mode 100644
index 000000000..11ce432e9
Binary files /dev/null and b/server/files/images/wireframe/image.png differ
diff --git a/server/files/images/wireframe/media-paragraph-alt.png b/server/files/images/wireframe/media-paragraph-alt.png
new file mode 100644
index 000000000..de79fc99f
Binary files /dev/null and b/server/files/images/wireframe/media-paragraph-alt.png differ
diff --git a/server/files/images/wireframe/media-paragraph.png b/server/files/images/wireframe/media-paragraph.png
new file mode 100644
index 000000000..a2e5e24fd
Binary files /dev/null and b/server/files/images/wireframe/media-paragraph.png differ
diff --git a/server/files/images/wireframe/paragraph.png b/server/files/images/wireframe/paragraph.png
new file mode 100644
index 000000000..d02b66dbb
Binary files /dev/null and b/server/files/images/wireframe/paragraph.png differ
diff --git a/server/files/images/wireframe/short-paragraph.png b/server/files/images/wireframe/short-paragraph.png
new file mode 100644
index 000000000..408acea69
Binary files /dev/null and b/server/files/images/wireframe/short-paragraph.png differ
diff --git a/server/files/images/wireframe/square-image.png b/server/files/images/wireframe/square-image.png
new file mode 100644
index 000000000..5a2644e69
Binary files /dev/null and b/server/files/images/wireframe/square-image.png differ
diff --git a/server/files/images/wireframe/text-image.png b/server/files/images/wireframe/text-image.png
new file mode 100644
index 000000000..f3e108cc3
Binary files /dev/null and b/server/files/images/wireframe/text-image.png differ
diff --git a/server/files/images/wireframe/white-image.png b/server/files/images/wireframe/white-image.png
new file mode 100644
index 000000000..b9d0d3e87
Binary files /dev/null and b/server/files/images/wireframe/white-image.png differ
diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js
index 591bfc67f..409b617d7 100755
--- a/server/files/javascript/semantic.js
+++ b/server/files/javascript/semantic.js
@@ -223,7 +223,7 @@ semantic.ready = function() {
},
tryCreateMenu: function(event) {
- if($(window).width() > 1000) {
+ if($(window).width() > 640) {
if($container.find('.following.menu').size() === 0) {
handler.createMenu();
handler.createWaypoints();
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index 666496b25..d1c5d6518 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -1091,6 +1091,13 @@ body.progress.animated .ui.progress .bar {
height: 165px;
vertical-align: middle;
}
+/*--------------
+ Header
+---------------*/
+
+#example.header .sizer {
+ padding: 1rem 0em;
+}
/*--------------
Flag
diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco
index e4e7d4e82..b5b5b669b 100755
--- a/server/layouts/default.html.eco
+++ b/server/layouts/default.html.eco
@@ -185,7 +185,7 @@
- UI Docs
+
UI Docs
Download