lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Work on homepage

beta
jlukic 10 years ago
parent
7c5591d03f
commit
b72a604819
7 changed files with 118 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      server/documents/elements/button.html.eco
  2. 59
      server/documents/hotfix.html.eco
  3. 40
      server/documents/index.html.eco
  4. BIN
      server/files/images/icons/mobile.png
  5. 15
      server/files/javascript/docs.js
  6. 15
      server/files/stylesheets/home.css
  7. 3
      server/partials/fixed-menu.html.eco

2
server/documents/elements/button.html.eco
View File

@ -8,7 +8,7 @@ title : 'Button'
description : 'A button indicates a possible user action'
type : 'UI Element'
themes : ['Default', 'Classic', 'Basic', 'Raised', 'Chubby', 'Round', 'Amazon', 'Material', 'GitHub']
themes : ['Default', 'Classic', 'Basic', 'Bootstrap3', 'Raised', 'Chubby', 'Round', 'Amazon', 'Material', 'GitHub']
---
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/button.less" />
<script src="/javascript/button.js"></script>

59
server/documents/hotfix.html.eco
View File

@ -25,15 +25,58 @@ $(document).ready(function() {
</style>
<div class="main container">
<div class="transition demo">
</div>
<div class="ui small images">
<img class="ui image" src="/images/leaves/14.png">
<img class="ui image" src="/images/leaves/20.png">
<img class="ui image" src="/images/leaves/12.png">
<img class="ui image" src="/images/leaves/9.png">
<img class="ui image" src="/images/leaves/13.png">
</div>
<div class="ui button">Flash</div>
<div class="ui button">Shake</div>
<div class="ui button">Pulse</div>
<div class="ui button">Tada</div>
<div class="ui button">Bounce</div>
<div class="ui button">Drop</div>
<div class="ui button">Browse</div>
<div class="ui button">Horizontal Flip</div>
<div class="ui button">Vertical Flip</div>
<div class="ui button">Fade</div>
<div class="ui button">Fade Up</div>
<div class="ui button">Fade Down</div>
<div class="ui button">Scale</div>
<div class="ui button">Slide Down</div>
<div class="ui button">Slide Up</div>
<div class="ui padded page grid">
<div class="sixteen wide column" style="position:relative;">
<div class="ui fluid button" id="test">test</div>
<div class="ui fluid button" id="test-target">test target</div>
<div class="ui fluid popup" id="test-popup">test</div>
</div>
</div>
<style type="text/css">
.transition.demo .button {
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
$(document)
.ready(function(){
$('.transition.demo .button')
.on('click', function() {
var animation = $(this).text();
if(typeof animation == 'string') {
animation = animation.toLowerCase();
}
$('.transition.demo .image')
.each(function(index, value){
var $this = $(this);
setTimeout(function() {
$this.transition(animation);
}, index * 100)
})
;
})
;
})
;
</script>
</div>

40
server/documents/index.html.eco
View File

@ -79,22 +79,24 @@ type : 'Semantic'
</div>
<div class="ui vertical stripe theming segment">
<div class="ui stackable very relaxed two column page grid">
<div class="column">
<div class="center aligned column">
<h1 class="ui icon header">
<img src="/images/icons/theming.png" class="ui icon image">
Unbelievable Theming
</h1>
<p>Semantic provides real design freedom. Change the look and feel of your components with just a few variables.</p>
<p>Semantic provides real design freedom. Rapidly design page layouts using intuitive markup, then change the look and feel of your components with just a few variables.</p>
</div>
<div class="column">
<div class="left aligned column">
<div data-type="element" data-element="button" class="ui large floating dropdown theme button">
<span class="text">Select Theme</span>
<i class="dropdown icon"></i>
<div class="menu ui transition hidden" tabindex="-1">
<div data-value="Default" class="item">Default</div>
<div data-value="Default" class="item">Semantic UI</div>
<div data-value="Amazon" class="item">Amazon</div>
<div data-value="Material" class="item">Google Material</div>
<div data-value="GitHub" class="item">GitHub</div>
<div data-value="Bootstrap3" class="item">Bootstrap</div>
<div class="divider"></div>
<div data-value="Raised" class="item">Raised</div>
<div data-value="Chubby" class="item">Chubby</div>
<div data-value="Classic" class="item">Classic</div>
@ -149,7 +151,7 @@ type : 'Semantic'
3000+ CSS Variables
</h2>
<p>The only dogma from this framework: <em>everything arbitrary is mutable</em>.</p>
<div class="ui disabled large button">View Themes</div>
<a class="ui large button" href="http://learnsemantic.com/developing/customizing.html">Customization Guide</a>
</div>
<div class="column">
<h2 class="ui icon header">
@ -161,7 +163,7 @@ type : 'Semantic'
</div>
<div class="column">
<h2 class="ui icon header">
<img class="ui icon image" src="/images/icons/glasses.png">
<img class="ui icon image" src="/images/icons/lab.png">
2200+ Commits
</h2>
<p>
@ -445,6 +447,14 @@ type : 'Semantic'
You added Jenny Hess to the group <a>Close Friends</a>
</div>
</div>
<div class="event">
<div class="label">
<img src="/images/avatar/small/zoe.jpg">
</div>
<div class="content">
Zoe just <a>posted on your page</a>
</div>
</div>
</div>
</div>
<div class="no example">
@ -874,6 +884,24 @@ type : 'Semantic'
</div>
</div>
</div>
<div class="ui vertical stripe community segment">
<div class="ui two column equal height center aligned divided very relaxed stackable page grid">
<div class="column">
<h2 class="ui icon header">
<img class="ui icon image" src="/images/icons/mobile.png">
Responsively Designed
</h2>
<p>Semantic lets you choose from built in responsive patterns that let you tailor-fit your designs for tablet and mobile.</p>
</div>
<div class="column">
<h2 class="ui icon header">
<img class="ui icon image" src="/images/icons/conversation.png">
Achieve Symbiosis
</h2>
<p>Semantic works alongside <b>Angular, Meteor, Ember</b> and other frameworks organizing your UI layer alongside your application logic.</p>
</div>
</div>
</div>
<div class="ui vertical inverted stripe segment">
<div class="ui stackable center aligned very relaxed page grid">
<div class="twelve wide column">

BIN
server/files/images/icons/mobile.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

15
server/files/javascript/docs.js
View File

@ -47,6 +47,7 @@ semantic.ready = function() {
$exampleHeaders = $sectionExample.children('h4'),
$footer = $('.page > .footer'),
$menuMusic = $('.ui.main.menu .music.item'),
$menuPopup = $('.ui.main.menu .popup.item'),
$pageDropdown = $('.ui.main.menu .page.dropdown'),
$pageTabMenu = $('.tab.header.segment .tabular.menu'),
@ -577,6 +578,16 @@ semantic.ready = function() {
$('.sticky').sticky('refresh');
},
openMusic: function() {
var
url = 'http://www.stratus.sc/player?links=https://soundcloud.com/into-the-light/sets/sui&popup=true',
newWindow = window.open(url,'name','height=196,width=733')
;
if(window.focus) {
newWindow.focus();
}
},
getIndent: function(text) {
var
lines = text.split("\n"),
@ -1008,6 +1019,10 @@ semantic.ready = function() {
})
;
$menuMusic
.on('click', handler.openMusic)
;
$shownExample
.each(handler.createCode)
;

15
server/files/stylesheets/home.css
View File

@ -631,6 +631,9 @@
margin-top: 0;
padding-top: 0;
}
#example.index .demo.row .example:last-child {
margin-bottom: 0em;
}
/*--------------
Following
@ -706,7 +709,7 @@
}
/*--------------
Stripes
Stripes
---------------*/
#example.index .stripe .grid .row {
@ -724,7 +727,12 @@
margin-bottom: 20px;
}
#example.index .stripe .icon.header .icon.image {
width: 64px;
height: 65px;
margin-bottom: 20px;
}
#example.index .community.stripe {
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1);
padding: 4em 0;
}
#example.index .stripe .icon.header i.icon {
font-size: 2em;
@ -775,6 +783,9 @@
#example .feature.stripe {
padding: 5em 0em;
}
#example .theming.stripe .left.aligned.column {
padding-top: 8em;
}
#example .theming.stripe .buttons {
vertical-align: top;
}

3
server/partials/fixed-menu.html.eco
View File

@ -33,6 +33,9 @@
<div class="vertically fitted borderless item">
<iframe class="github" src="http://ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
</div>
<a class="popup icon music item" data-content="Play Music">
<i class="alternate music icon"></i>
</a>
<a class="popup icon github item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
<i class="alternate github icon"></i>
</a>

Write Preview
Loading…
Cancel
Save