Jack Lukic
12 years ago
27 changed files with 1951 additions and 392 deletions
Split View
Diff Options
-
2build/minified/collections/table.min.css
-
2build/minified/elements/header.min.css
-
2build/minified/elements/icons.min.css
-
4build/packaged/semantic.min.css
-
2build/packaged/semantic.min.js
-
28build/uncompressed/collections/table.css
-
4build/uncompressed/elements/header.css
-
92build/uncompressed/elements/icons.css
-
30node/src/documents/collections/table.html
-
114node/src/documents/elements/icon.html
-
293node/src/documents/specification/cssguide.html
-
27node/src/documents/specification/htmlguide.html
-
136node/src/documents/specification/styleguide.html
-
28node/src/files/components/semantic/collections/table.css
-
4node/src/files/components/semantic/elements/header.css
-
92node/src/files/components/semantic/elements/icons.css
-
BINnode/src/files/icons/icons-sketchy.eot
-
1078node/src/files/icons/icons-sketchy.svg
-
BINnode/src/files/icons/icons-sketchy.ttf
-
BINnode/src/files/icons/icons-sketchy.woff
-
134node/src/files/icons/sketchy.icons.css
-
120node/src/files/stylesheets/menu.css
-
16node/src/layouts/default.html.eco
-
30src/collections/table.less
-
54src/elements/.button
-
4src/elements/header.less
-
47src/elements/icons.less
@ -1 +1 @@ |
|||
.ui.table{width:100%;border-collapse:collapse}.ui.table thead{border-bottom:1px solid rgba(0,0,0,.1)}.ui.table th,.ui.table tr,.ui.table td{border-collapse:collapse;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;-ms-transition:all .1s ease-out;transition:all .1s ease-out}.ui.table th{cursor:auto;background-color:rgba(0,0,0,.05);text-align:left;font-weight:700;padding:.5em .7em;vertical-align:middle}.ui.table tfoot th{font-weight:400;font-style:italic}.ui.table td{padding:.4em .7em;vertical-align:middle}.ui.table tfoot{border-top:1px solid rgba(0,0,0,.1)}.ui.table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.03)}.ui.table>.icon{vertical-align:baseline}.ui.table>.icon:only-child{margin:0}.ui.table.segment:after{display:none}.ui.table.segment.stacked:after{display:block}.ui.celled.table tr:hover td{background-color:rgba(0,0,0,.02);color:#000}.ui.sortable.table thead th:hover{background-image:none;background-color:rgba(0,0,0,.04);color:#333}.ui.sortable.table th.disabled:hover{cursor:auto;background-color:rgba(0,0,0,.1);text-align:left;font-weight:700;color:#333;color:rgba(0,0,0,.8)}.ui.table tr.positive td,.ui.table td.positive{background-color:#F2F8F0!important;color:#119000}.ui.celled.table tr.positive:hover td,.ui.celled.table tr:hover td.positive,.ui.table tr.positive:hover td,.ui.table td:hover.positive,.ui.table th:hover.positive{background-color:#ECF5E9!important;color:#119000}.ui.table tr.negative td,.ui.table td.negative{background-color:#F9F4F4;color:#CD2929}.ui.celled.table tr.negative:hover td,.ui.celled.table tr:hover td.negative,.ui.table tr.negative:hover td,.ui.table td:hover.negative,.ui.table th:hover.negative{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.error td,.ui.table td.error,.ui.table th.error{background-color:#F9F4F4!important;color:#CD2929}.ui.celled.table tr.error:hover td,.ui.celled.table tr:hover td.error,.ui.table tr.error:hover td,.ui.table td:hover.error,.ui.table th:hover.error{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.warning td,.ui.table td.warning,.ui.table th.warning{background-color:#FBF6E9;color:#7D6C00}.ui.celled.table tr.warning:hover td,.ui.celled.table tr:hover td.warning,.ui.table tr.warning:hover td,.ui.table td:hover.warning,.ui.table th:hover.warning{background-color:#F3EDDC!important;color:#7D6C00}.ui.table tr.active td,.ui.table tr td.active{background-color:#F0F0F0!important;color:rgba(50,50,50,.9)}.ui.table tr.disabled td,.ui.table tr td.disabled,.ui.table tr.disabled:hover td,.ui.table tr:hover td.disabled{color:rgba(150,150,150,.3)}.ui.two.column.table td{width:50%}.ui.three.column.table td{width:33.3333%}.ui.four.column.table td{width:25%}.ui.five.column.table td{width:20%}.ui.six.column.table td{width:16.66667%}.ui.seven.column.table td{width:14.2857%}.ui.eight.column.table td{width:12.5%}.ui.nine.column.table td{width:11.1111%}.ui.ten.column.table td{width:10%}.ui.eleven.column.table td{width:9.0909%}.ui.twelve.column.table td{width:8.3333%}.ui.thirteen.column.table td{width:7.6923%}.ui.fourteen.column.table td{width:7.1428%}.ui.fifteen.column.table td{width:6.6666%}.ui.sixteen.column.table td{width:6.25%}.ui.celled.table{color:rgba(0,0,0,.8)}.ui.celled.table tbody tr,.ui.celled.table tfoot tr{border:0}.ui.celled.table th{border:1px solid #E0E0E0}.ui.celled.table tbody td{border:1px solid #E0E0E0}.ui.sortable.table thead th{cursor:pointer;color:#555;vertical-align:top}.ui.sortable.table thead th.sorted,.ui.sortable.table thead th.sorted:hover{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.1)}.ui.sortable.table thead th:after{display:inline-block;content:'';width:1em;opacity:.8;float:right;margin:.25em 0 0 .25em;line-height:1;font-family:Icons;font-style:normal;font-weight:400;text-decoration:inherit;vertical-align:middle;vertical-align:calc()}.ui.sortable.table thead th.ascending:after{content:'\25b4'}.ui.sortable.table thead th.descending:after{content:'\25be'}.ui.inverted.table th{background-color:rgba(0,0,0,.15)}.ui.inverted.table tbody tr:nth-child(2n){background-color:rgba(255,255,255,.06)}.ui.collapsing.table{width:auto}.ui.padded.table th,.ui.padded.table td{padding:.8em 1em}.ui.compact.table th{padding:.3em .5em}.ui.compact.table td{padding:.2em .5em}.ui.small.table{font-size:14px}.ui.table{font-size:16px}.ui.large.table{font-size:18px} |
|||
.ui.table{width:100%;border-collapse:collapse}.ui.table thead{border-bottom:1px solid rgba(0,0,0,.1)}.ui.table th,.ui.table tr,.ui.table td{border-collapse:collapse;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;-ms-transition:all .1s ease-out;transition:all .1s ease-out}.ui.table th{cursor:auto;background-color:rgba(0,0,0,.05);text-align:left;font-weight:700;padding:.5em .7em;vertical-align:middle}.ui.table tfoot th{font-weight:400;font-style:italic}.ui.table td{padding:.4em .7em;vertical-align:middle}.ui.table tfoot{border-top:1px solid rgba(0,0,0,.1)}.ui.table tbody tr:nth-child(2n){background-color:rgba(0,0,50,.02)}.ui.table>.icon{vertical-align:baseline}.ui.table>.icon:only-child{margin:0}.ui.table.segment:after{display:none}.ui.table.segment.stacked:after{display:block}.ui.celled.table tr:hover td{background-color:rgba(0,0,0,.02);color:#000}.ui.sortable.table thead th:hover{background-image:none;background-color:rgba(0,0,0,.04);color:#333}.ui.sortable.table th.disabled:hover{cursor:auto;background-color:rgba(0,0,0,.1);text-align:left;font-weight:700;color:#333;color:rgba(0,0,0,.8)}.ui.table tr.positive td,.ui.table td.positive{background-color:#F2F8F0!important;color:#119000}.ui.celled.table tr.positive:hover td,.ui.celled.table tr:hover td.positive,.ui.table tr.positive:hover td,.ui.table td:hover.positive,.ui.table th:hover.positive{background-color:#ECF5E9!important;color:#119000}.ui.table tr.negative td,.ui.table td.negative{background-color:#F9F4F4;color:#CD2929}.ui.celled.table tr.negative:hover td,.ui.celled.table tr:hover td.negative,.ui.table tr.negative:hover td,.ui.table td:hover.negative,.ui.table th:hover.negative{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.error td,.ui.table td.error,.ui.table th.error{background-color:#F9F4F4!important;color:#CD2929}.ui.celled.table tr.error:hover td,.ui.celled.table tr:hover td.error,.ui.table tr.error:hover td,.ui.table td:hover.error,.ui.table th:hover.error{background-color:#F2E8E8!important;color:#CD2929}.ui.table tr.warning td,.ui.table td.warning,.ui.table th.warning{background-color:#FBF6E9;color:#7D6C00}.ui.celled.table tr.warning:hover td,.ui.celled.table tr:hover td.warning,.ui.table tr.warning:hover td,.ui.table td:hover.warning,.ui.table th:hover.warning{background-color:#F3EDDC!important;color:#7D6C00}.ui.table tr.active td,.ui.table tr td.active{background-color:#F0F0F0!important;color:rgba(50,50,50,.9)}.ui.table tr.disabled td,.ui.table tr td.disabled,.ui.table tr.disabled:hover td,.ui.table tr:hover td.disabled{color:rgba(150,150,150,.3)}.ui.two.column.table td{width:50%}.ui.three.column.table td{width:33.3333%}.ui.four.column.table td{width:25%}.ui.five.column.table td{width:20%}.ui.six.column.table td{width:16.66667%}.ui.seven.column.table td{width:14.2857%}.ui.eight.column.table td{width:12.5%}.ui.nine.column.table td{width:11.1111%}.ui.ten.column.table td{width:10%}.ui.eleven.column.table td{width:9.0909%}.ui.twelve.column.table td{width:8.3333%}.ui.thirteen.column.table td{width:7.6923%}.ui.fourteen.column.table td{width:7.1428%}.ui.fifteen.column.table td{width:6.6666%}.ui.sixteen.column.table td{width:6.25%}.ui.celled.table{color:rgba(0,0,0,.8)}.ui.celled.table tbody tr,.ui.celled.table tfoot tr{border:0}.ui.celled.table th{border:1px solid #E0E0E0}.ui.celled.table tbody td{border:1px solid #E0E0E0}.ui.sortable.table thead th{cursor:pointer;white-space:nowrap}.ui.sortable.table thead th.sorted,.ui.sortable.table thead th.sorted:hover{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.05)}.ui.sortable.table thead th:after{display:inline-block;content:'';width:1em;opacity:.8;margin:0 0 0 .5em;font-family:Icons;font-style:normal;font-weight:400;text-decoration:inherit;vertical-align:text-top}.ui.sortable.table thead th.ascending:after{content:'\25b4'}.ui.sortable.table thead th.descending:after{content:'\25be'}.ui.inverted.table th{background-color:rgba(0,0,0,.15)}.ui.inverted.table tbody tr:nth-child(2n){background-color:rgba(255,255,255,.06)}.ui.collapsing.table{width:auto}.ui.basic.table th{background-color:transparent;padding:.5em;font-weight:400}.ui.basic.table tbody tr{border-bottom:1px solid rgba(0,0,0,.05)}.ui.basic.table td{padding:.8em .5em}.ui.padded.table th,.ui.padded.table td{padding:.8em 1em}.ui.compact.table th{padding:.3em .5em}.ui.compact.table td{padding:.2em .5em}.ui.small.table{font-size:14px}.ui.table{font-size:16px}.ui.large.table{font-size:18px} |
|||
@ -1 +1 @@ |
|||
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;color:rgba(0,0,0,.8);font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header .icon{margin-right:.5em}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.dividing.header{border-bottom:3px solid #6ECFF5}.ui.black.dividing.header{border-bottom:3px solid #5C6166}.ui.green.dividing.header{border-bottom:3px solid #A1CF64}.ui.red.dividing.header{border-bottom:3px solid #EF4D6D}.ui.purple.dividing.header{border-bottom:3px solid #564F8A}.ui.teal.dividing.header{border-bottom:3px solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.dividing.header .icon{margin-bottom:.2em}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:block;margin-left:auto;margin-right:auto;text-align:center}.ui.icon.header .icon{display:block;font-size:4em;margin:0 auto .2em}.ui.icon.header .circular.icon,.ui.icon.header .square.icon{font-size:2em}.ui.block.icon.header .icon{margin-bottom:0}.ui.icon.header.aligned{display:block} |
|||
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;color:rgba(0,0,0,.8);font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header .content{display:inline-block;vertical-align:middle}.ui.header .icon{margin-right:.5em}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.dividing.header{border-bottom:3px solid #6ECFF5}.ui.black.dividing.header{border-bottom:3px solid #5C6166}.ui.green.dividing.header{border-bottom:3px solid #A1CF64}.ui.red.dividing.header{border-bottom:3px solid #EF4D6D}.ui.purple.dividing.header{border-bottom:3px solid #564F8A}.ui.teal.dividing.header{border-bottom:3px solid #00B5AD}.ui.inverted.header{color:#FFF}.ui.inverted.header .sub.header{color:rgba(255,255,255,.85)}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-bottom:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.dividing.header .icon{margin-bottom:.2em}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.attached.header{padding:.5em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.icon.header{display:block;margin-left:auto;margin-right:auto;text-align:center}.ui.icon.header .icon{display:block;font-size:4em;margin:0 auto .2em}.ui.icon.header .circular.icon,.ui.icon.header .square.icon{font-size:2em}.ui.block.icon.header .icon{margin-bottom:0}.ui.icon.header.aligned{display:block} |
|||
2
build/minified/elements/icons.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
4
build/packaged/semantic.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
build/packaged/semantic.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,293 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'CSS' |
|||
type : 'UI Specification' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">CSS Guide</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<h2>General</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Namespace</h4> |
|||
<p>All css code must live inside a namespace. By default all ui elements use the class "ui". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element</p> |
|||
<div class="code" data-type="css"> |
|||
// incorrect |
|||
.menu { |
|||
} |
|||
|
|||
// incorrect |
|||
.ui.menu { |
|||
} |
|||
.ui.menu .ui.item { |
|||
|
|||
} |
|||
|
|||
// correct |
|||
.ui.menu { |
|||
} |
|||
.ui.menu .item { |
|||
|
|||
} |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Don't Hyphenate</h4> |
|||
<p>All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.</p> |
|||
<p>Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.</p> |
|||
<div class="code" data-type="css"> |
|||
// no no no |
|||
.ui.button-active-red { |
|||
background-color: #FF0000; |
|||
font-weight: bold; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
// better |
|||
.red.ui.button { |
|||
background-color: #FF0000; |
|||
color: #FFFFFF; |
|||
} |
|||
.active.ui.button { |
|||
font-weight: bold; |
|||
} |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">No wrappers, no excess markup</h4> |
|||
<p>UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accomodate extra styling.</p> |
|||
<p>If there is no other option than wrapping content in a containing HTML element, consider using a name that describes the content instead of the word wrapper or container.</p> |
|||
<div class="code" data-type="css"> |
|||
// not tops |
|||
.ui.message .wrapper .title, |
|||
.ui.message .wrapper .description { |
|||
|
|||
} |
|||
// better |
|||
.ui.message .content .title, |
|||
.ui.message .content .description { |
|||
|
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Grammatical order</h4> |
|||
<p>Consider using similar class syntax as if you were actually describing the element in english. Although this is by no means required it may help provide clarity in some circumstances.</p> |
|||
<div class="code" data-type="css"> |
|||
// not perfect |
|||
.ui.red.button.pointing { |
|||
|
|||
} |
|||
// much more semantic |
|||
.red.pointing.ui.button { |
|||
|
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Use Border Box</h4> |
|||
<p>Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly</p> |
|||
<div class="code" data-type="css"> |
|||
.two.ui.thingies .ui.thingy { |
|||
width: 50%; |
|||
padding: 1em; |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Units and Measurements</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header"><em>Relatively</em> Relative</h4> |
|||
<p>EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements</p> |
|||
<div class="code" data-type="css"> |
|||
.ui.thingy { |
|||
font-size: 14px; |
|||
} |
|||
// this is 28 pixels |
|||
.ui.thingy .thing { |
|||
font-size: 2em; |
|||
} |
|||
// woah this is now 48 pixels |
|||
.ui.thingy .thing .thing { |
|||
font-size: 2em; |
|||
} |
|||
|
|||
// .ui.thingy .thingy should grow as well |
|||
.ui.large.thingy { |
|||
font-size: 16px; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header"><em>Recursively</em> Relative</h4> |
|||
<p>Using EMs multiplicative nature can often be used to your advantage. Instead of defining multiple tiers of a menu system. Consider using ems for its sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.</p> |
|||
<div class="code" data-type="css"> |
|||
.ui.menu { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.menu .menu { |
|||
margin-left: 0.5em; |
|||
font-size: 0.9em; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header"><em>Absolutely</em> Relative</h4> |
|||
<p>REMs are defined so that 1rem is equal to 1 em on the html tag of the page. This is needed to explain how content should be sized related to the overall size of elements on the page</p> |
|||
<div class="code" data-type="css"> |
|||
// i am a weird page with very tiny fonts |
|||
html { |
|||
font-size: 10px; |
|||
} |
|||
// thats ok i am sizing everything relative to your tiny fonts |
|||
.ui.menu { |
|||
font-size: 1rem; |
|||
} |
|||
// i am sizing relative to the menu element |
|||
.ui.menu .menu { |
|||
font-size: 0.8em; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2>Coding Guidelines</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Prevent Accidental Highlighting</h4> |
|||
<p>Sometimes text can be accidentally highlighted when a user double clicks an element. No need to pull out javascript to solve this.</p> |
|||
<div class="code" data-type="css"> |
|||
.ui.thingy { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Joining borders</h4> |
|||
<p>Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.</p> |
|||
<div class="code" data-type="css"> |
|||
// this might not go so well |
|||
.ui.thingy { |
|||
border: 1px solid #DDDDDD; |
|||
} |
|||
// rgba is great, but keep in mind the overlapping borders will be added together to create a darker shade |
|||
.ui.thingy { |
|||
outline: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
// classic but works |
|||
.ui.thingy { |
|||
outline: 1px solid #DDDDDD; |
|||
} |
|||
// this works too |
|||
.ui.thingy { |
|||
-moz-box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
-webkit-box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
box-shadow: 0px 0px 0px 1px #DDDDDD; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Using transparency</h4> |
|||
<p>RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.</p> |
|||
<p>Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba</p> |
|||
<div class="code" data-type="css"> |
|||
.ui.thingy { |
|||
background-color: #FAFAFA; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.red.ui.thingy { |
|||
background-color: #FF0000; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Consider alternatives to floats</h4> |
|||
<p>CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no peice of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.</p> |
|||
<p>Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.</p> |
|||
<p>To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content</p> |
|||
<div class="code" data-type="css"> |
|||
// not the best |
|||
.ui.thingy { |
|||
display: block; |
|||
overflow: hidden; |
|||
} |
|||
.ui.thingy .part { |
|||
display: block; |
|||
float: left; |
|||
} |
|||
|
|||
// these do the same thing |
|||
.ui.thingy { |
|||
display: block; |
|||
font-size: 0rem; |
|||
} |
|||
.ui.thingy .part { |
|||
display: inline-block; |
|||
font-size: 1rem; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Onion Skinning</h4> |
|||
<p>One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.</p> |
|||
<div class="code" data-type="css"> |
|||
.ui.thingy { |
|||
background-color: #FAFAFA; |
|||
} |
|||
.ui.red.thingy { |
|||
background-color: #FF0000; |
|||
} |
|||
.ui.green.thingy { |
|||
background-color: #00FF00; |
|||
} |
|||
.ui.blue.thingy { |
|||
background-color: #0000FF; |
|||
} |
|||
.ui.thingy:hover { |
|||
background-image: |
|||
-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.05))) |
|||
; |
|||
background-image: -webkit-linear-gradient( |
|||
rgba(0, 0, 0, 0.1) 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -moz-linear-gradient( |
|||
rgba(0, 0, 0, 0.1) 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -o-linear-gradient( |
|||
rgba(0, 0, 0, 0.1) 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: linear-gradient( |
|||
rgba(0, 0, 0, 0.1) 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
} |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,27 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'HTML' |
|||
type : 'UI Specification' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">HTML Guide</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<h2>Writing HTML</h2> |
|||
|
|||
<p>All components should be namespaced to avoid collisions with other components. For example, if you decide that your element is a "button", then all rules should begin with .ui.button or .ui.button. For more details see our html and css guidelines.</p> |
|||
|
|||
<p>Components may contain html elements inside which do not have to be subclassed as ui. For example here is the code for a progress bar</p> |
|||
|
|||
<div class="code"> |
|||
<div class="ui progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
1078
node/src/files/icons/icons-sketchy.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,134 @@ |
|||
|
|||
/* |
|||
* Font Custom: semantic css |
|||
*/ |
|||
|
|||
@font-face { |
|||
font-family: 'Sketchy Icons'; |
|||
src: url("icons-sketchy.eot"); |
|||
src: |
|||
url("icons-sketchy.eot?#iefix") format('embedded-opentype'), |
|||
url("icons-sketchy.woff") format('woff'), |
|||
url("icons-sketchy.ttf") format('truetype'), |
|||
url("icons-sketchy.svg#icons") format('svg') |
|||
; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-decoration: inherit; |
|||
text-transform: none; |
|||
} |
|||
|
|||
i.sketchy.icon { |
|||
|
|||
display: inline-block; |
|||
opacity: 0.75; |
|||
|
|||
margin: 0em 0.48em 0em 0em; |
|||
|
|||
width: 1em; |
|||
height: 1em; |
|||
|
|||
font-family: 'Sketchy Icons'; |
|||
font-style: normal; |
|||
line-height: 1; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
text-align: center; |
|||
|
|||
speak: none; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-font-smoothing: antialiased; |
|||
font-smoothing: antialiased; |
|||
} |
|||
|
|||
i.sketchy.icon.add:before { content: "\f13e"; } |
|||
i.sketchy.icon.alert:before { content: "\f146"; } |
|||
i.sketchy.icon.arrow.eight:before { content: "\f140"; } |
|||
i.sketchy.icon.arrow.eleven:before { content: "\f110"; } |
|||
i.sketchy.icon.arrow.fifteen:before { content: "\f132"; } |
|||
i.sketchy.icon.arrow.five:before { content: "\f112"; } |
|||
i.sketchy.icon.arrow.four:before { content: "\f100"; } |
|||
i.sketchy.icon.arrow.fourteen:before { content: "\f12e"; } |
|||
i.sketchy.icon.arrow.nine:before { content: "\f121"; } |
|||
i.sketchy.icon.arrow.one:before { content: "\f10d"; } |
|||
i.sketchy.icon.arrow.seven:before { content: "\f131"; } |
|||
i.sketchy.icon.arrow.six:before { content: "\f12a"; } |
|||
i.sketchy.icon.arrow.sixteen:before { content: "\f13b"; } |
|||
i.sketchy.icon.arrow.ten:before { content: "\f139"; } |
|||
i.sketchy.icon.arrow.thirteen:before { content: "\f13a"; } |
|||
i.sketchy.icon.arrow.three:before { content: "\f119"; } |
|||
i.sketchy.icon.arrow.twelve:before { content: "\f144"; } |
|||
i.sketchy.icon.arrow.two:before { content: "\f12b"; } |
|||
i.sketchy.icon.browser:before { content: "\f134"; } |
|||
i.sketchy.icon.bullet.one:before { content: "\f11b"; } |
|||
i.sketchy.icon.bullet.three:before { content: "\f10c"; } |
|||
i.sketchy.icon.bullet.two:before { content: "\f123"; } |
|||
i.sketchy.icon.camera:before { content: "\f111"; } |
|||
i.sketchy.icon.categories:before { content: "\f126"; } |
|||
i.sketchy.icon.category.electronics:before { content: "\f149"; } |
|||
i.sketchy.icon.category.electronics.alternate:before { content: "\f113"; } |
|||
i.sketchy.icon.category.health:before { content: "\f12d"; } |
|||
i.sketchy.icon.category.home:before { content: "\f118"; } |
|||
i.sketchy.icon.category.home.alternate:before { content: "\f115"; } |
|||
i.sketchy.icon.category.kitchen:before { content: "\f142"; } |
|||
i.sketchy.icon.category.parenting:before { content: "\f125"; } |
|||
i.sketchy.icon.category.pets:before { content: "\f120"; } |
|||
i.sketchy.icon.category.style:before { content: "\f129"; } |
|||
i.sketchy.icon.category.toys:before { content: "\f145"; } |
|||
i.sketchy.icon.category.travel:before { content: "\f11a"; } |
|||
i.sketchy.icon.category.travel.alternate:before { content: "\f108"; } |
|||
i.sketchy.icon.checkmark:before { content: "\f116"; } |
|||
i.sketchy.icon.checkmark.circle:before { content: "\f128"; } |
|||
i.sketchy.icon.clock:before { content: "\f130"; } |
|||
i.sketchy.icon.comment:before { content: "\f102"; } |
|||
i.sketchy.icon.compare:before { content: "\f10a"; } |
|||
i.sketchy.icon.dont:before { content: "\f114"; } |
|||
i.sketchy.icon.eval:before { content: "\f10e"; } |
|||
i.sketchy.icon.expert:before { content: "\f12f"; } |
|||
i.sketchy.icon.home:before { content: "\f105"; } |
|||
i.sketchy.icon.idea:before { content: "\f109"; } |
|||
i.sketchy.icon.improve:before { content: "\f103"; } |
|||
i.sketchy.icon.influence:before { content: "\f11d"; } |
|||
i.sketchy.icon.information:before { content: "\f13c"; } |
|||
i.sketchy.icon.invent:before { content: "\f13f"; } |
|||
i.sketchy.icon.launch:before { content: "\f127"; } |
|||
i.sketchy.icon.location:before { content: "\f136"; } |
|||
i.sketchy.icon.magnify:before { content: "\f141"; } |
|||
i.sketchy.icon.name:before { content: "\f10b"; } |
|||
i.sketchy.icon.pencil:before { content: "\f122"; } |
|||
i.sketchy.icon.phase.design:before { content: "\f101"; } |
|||
i.sketchy.icon.phase.research:before { content: "\f13d"; } |
|||
i.sketchy.icon.phase.tagline:before { content: "\f117"; } |
|||
i.sketchy.icon.photos:before { content: "\f137"; } |
|||
i.sketchy.icon.play:before { content: "\f104"; } |
|||
i.sketchy.icon.price:before { content: "\f107"; } |
|||
i.sketchy.icon.problem:before { content: "\f11e"; } |
|||
i.sketchy.icon.profile:before { content: "\f133"; } |
|||
i.sketchy.icon.question:before { content: "\f106"; } |
|||
i.sketchy.icon.question.circle:before { content: "\f11c"; } |
|||
i.sketchy.icon.rain.cloud:before { content: "\f124"; } |
|||
i.sketchy.icon.share:before { content: "\f12c"; } |
|||
i.sketchy.icon.shop:before { content: "\f147"; } |
|||
i.sketchy.icon.timeline:before { content: "\f138"; } |
|||
i.sketchy.icon.trashcan:before { content: "\f135"; } |
|||
i.sketchy.icon.vote.down:before { content: "\f11f"; } |
|||
i.sketchy.icon.vote.up:before { content: "\f143"; } |
|||
i.sketchy.icon.x:before { content: "\f148"; } |
|||
i.sketchy.icon.x.circle:before { content: "\f10f"; } |
|||
|
|||
|
|||
/*------------------ |
|||
Glyph Sizing |
|||
-------------------*/ |
|||
|
|||
i.sketchy.circular.icon, |
|||
i.sketchy.square.icon { |
|||
padding: 0.35em !important; |
|||
} |
|||
@ -0,0 +1,120 @@ |
|||
.ui.menu { |
|||
background-image: -webkit-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -moz-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -o-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -ms-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
|||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.tiered.menu { |
|||
background-image: -webkit-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.02) 100%) |
|||
; |
|||
background-image: -moz-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.02) 100%) |
|||
; |
|||
background-image: -o-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.02) 100%) |
|||
; |
|||
background-image: -ms-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.02) 100%) |
|||
; |
|||
background-image: linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.02) 100%) |
|||
; |
|||
} |
|||
.ui.tiered.menu .item.active { |
|||
-moz-box-shadow: 0px 1px 0px 0px #F9F9F9; |
|||
-webkit-box-shadow: 0px 1px 0px 0px #F9F9F9; |
|||
box-shadow: 0px 1px 0px 0px #F9F9F9; |
|||
} |
|||
|
|||
.ui.pointing.menu .active.item:after { |
|||
background-color: #F1F1F1; |
|||
} |
|||
.ui.vertical.pointing.menu .active.item:after { |
|||
background-color: #FAFAFA; |
|||
} |
|||
|
|||
|
|||
.ui.vertical.menu, |
|||
.ui.secondary.menu, |
|||
.ui.text.menu { |
|||
background-image: none; |
|||
} |
|||
|
|||
.ui.vertical.menu .item { |
|||
background-image: -webkit-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.01) 100%) |
|||
; |
|||
background-image: -moz-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.01) 100%) |
|||
; |
|||
background-image: -o-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.01) 100%) |
|||
; |
|||
background-image: -ms-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.01) 100%) |
|||
; |
|||
background-image: linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.01) 100%) |
|||
; |
|||
} |
|||
.ui.inverted.vertical.menu .item { |
|||
background-image: -webkit-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -moz-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -o-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: -ms-linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
background-image: linear-gradient(top, |
|||
transparent 0%, |
|||
rgba(0, 0, 0, 0.05) 100%) |
|||
; |
|||
} |
|||
.ui.vertical.menu .item .menu .item { |
|||
background-image: none; |
|||
} |
|||
|
|||
.ui.vertical.secondary.menu .item, |
|||
.ui.vertical.secondary.menu .item, |
|||
.ui.vertical.secondary.menu .item { |
|||
background-image: none; |
|||
} |
|||
@ -1,54 +0,0 @@ |
|||
{ |
|||
"Name": "Button", |
|||
"src": "", |
|||
"Type": "UI Element", |
|||
"States": { |
|||
"Active": "active", |
|||
"Loading": "loading", |
|||
"Disabled": "disabled" |
|||
}, |
|||
"Types": { |
|||
"Singular": { |
|||
"Standard": ".ui.button", |
|||
"Icon": ".ui.icon.button", |
|||
"Labeled Icon": ".ui.labeled.icon.button" |
|||
}, |
|||
"Plural": { |
|||
"Standard": ".buttons > .button+.button+.button", |
|||
"Conditional": ".buttons > .button+.or+.button", |
|||
"Vertical": ".vertical.buttons > .button+.button+.button" |
|||
} |
|||
}, |
|||
"Variations": { |
|||
"Ordinality": [ |
|||
"secondary", |
|||
"tertiary" |
|||
], |
|||
"Size": [ |
|||
"mini", |
|||
"tiny", |
|||
"small", |
|||
"medium", |
|||
"large", |
|||
"huge", |
|||
"massive" |
|||
], |
|||
"Color": [ |
|||
"black", |
|||
"green", |
|||
"red", |
|||
"blue", |
|||
"green", |
|||
"red", |
|||
"teal" |
|||
], |
|||
"Attached": [ |
|||
"attached top", |
|||
"attached bottom", |
|||
"attached left", |
|||
"attached right" |
|||
], |
|||
"Circular": "circular", |
|||
"Fluid": "fluid" |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save