richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

iteration on intro page 

Former-commit-id: a23fcc0f74
Former-commit-id: 9b97407249
pull/258/head
Jack Lukic 11 years ago
parent
d2df44351b
commit
a4fad21ea7
7 changed files with 123 additions and 56 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      node/src/documents/index.html
  2. 29
      node/src/files/components/semantic/src/collections/grid.css
  3. 13
      node/src/files/components/semantic/src/collections/message.css
  4. 31
      node/src/files/stylesheets/semantic.css
  5. 2
      node/src/layouts/default.html.eco
  6. 29
      src/collections/grid.css
  7. 13
      src/collections/message.css

62
node/src/documents/index.html
View File

@ -7,11 +7,11 @@ type : 'Semantic'
<div class="masthead segment">
<div class="container">
<h1><i class="icon flash"></i>Semantic</h1>
<h1><i class="icon th-alt"></i>Semantic UI</h1>
<h2><strike>HTML</strike> UI is the language of the web.</h2>
<p>Semantic empowers designers and developers by creating a shared vocabulary for UI.</p>
<p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
<div class="ui large black buttons">
<div class="ui two fluid black buttons">
<a href="#" class="ui button"><i class="icon cloud"></i> Download</a>
<a href="#" class="ui button"><i class="icon terminal"></i> Customize</a>
</div>
@ -20,13 +20,55 @@ type : 'Semantic'
</div>
<div class="solid">
<div class="container">
<h2 class="ui header"><i class="icon eye"></i>HTML for Everyone</h2>
<p>Semantic code is designed to work like natural language so front end code can be understood and written without being a tech guru.</p>
<h2 class="ui header"><i class="icon easel"></i> Reskin your site in seconds</h2>
<p>Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
<h2 class="ui header"><i class="icon users"></i> Made for the Community</h2>
<p>Semantic gives front end developers a common language to develop UI components, so we can all start speaking the same language.</p>
<div class="container ui three column grid">
<div class="column">
<h1 class="ui header"><i class="icon users"></i> Learn HTML</h1>
<p>Semantic code is designed to be human readable, so front end code can be understood by anyone.</p>
</div>
<div class="column">
<h1 class="ui header"><i class="icon easel"></i> Redesign? Easy</h1>
<p>Semantic provides an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
</div>
<div class="column">
<h1 class="ui header"><i class="icon terminal"></i> Build Smarter</h1>
<p>Semantic UI is developed around the semantic standard which seeks to make front end decisions less arbitrary.</p>
</div>
</div>
</div>
<div class="stripe">
<div class="container ui grid">
<div class="row">
<div class="seven wide column">
<div class="ui message">
<h2 class="ui header"><i class="icon info-circle"></i> Get Started</h2>
<p>Learn about how to get started with Semantic UI, and best practices for using the Semantic standard in your project.</p>
<div class="ui fluid teal button">Learn more <i class="icon right-open"></i></div>
</div>
</div>
<div class="five wide column">
<div class="ui message">
<h2 class="ui header"><i class="icon easel"></i> See UI elements</h2>
<p>See some of the UI elements that the Semantic library has to offer.</p>
<div class="ui fluid red button">View Library <i class="icon right-open"></i></div>
</div>
</div>
</div>
<div class="row">
<div class="five wide column">
<div class="ui message">
<h2 class="ui header"><i class="icon terminal"></i> Author Elements </h2>
<p>Learn about developing and releasing your own skins UI skins.</p>
<div class="ui fluid green button">Authoring Guide <i class="icon right-open"></i></div>
</div>
</div>
<div class="seven wide column">
<div class="ui message">
<h2 class="ui header"><i class="icon edit"></i> Help Write the Spec </h2>
<p>Semantic is a living spec. We need the communitys help to reach our full potential. Help Semantic develop specifications for missing UI elements.</p>
<div class="ui fluid blue button">Contribute <i class="icon right-open"></i></div>
</div>
</div>
</div>
</div>
</div>

29
node/src/files/components/semantic/src/collections/grid.css
View File

@ -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

13
node/src/files/components/semantic/src/collections/message.css
View File

@ -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
---------------*/

31
node/src/files/stylesheets/semantic.css
View File

@ -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;
}

2
node/src/layouts/default.html.eco
View File

@ -153,7 +153,7 @@
</div>
</div>
</div>
<div class="ui teal huge sidebar right attached button">
<div class="ui black huge sidebar right attached button">
<i class="icon th-list"></i>
<span class="text">Menu</span>
</div>

29
src/collections/grid.css
View File

@ -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

13
src/collections/message.css
View File

@ -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
---------------*/

Write Preview
Loading…
Cancel
Save