You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html><head> <!-- Standard Meta --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properities --> <title>Theming - Semantic</title> <link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script> <script src="../dist/semantic.js"></script>
<style type="text/css"> body > .ui.container { margin-top: 3em; } .ui.container > h1 { font-size: 3em; text-align: center; font-weight: normal; } .ui.container > h2.dividing.header { font-size: 2em; font-weight: normal; margin: 4em 0em 3em; } .color.grid { margin: -1.5em; width: 400px; } .ui.table { table-layout: fixed; } .color.grid .column { margin: 1em; width: 100px; height: 100px; } .spaced > .button { margin-bottom: 1em; } .ui.menu { margin: 3em 0em; } </style> <script> $(document) .ready(function() { $('.ui:not(.container, .grid)').each(function() { $(this) .popup({ on : 'hover', variation : 'small inverted', exclusive : true, content : $(this).attr('class') }) ; }); $('.ui.dropdown').dropdown(); $('.ui.buttons .dropdown.button').dropdown({ action: 'combo' }); $('.ui.menu .ui.dropdown').dropdown({ on: 'hover' }); }) ; </script></head><body>
<div class="ui container">
<h1>Theming Examples</h1>
<!--- Site !--> <h2 class="ui dividing header">Site</h2> <div class="ui three column stackable grid"> <div class="column"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> </div> <div class="column"> <h2>Example body text</h2> <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> </div> <div class="column"> <div class="ui four column stackable middle aligned centered color grid"> <div class="red column">Red</div> <div class="orange column">Orange</div> <div class="yellow column">Yellow</div> <div class="olive column">Olive</div> <div class="green column">Green</div> <div class="teal column">Teal</div> <div class="blue column">Blue</div> <div class="violet column">Violet</div> <div class="purple column">Purple</div> <div class="pink column">Pink</div> <div class="brown column">Brown</div> <div class="grey column">Grey</div> <div class="black column">Black</div> </div> </div> </div>
<!--- Menu !--> <h2 class="ui dividing header">Menu</h2>
<div class="ui menu"> <div class="header item">Brand</div> <a class="active item">Link</a> <a class="item">Link</a> <div class="ui dropdown item"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Action</div> <div class="item">Another Action</div> <div class="item">Something else here</div> <div class="divider"></div> <div class="item">Separated Link</div> <div class="divider"></div> <div class="item">One more separated link</div> </div> </div> <div class="right menu"> <div class="item"> <div class="ui action left icon input"> <i class="search icon"></i> <input type="text" placeholder="Search"> <button class="ui button">Submit</button> </div> </div> <a class="item">Link</a> </div> </div>
<div class="ui inverted menu"> <div class="header item">Brand</div> <div class="active item">Link</div> <a class="item">Link</a> <div class="ui dropdown item"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Action</div> <div class="item">Another Action</div> <div class="item">Something else here</div> <div class="divider"></div> <div class="item">Separated Link</div> <div class="divider"></div> <div class="item">One more separated link</div> </div> </div> <div class="right menu"> <div class="item"> <div class="ui transparent inverted icon input"> <i class="search icon"></i> <input type="text" placeholder="Search"> </div> </div> <a class="item">Link</a> </div> </div>
<div class="ui secondary menu"> <div class="active item">Link</div> <a class="item">Link</a> <div class="ui dropdown item"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Action</div> <div class="item">Another Action</div> <div class="item">Something else here</div> <div class="divider"></div> <div class="item">Separated Link</div> <div class="divider"></div> <div class="item">One more separated link</div> </div> </div> <div class="right menu"> <div class="item"> <div class="ui action left icon input"> <i class="search icon"></i> <input type="text" placeholder="Search"> <button class="ui button">Submit</button> </div> </div> <a class="item">Link</a> </div> </div>
<div class="ui three column doubling grid"> <div class="column"> <div class="ui secondary pointing menu"> <div class="active item">Link</div> <a class="item">Link</a> <a class="item">Link</a> </div> </div>
<div class="column"> <div class="ui tabular menu"> <div class="active item">Link</div> <a class="item">Link</a> <a class="item">Link</a> </div> </div>
<div class="column"> <div class="ui pointing menu"> <div class="active item">Link</div> <a class="item">Link</a> <div class="ui right dropdown item"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Action</div> <div class="item">Another Action</div> <div class="item">Something else here</div> <div class="divider"></div> <div class="item">Separated Link</div> <div class="divider"></div> <div class="item">One more separated link</div> </div> </div> </div> </div> </div>
<!--- Button !--> <h2 class="ui dividing header">Buttons</h2>
<div class="ui stackable equal width grid"> <div class="column"> <button class="ui button">Default</button> <button class="ui primary button">Primary</button> <button class="ui secondary button">Secondary</button> <button class="ui basic button">Basic</button> <button class="ui compact button"> Compact </button>
<div class="ui divider"></div> <button class="ui icon button"> <i class="heart icon"></i> </button> <button class="ui labeled icon button"> <i class="heart icon"></i> Labeled </button> <button class="ui right labeled icon button"> <i class="heart icon"></i> Labeled </button>
<div class="ui divider"></div>
<div class="ui buttons"> <button class="ui button">Combo</button> <div class="ui floating dropdown icon button"> <i class="dropdown icon"></i> <div class="menu"> <div class="item">Choice 1</div> <div class="item">Choice 2</div> <div class="item">Choice 3</div> </div> </div> </div>
<div class="ui floating search dropdown button"> <span class="text">Search Dropdown</span> <div class="menu"> <div class="item">Arabic</div> <div class="item">Chinese</div> <div class="item">Danish</div> <div class="item">Dutch</div> <div class="item">English</div> <div class="item">French</div> <div class="item">German</div> <div class="item">Greek</div> <div class="item">Hungarian</div> <div class="item">Italian</div> <div class="item">Japanese</div> <div class="item">Korean</div> <div class="item">Lithuanian</div> <div class="item">Persian</div> <div class="item">Polish</div> <div class="item">Portuguese</div> <div class="item">Russian</div> <div class="item">Spanish</div> <div class="item">Swedish</div> <div class="item">Turkish</div> <div class="item">Vietnamese</div> </div> </div>
<div class="ui divider"></div>
<div class="ui animated button" tabindex="0"> <div class="visible content">Horizontal</div> <div class="hidden content"> Hidden </div> </div> <div class="ui vertical animated button" tabindex="0"> <div class="visible content">Vertical</div> <div class="hidden content"> Hidden </div> </div> <div class="ui animated fade button" tabindex="0"> <div class="visible content">Fade In</div> <div class="hidden content"> Hidden </div> </div>
<div class="ui divider"></div> <button class="ui disabled button">Disabled</button> <button class="ui loading button">Loading</button>
<div class="ui divider"></div>
<div class="ui buttons"> <button class="ui button">1</button> <button class="ui button">2</button> <button class="ui button">3</button> </div>
<div class="ui icon buttons"> <button class="ui button"><i class="align left icon"></i></button> <button class="ui button"><i class="align center icon"></i></button> <button class="ui button"><i class="align right icon"></i></button> <button class="ui button"><i class="align justify icon"></i></button> </div>
<div class="ui buttons"> <button class="ui button">1</button> <div class="or"></div> <button class="ui button">2</button> </div>
</div> <div class="column"> <button class="ui mini button">Mini</button> <button class="ui tiny button">Tiny</button> <button class="ui small button">Small</button> <button class="ui large button">Large</button> <button class="ui big button">Big</button> <button class="ui huge button">Huge</button> <button class="ui massive button">Massive</button> <div class="ui divider"></div> <div class="spaced"> <button class="yellow ui button">Yellow</button> <button class="orange ui button">Orange</button> <button class="green ui button">Green</button> <button class="teal ui button">Teal</button> <button class="blue ui button">Blue</button> <button class="purple ui button">Purple</button> <button class="pink ui button">Pink</button> <button class="red ui button">Red</button> <button class="black ui button">Black</button> </div>
<div class="ui inverted segment"> <button class="ui inverted button">Inverted</button> <button class="ui inverted basic button">Basic</button> <button class="ui inverted blue button">Colored</button> <button class="ui inverted blue basic button">Basic Colored</button> </div>
</div> </div>
<!--- Tables !--> <h2 class="ui dividing header">Tables</h2>
<div class="ui two column relaxed grid"> <div class="column"> <table class="ui right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Delmar</td> <td>36</td> <td>36g</td> <td>2g</td> </tr> <tr> <td class="left aligned">Louise</td> <td>24</td> <td>24g</td> <td>29g</td> </tr> <tr> <td class="left aligned">Terrell</td> <td>22</td> <td>11g</td> <td>9g</td> </tr> <tr> <td class="left aligned">Marion</td> <td>7</td> <td>35g</td> <td>3g</td> </tr> <tr> <td class="left aligned">Clayton</td> <td>7</td> <td>38g</td> <td>20g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui right aligned celled table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Drema</td> <td class="positive">15</td> <td class="negative">26g</td> <td class="warning">8g</td> </tr> <tr class="positive"> <td class="left aligned">Nona</td> <td>11</td> <td>21g</td> <td>16g</td> </tr> <tr class="negative"> <td class="left aligned">Isidra</td> <td>34</td> <td>43g</td> <td>11g</td> </tr> <tr class="warning"> <td class="left aligned">Bart</td> <td>41</td> <td>40g</td> <td>30g</td> </tr> <tr class="selected"> <td class="left aligned">Nguyet</td> <td>41</td> <td>44g</td> <td>28g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui basic right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Mirna</td> <td>1</td> <td>28g</td> <td>29g</td> </tr> <tr> <td class="left aligned">Fernando</td> <td>38</td> <td>2g</td> <td>48g</td> </tr> <tr> <td class="left aligned">Lisette</td> <td>18</td> <td>9g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Ahmad</td> <td>42</td> <td>26g</td> <td>49g</td> </tr> <tr> <td class="left aligned">Laquanda</td> <td>27</td> <td>27g</td> <td>49g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui very basic right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Drema</td> <td>15</td> <td>26g</td> <td>8g</td> </tr> <tr> <td class="left aligned">Nona</td> <td>11</td> <td>21g</td> <td>16g</td> </tr> <tr> <td class="left aligned">Isidra</td> <td>34</td> <td>43g</td> <td>11g</td> </tr> <tr> <td class="left aligned">Bart</td> <td>41</td> <td>40g</td> <td>30g</td> </tr> <tr> <td class="left aligned">Nguyet</td> <td>41</td> <td>44g</td> <td>28g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui celled selectable right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Tasia</td> <td>12</td> <td>7g</td> <td>21g</td> </tr> <tr> <td class="left aligned">Ronnie</td> <td>38</td> <td>37g</td> <td>38g</td> </tr> <tr> <td class="left aligned">Gabriel</td> <td>30</td> <td>46g</td> <td>46g</td> </tr> <tr> <td class="left aligned">Logan</td> <td>12</td> <td>21g</td> <td>39g</td> </tr> <tr> <td class="left aligned">Clare</td> <td>39</td> <td>41g</td> <td>2g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui striped right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Rosaline</td> <td>5</td> <td>35g</td> <td>6g</td> </tr> <tr> <td class="left aligned">Barrie</td> <td>27</td> <td>23g</td> <td>28g</td> </tr> <tr> <td class="left aligned">Trinidad</td> <td>14</td> <td>50g</td> <td>7g</td> </tr> <tr> <td class="left aligned">Jaqueline</td> <td>31</td> <td>30g</td> <td>50g</td> </tr> <tr> <td class="left aligned">Tamala</td> <td>18</td> <td>6g</td> <td>13g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui padded celled right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui definition celled right aligned table"> <thead> <th></th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui inverted right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div> <div class="column"> <table class="ui inverted blue selectable celled right aligned table"> <thead> <th class="left aligned">Person</th> <th>Calories</th> <th>Fat</th> <th>Protein</th> </thead> <tbody> <tr> <td class="left aligned">Lianne</td> <td>23</td> <td>32g</td> <td>43g</td> </tr> <tr> <td class="left aligned">Joette</td> <td>21</td> <td>13g</td> <td>31g</td> </tr> <tr> <td class="left aligned">Le</td> <td>28</td> <td>39g</td> <td>23g</td> </tr> <tr> <td class="left aligned">Sacha</td> <td>46</td> <td>43g</td> <td>13g</td> </tr> <tr> <td class="left aligned">Bruna</td> <td>9</td> <td>47g</td> <td>12g</td> </tr> </tbody> </table> </div>
</div>
</body>
</html>
|
