Semantic empowers designers and developers by creating a shared vocabulary for UI.
Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.
-
-
-
Semantic code is designed to work like natural language so front end code can be understood and written without being a tech guru.
-
-
Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.
-
-
Semantic gives front end developers a common language to develop UI components, so we can all start speaking the same language.
+
+
+
+
Semantic code is designed to be human readable, so front end code can be understood by anyone.
+
+
+
+
Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.
+
+
+
+
Semantic UI is developed around the semantic standard which seeks to make front end decisions less arbitrary.
+
+
+
+
+
+
+
+
+
+
Learn about how to get started with Semantic UI, and best practices for using the Semantic standard in your project.
+
Learn more
+
+
+
+
+
+
See some of the UI elements that the Semantic library has to offer.
+
View Library
+
+
+
+
+
+
+
+
Learn about developing and releasing your own skins UI skins.
+
Authoring Guide
+
+
+
+
+
+
Semantic is a living spec. We need the communitys help to reach our full potential. Help Semantic develop specifications for missing UI elements.
+
Contribute
+
+
+
diff --git a/node/src/files/components/semantic/src/collections/grid.css b/node/src/files/components/semantic/src/collections/grid.css
index 403ac328c..519b97c06 100644
--- a/node/src/files/components/semantic/src/collections/grid.css
+++ b/node/src/files/components/semantic/src/collections/grid.css
@@ -67,8 +67,8 @@
}
.ui.grid > .row {
- margin-top: 0.5rem;
- padding-top: 0.5rem;
+ margin-top: 2%;
+ padding-top: 2%;
}
.ui.grid > .row:first-child {
padding-top: 0rem;
@@ -122,7 +122,7 @@
}
@media only screen and (min-width : 1500px) {
.ui.responsive.grid {
- padding: 0% 20%;
+ padding: 0% 15%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
@@ -130,7 +130,7 @@
}
@media only screen and (min-width : 1750px) {
.ui.responsive.grid {
- padding: 0% 30%;
+ padding: 0% 20%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
@@ -138,7 +138,7 @@
}
@media only screen and (min-width : 2000px) {
.ui.responsive.grid {
- padding: 0% 35%;
+ padding: 0% 25%;
}
.ui.responsive.grid > .column,
.ui.responsive.grid > .row > .column {
@@ -281,18 +281,6 @@
-----------------------*/
/* Vertical Centered */
-.ui.aligned.grid,
-.ui.grid > .aligned.row {
- display: table;
- width: 100%;
-}
-.ui.aligned.grid > .row {
- display: table-row;
-}
-.ui.aligned.grid .column,
-.ui.grid .aligned.row .column {
- display: table-cell;
-}
.ui.top.aligned.grid .column,
.ui.grid .top.aligned.column,
@@ -310,6 +298,13 @@
vertical-align: bottom;
}
+/*----------------------
+ Equal Height Columns
+-----------------------*/
+.ui.grid .equal.row .column {
+ display: table-cell;
+}
+
/*-------------------
Folding
diff --git a/node/src/files/components/semantic/src/collections/message.css b/node/src/files/components/semantic/src/collections/message.css
index 7b06347a8..2cde5696a 100755
--- a/node/src/files/components/semantic/src/collections/message.css
+++ b/node/src/files/components/semantic/src/collections/message.css
@@ -45,7 +45,7 @@
/* block with paragraphs */
.ui.message p {
opacity: 0.85;
- margin: 0.2em 0em;
+ margin: 1em 0em;
}
.ui.message p:first-child {
margin-top: 0em;
@@ -191,6 +191,17 @@
vertical-align: middle;
}
+/*--------------
+ Inverted
+---------------*/
+
+.ui.inverted.message {
+ background-color: rgba(255, 255, 255, 0.05);
+ color: rgba(255, 255, 255, 0.95);
+}
+
+
+
/*--------------
Colors
---------------*/
diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css
index a37e7f626..6d8406367 100755
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@@ -300,31 +300,32 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
---------------*/
#example .masthead {
- background-color: #EF4D6D;
+ background-color: #00B5AD;
padding: 75px 0px 50px;
- color: #FFFFFF;
+ color: rgba(255, 255, 255, 0.9);
margin-bottom: 0px;
border-bottom: none;
}
#example .masthead h1 {
- font-size: 4em;
+ font-size: 5em;
line-height: 1.2;
padding-bottom: 0px;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ text-shadow: 0px 4px 0px rgba(0, 0, 0, 0.2);
}
#example .masthead strike {
color: rgba(255, 255, 255, 0.5);
}
#example .masthead h2 {
font-weight: normal;
- margin: 0.5em 0em 1em;
- font-size: 1.5em;
+ margin: 0.25em 0em 0em;
+ font-size: 1.75em;
border-bottom: none;
line-height: 1;
}
#example .masthead p {
font-size: 1.25em;
- margin: 1.5em 0em 1em;
+ margin: 0.5em 0em 1.5em;
padding: 0px;
}
@@ -344,20 +345,32 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
width: 800px;
margin: 0px auto;
}
+#example .masthead .container,
+#example .solid .container,
+#example .stripe .container {
+ width: 950px;
+}
#example .solid .container,
#example .stripe .container {
- min-height: 240px;
padding: 50px 0px;
overflow: hidden;
}
#example .solid {
background-color: #FFFFFF;
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
#example .stripe {
- background-color: #333333;
- color: #FFFFFF;
+ color: #7E7E7E;
+}
+#example .stripe .message {
+ margin: 0em;
+ padding: 0em;
+ background-color: transparent;
+ color: #7E7E7E;
}
diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco
index 8301fd575..ce7cce6c3 100755
--- a/node/src/layouts/default.html.eco
+++ b/node/src/layouts/default.html.eco
@@ -153,7 +153,7 @@