Browse Source
Former-commit-id: e1991e5aeebb7d4ac7669b1125419d657f13752d Former-commit-id: e6e9d8035984b39dfa3fcb3ae5c28dbe225279aebeta
Jack Lukic
11 years ago
101 changed files with 11576 additions and 672 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
.ui.divider{margin:1em 0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8);height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui.vertical.divider,.ui.horizontal.divider{position:absolute;border:0;height:0;margin:0;background-color:transparent;font-size:.8rem;font-weight:700;text-align:center;text-transform:uppercase;color:rgba(0,0,0,.8)}.vertical.ui.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0 0 0 -3%;width:6%;height:50%;line-height:0;padding:0}.vertical.ui.divider:before,.vertical.ui.divider:after{position:absolute;left:50%;content:" ";z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.8);width:0;height:80%}.vertical.ui.divider:before{top:-100%}.vertical.ui.divider:after{top:auto;bottom:0}.horizontal.ui.divider{position:relative;top:0;left:0;margin:1rem 0rem;width:100%;height:1em;padding:0;line-height:1}.horizontal.ui.divider:before,.horizontal.ui.divider:after{position:absolute;content:" ";z-index:3;width:45%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8)}.horizontal.ui.divider:before{left:0}.horizontal.ui.divider:after{left:auto;right:0}.ui.divider.inverted{color:#fff}.ui.vertical.inverted.divider,.ui.horizontal.inverted.divider{color:rgba(255,255,255,.9)}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15);border-left-color:rgba(0,0,0,.15);border-right-color:rgba(255,255,255,.15)}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both} |
|||
.ui.divider{margin:1rem 0rem;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8);height:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui.vertical.divider,.ui.horizontal.divider{position:absolute;border:0;height:0;margin:0;background-color:transparent;font-size:.8rem;font-weight:700;text-align:center;text-transform:uppercase;color:rgba(0,0,0,.8)}.vertical.ui.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0 0 0 -3%;width:6%;height:50%;line-height:0;padding:0}.vertical.ui.divider:before,.vertical.ui.divider:after{position:absolute;left:50%;content:" ";z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.8);width:0;height:80%}.vertical.ui.divider:before{top:-100%}.vertical.ui.divider:after{top:auto;bottom:0}.horizontal.ui.divider{position:relative;top:0;left:0;margin:1rem 0rem;width:100%;height:1em;padding:0;line-height:1}.horizontal.ui.divider:before,.horizontal.ui.divider:after{position:absolute;content:" ";z-index:3;width:45%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.8)}.horizontal.ui.divider:before{left:0}.horizontal.ui.divider:after{left:auto;right:0}.ui.divider.inverted{color:#fff}.ui.vertical.inverted.divider,.ui.horizontal.inverted.divider{color:rgba(255,255,255,.9)}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15);border-bottom-color:rgba(255,255,255,.15);border-left-color:rgba(0,0,0,.15);border-right-color:rgba(255,255,255,.15)}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both} |
|||
@ -1 +1 @@ |
|||
.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header:after{content:".";display:block;height:0;clear:both;visibility:hidden}.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:last-child{margin-bottom: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;margin-top:0;margin-right:.5em}.ui.right.floated.header{float:right;margin-top:0;margin-left:.5em}.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{float:none;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;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:last-child{margin-bottom: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;margin-top:0;margin-right:.5em}.ui.right.floated.header{float:right;margin-top:0;margin-left:.5em}.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{float:none;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} |
|||
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-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.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.accordion .title:hover,.ui.accordion .title.active{color:rgba(0,0,0,.8)}.ui.accordion .title.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .content.active{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0} |
|||
.ui.accordion{width:600px;max-width:100%;overflow:hidden;font-size:1rem;border-radius:.3125em;background-color:#FFF;-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.accordion .title{cursor:pointer;margin:0;padding:.75em 1em;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.05);-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.ui.accordion .title:first-child{border-top:0}.ui.accordion .content{display:none;margin:0;padding:1.3em 1em}.ui.basic.accordion.menu{background-color:#FFF;-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.basic.accordion.menu .title,.ui.basic.accordion.menu .content{padding:0}.ui.accordion .title:hover,.ui.accordion .title.active{color:rgba(0,0,0,.8)}.ui.accordion .title.active{background-color:rgba(0,0,0,.1);color:rgba(0,0,0,.8)}.ui.accordion .content.active{display:block}.ui.basic.accordion{background-color:transparent;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.basic.accordion .title{background-color:transparent;border-top:0}.ui.basic.accordion .title,.ui.basic.accordion .content{padding-left:0;padding-right:0} |
|||
@ -1 +1 @@ |
|||
!function(a,b,c,d){a.fn.accordion=function(b){var c,e=a(this),f=a.isPlainObject(b)?a.extend(!0,{},a.fn.accordion.settings,b):a.fn.accordion.settings,g=("."+f.namespace,"module-"+f.namespace,e.selector||""),h=(new Date).getTime(),i=[],j=arguments[0],k="string"==typeof j,l=[].slice.call(arguments,1);return e.each(function(){var b,e=a(this),m=e.find(f.selector.title),n=(e.find(f.selector.icon),e.find(f.selector.content)),o=(e.selector||"",this),p=e.data("module-"+f.namespace),q=f.className,r=(f.metadata,f.namespace),s=(f.animation,f.errors);b={initialize:function(){b.debug("Initializing accordion with bound events",e),m.on("click",b.event.click),e.data("module",b)},destroy:function(){b.debug("Destroying previous accordion for",e),e.off(r)},event:{click:function(){var c=a(this),d=m.index(c),e=c.hasClass(q.active);b.verbose("Accordion title clicked",c),e?f.collapsible?b.close(d):b.debug("Cannot close accordion content collapsing is disabled"):b.open(d)}},open:function(c){var d=m.eq(c),e=d.next(n),g=m.filter("."+q.active),h=g.next(m),i=g.size()>0;e.is(":animated")||(b.debug("Opening accordion content",d),f.exclusive&&i&&(g.removeClass(q.active),h.stop().children().animate({opacity:0},f.speed).end().slideUp(f.speed,f.easing,function(){h.removeClass(q.active).removeAttr("style").children().removeAttr("style")})),d.addClass(q.active),e.stop().children().removeAttr("style").end().slideDown(f.speed,f.easing,function(){e.addClass(q.active).removeAttr("style"),a.proxy(f.onOpen,e)(),a.proxy(f.onChange,e)()}))},close:function(c){var d=m.eq(c),e=d.next(n);b.debug("Closing accordion content",d),d.removeClass(q.active),e.removeClass(q.active).show().stop().children().animate({opacity:0},f.speed).end().slideUp(f.speed,f.easing,function(){e.removeAttr("style"),a.proxy(f.onClose,e)(),a.proxy(f.onChange,e)()})},setting:function(c,e){return b.debug("Changing setting",c,e),e===d?f[c]:(a.isPlainObject(c)?a.extend(!0,f,c):f[c]=e,void 0)},internal:function(c,e){return b.debug("Changing internal",c,e),e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){f.debug&&(f.performance?b.performance.log(arguments):b.debug=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},verbose:function(){f.verbose&&f.debug&&(f.performance?b.performance.log(arguments):b.verbose=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},error:function(){b.error=Function.prototype.bind.call(console.log,console,f.moduleName+":")},performance:{log:function(a){var c,d,e;f.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:o,Name:a[0],Arguments:a[1]||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var b=f.moduleName+":",c=0;h=!1,a.each(i,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",g&&(b+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(b),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(c,e,f){var g,h;return e=e||l,f=o||f,"string"==typeof c&&p!==d&&(c=c.split("."),g=c.length-1,a.each(c,function(c,e){return a.isPlainObject(p[e])&&c!=g?(p=p[e],!0):p[e]!==d?(h=p[e],!0):(b.error(s.method),!1)})),a.isFunction(h)?(p.verbose("Executing invoked function",h),h.apply(f,e)):h||!1}},k?(p===d&&b.initialize(),c=b.invoke(j)):(p!==d&&b.destroy(),b.initialize())}),c?c:this},a.fn.accordion.settings={moduleName:"Accordion",debug:!0,verbose:!0,performance:!0,exclusive:!0,collapsible:!0,onOpen:function(){},onClose:function(){},onChange:function(){},errors:{method:"The method you called is not defined"},className:{active:"active",hover:"hover"},selector:{title:".title",icon:".icon",content:".content"},speed:500,easing:"easeInOutQuint"}}(jQuery,window,document); |
|||
!function(a,b,c,d){a.fn.accordion=function(b){var c,e=a(this),f=a.isPlainObject(b)?a.extend(!0,{},a.fn.accordion.settings,b):a.fn.accordion.settings,g=("."+f.namespace,"module-"+f.namespace,e.selector||""),h=(new Date).getTime(),i=[],j=arguments[0],k="string"==typeof j,l=[].slice.call(arguments,1);return e.each(function(){var b,e=a(this),m=e.find(f.selector.title),n=(e.find(f.selector.icon),e.find(f.selector.content)),o=(e.selector||"",this),p=e.data("module-"+f.namespace),q=f.className,r=(f.metadata,f.namespace),s=(f.animation,f.errors);b={initialize:function(){b.debug("Initializing accordion with bound events",e),m.on("click",b.event.click),e.data("module",b)},destroy:function(){b.debug("Destroying previous accordion for",e),e.off(r)},event:{click:function(){var c=a(this),d=m.index(c),e=c.hasClass(q.active);b.verbose("Accordion title clicked",c),e?f.collapsible?b.close(d):b.debug("Cannot close accordion content collapsing is disabled"):b.open(d)},resetStyle:function(){a(this).removeAttr("style").children().removeAttr("style")}},open:function(c){var d=m.eq(c),e=d.next(n),g=m.filter("."+q.active),h=g.next(m),i=g.size()>0;e.is(":animated")||(b.debug("Opening accordion content",d),f.exclusive&&i&&(g.removeClass(q.active),h.stop().children().animate({opacity:0},f.speed,b.event.resetStyle).end().slideUp(f.speed,f.easing,function(){h.removeClass(q.active).removeAttr("style").children().removeAttr("style")})),d.addClass(q.active),e.stop().children().removeAttr("style").end().slideDown(f.speed,f.easing,function(){e.addClass(q.active).removeAttr("style"),a.proxy(f.onOpen,e)(),a.proxy(f.onChange,e)()}))},close:function(c){var d=m.eq(c),e=d.next(n);b.debug("Closing accordion content",d),d.removeClass(q.active),e.removeClass(q.active).show().stop().children().animate({opacity:0},f.speed,b.event.resetStyle).end().slideUp(f.speed,f.easing,function(){e.removeAttr("style"),a.proxy(f.onClose,e)(),a.proxy(f.onChange,e)()})},setting:function(c,e){return b.debug("Changing setting",c,e),e===d?f[c]:(a.isPlainObject(c)?a.extend(!0,f,c):f[c]=e,void 0)},internal:function(c,e){return b.debug("Changing internal",c,e),e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){f.debug&&(f.performance?b.performance.log(arguments):b.debug=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},verbose:function(){f.verbose&&f.debug&&(f.performance?b.performance.log(arguments):b.verbose=Function.prototype.bind.call(console.info,console,f.moduleName+":"))},error:function(){b.error=Function.prototype.bind.call(console.log,console,f.moduleName+":")},performance:{log:function(a){var c,d,e;f.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:o,Name:a[0],Arguments:a[1]||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var b=f.moduleName+":",c=0;h=!1,a.each(i,function(a,b){c+=b["Execution Time"]}),b+=" "+c+"ms",g&&(b+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(b),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(c,e,f){var g,h;return e=e||l,f=o||f,"string"==typeof c&&p!==d&&(c=c.split("."),g=c.length-1,a.each(c,function(c,e){return a.isPlainObject(p[e])&&c!=g?(p=p[e],!0):p[e]!==d?(h=p[e],!0):(b.error(s.method),!1)})),a.isFunction(h)?(p.verbose("Executing invoked function",h),h.apply(f,e)):h||!1}},k?(p===d&&b.initialize(),c=b.invoke(j)):(p!==d&&b.destroy(),b.initialize())}),c?c:this},a.fn.accordion.settings={moduleName:"Accordion",debug:!0,verbose:!0,performance:!1,exclusive:!0,collapsible:!0,onOpen:function(){},onClose:function(){},onChange:function(){},errors:{method:"The method you called is not defined"},className:{active:"active",hover:"hover"},selector:{title:".title",icon:".icon",content:".content"},speed:500,easing:"easeInOutQuint"}}(jQuery,window,document); |
|||
@ -1 +1 @@ |
|||
.ui.nag{display:none;opacity:.95;position:absolute;top:0;left:10%;z-index:100;width:80%;min-height:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0;padding:.75em 1em;background-color:#555;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);box-shadow:0 1px 2px 0 rgba(0,0,0,.2);font-size:1em;text-align:center;color:rgba(255,255,255,.8);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-transition:.2s background;-moz-transition:.2s background;-o-transition:.2s background;-ms-transition:.2s background;transition:.2s background}a.ui.nag{cursor:pointer}.ui.nag>.title{display:inline-block;margin:0 .5em;color:#FFF}.ui.nag>.icon.close{cursor:pointer;opacity:.4;position:absolute;top:50%;right:1em;margin-top:-.5em;color:#FFF;-webkit-transition:.1s opacity;-moz-transition:.1s opacity;-o-transition:.1s opacity;-ms-transition:.1s opacity;transition:.1s opacity}.ui.nag:hover{opacity:1}.ui.nag .close:hover{opacity:1}.ui.static.nag{position:static;display:block}.ui.fixed.nag{position:fixed}.ui.nag.bottom{-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.nag.bottom.fixed{top:auto;bottom:0}.ui.nag.white{background-color:#F1F1F1;text-shadow:0 1px 0 rgba(255,255,255,.8);color:#ACACAC}.ui.nag.white .close,.ui.nag.white .title{color:#333} |
|||
.ui.nag{display:none;opacity:.95;position:absolute;top:0;left:10%;z-index:101;width:80%;min-height:20px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;margin:0;padding:.75em 1em;background-color:#555;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.2);box-shadow:0 1px 2px 0 rgba(0,0,0,.2);font-size:1em;text-align:center;color:rgba(255,255,255,.8);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-transition:.2s background;-moz-transition:.2s background;-o-transition:.2s background;-ms-transition:.2s background;transition:.2s background}a.ui.nag{cursor:pointer}.ui.nag>.title{display:inline-block;margin:0 .5em;color:#FFF}.ui.nag>.icon.close{cursor:pointer;opacity:.4;position:absolute;top:50%;right:1em;margin-top:-.5em;color:#FFF;-webkit-transition:.1s opacity;-moz-transition:.1s opacity;-o-transition:.1s opacity;-ms-transition:.1s opacity;transition:.1s opacity}.ui.nag:hover{opacity:1}.ui.nag .close:hover{opacity:1}.ui.static.nag{position:static;display:block}.ui.fixed.nag{position:fixed}.ui.nag.bottom{-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.ui.nag.bottom.fixed{top:auto;bottom:0}.ui.nag.white{background-color:#F1F1F1;text-shadow:0 1px 0 rgba(255,255,255,.8);color:#ACACAC}.ui.nag.white .close,.ui.nag.white .title{color:#333} |
|||
@ -1 +1 @@ |
|||
!function(a,b,c,d){a.fn.nag=function(c){var e=a.extend(!0,{},a.fn.nag.settings,c),f=arguments||!1;return a(this).each(function(){var c,g,h,i,j,k,l,m,n,o=a(this),p=o.find(e.selector.close),q=a(e.context),r=o.data("module"),s=e.className,t=b.requestAnimationFrame||b.mozRequestAnimationFrame||b.webkitRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,0)};return n={initialize:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset(),o.data("module",n),p.on("click",n.dismiss),e.context==b&&"fixed"==e.position&&o.addClass(s.fixed),e.sticky&&("absolute"==e.position?q.on("scroll resize",n.event.scroll):a(b).on("scroll resize",n.event.scroll),a.proxy(n.event.scroll,this)()),e.displayTime>0&&setTimeout(n.hide,e.displayTime),n.should.show()?o.is(":visible")||n.show():n.hide()},refresh:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset()},show:function(){a.fn.popIn!==d?o.popIn(e.duration):o.fadeIn(e.duration,e.easing)},hide:function(){o.fadeOut(e.duration,e.easing)},stick:function(){if(n.refresh(),"fixed"==e.position){var c=a(b).prop("pageYOffset")||a(b).scrollTop(),d=o.hasClass(s.bottom)?j.top+(i-g)-c:j.top-c;o.css({position:"fixed",top:d,left:j.left,width:h-e.scrollBarWidth})}else o.css({top:l})},unStick:function(){o.css({top:""})},dismiss:function(){e.storageMethod&&n.storage.set(e.storedKey,e.storedValue),n.hide()},should:{show:function(){return e.persist||n.storage.get(e.storedKey)!=e.storedValue?!0:!1},stick:function(){return k=q.prop("pageYOffset")||q.scrollTop(),l=o.hasClass(s.bottom)?i-o.outerHeight()+k:k,l>c.top?!0:"fixed"==e.position?!0:!1}},storage:{set:function(c,f){"local"==e.storageMethod&&b.store!==d?b.store.set(c,f):a.cookie!==d?a.cookie(c,f):n.error(e.errors.noStorage)},get:function(c){return"local"==e.storageMethod&&b.store!==d?b.store.get(c):a.cookie!==d?a.cookie(c):(n.error(e.errors.noStorage),void 0)}},event:{scroll:function(){m!==d&&clearTimeout(m),m=setTimeout(function(){n.should.stick()?t(n.stick):n.unStick()},e.lag)}},error:function(a){console.log("Nag Module:"+a)},invoke:function(b,c,f){var g;return f=f||Array.prototype.slice.call(arguments,2),"string"==typeof b&&r!==d&&(b=b.split("."),a.each(b,function(b,c){return a.isPlainObject(r[c])?(r=r[c],!0):a.isFunction(r[c])?(g=r[c],!0):(n.error(e.errors.method),!1)})),a.isFunction(g)?g.apply(c,f):g}},r!==d&&f?("invoke"==f[0]&&(f=Array.prototype.slice.call(f,1)),n.invoke(f[0],this,Array.prototype.slice.call(f,1))):(n.initialize(),void 0)}),this},a.fn.nag.settings={persist:!1,displayTime:0,position:"fixed",scrollBarWidth:18,storageMethod:"cookie",storedKey:"nag",storedValue:"dismiss",sticky:!1,lag:0,context:b,errors:{noStorage:"Neither $.cookie or store is defined. A storage solution is required for storing state"},className:{bottom:"bottom",fixed:"fixed"},selector:{close:".icon.close"},speed:500,easing:"easeOutQuad"}}(jQuery,window,document); |
|||
!function(a,b,c,d){a.fn.nag=function(c){var e=a.extend(!0,{},a.fn.nag.settings,c),f=arguments||!1;return a(this).each(function(){var c,g,h,i,j,k,l,m,n,o=a(this),p=o.find(e.selector.close),q=a(e.context),r=o.data("module"),s=e.className,t=b.requestAnimationFrame||b.mozRequestAnimationFrame||b.webkitRequestAnimationFrame||b.msRequestAnimationFrame||function(a){setTimeout(a,0)};return n={initialize:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset(),o.data("module",n),p.on("click",n.dismiss),e.context==b&&"fixed"==e.position&&o.addClass(s.fixed),e.sticky&&("absolute"==e.position?q.on("scroll resize",n.event.scroll):a(b).on("scroll resize",n.event.scroll),a.proxy(n.event.scroll,this)()),e.displayTime>0&&setTimeout(n.hide,e.displayTime),n.should.show()?o.is(":visible")||n.show():n.hide()},refresh:function(){c=o.offset(),g=o.outerHeight(),h=q.outerWidth(),i=q.outerHeight(),j=q.offset()},show:function(){a.fn.popIn!==d?o.popIn(e.duration):o.fadeIn(e.duration,e.easing)},hide:function(){o.fadeOut(e.duration,e.easing,this.onHide)},onHide:function(){o.remove(),e.onHide&&e.onHide()},stick:function(){if(n.refresh(),"fixed"==e.position){var c=a(b).prop("pageYOffset")||a(b).scrollTop(),d=o.hasClass(s.bottom)?j.top+(i-g)-c:j.top-c;o.css({position:"fixed",top:d,left:j.left,width:h-e.scrollBarWidth})}else o.css({top:l})},unStick:function(){o.css({top:""})},dismiss:function(a){e.storageMethod&&n.storage.set(e.storedKey,e.storedValue),n.hide(),a.stopImmediatePropagation(),a.preventDefault()},should:{show:function(){return e.persist||n.storage.get(e.storedKey)!=e.storedValue?!0:!1},stick:function(){return k=q.prop("pageYOffset")||q.scrollTop(),l=o.hasClass(s.bottom)?i-o.outerHeight()+k:k,l>c.top?!0:"fixed"==e.position?!0:!1}},storage:{set:function(c,f){"local"==e.storageMethod&&b.store!==d?b.store.set(c,f):a.cookie!==d?a.cookie(c,f):n.error(e.errors.noStorage)},get:function(c){return"local"==e.storageMethod&&b.store!==d?b.store.get(c):a.cookie!==d?a.cookie(c):(n.error(e.errors.noStorage),void 0)}},event:{scroll:function(){m!==d&&clearTimeout(m),m=setTimeout(function(){n.should.stick()?t(n.stick):n.unStick()},e.lag)}},error:function(a){console.log("Nag Module:"+a)},invoke:function(b,c,f){var g;return f=f||Array.prototype.slice.call(arguments,2),"string"==typeof b&&r!==d&&(b=b.split("."),a.each(b,function(b,c){return a.isPlainObject(r[c])?(r=r[c],!0):a.isFunction(r[c])?(g=r[c],!0):(n.error(e.errors.method),!1)})),a.isFunction(g)?g.apply(c,f):g}},r!==d&&f?("invoke"==f[0]&&(f=Array.prototype.slice.call(f,1)),n.invoke(f[0],this,Array.prototype.slice.call(f,1))):(n.initialize(),void 0)}),this},a.fn.nag.settings={persist:!1,displayTime:0,position:"fixed",scrollBarWidth:18,storageMethod:"cookie",storedKey:"nag",storedValue:"dismiss",sticky:!1,lag:0,context:b,errors:{noStorage:"Neither $.cookie or store is defined. A storage solution is required for storing state"},className:{bottom:"bottom",fixed:"fixed"},selector:{close:".icon.close"},speed:500,easing:"easeOutQuad",onHide:function(){}}}(jQuery,window,document); |
|||
@ -1 +1 @@ |
|||
.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;color:rgba(0,0,0,.7);-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{margin:-.8em -1.2em .8em;background-color:rgba(0,0,0,.05);padding:.8em 1.2em;line-height:1;font-weight:700;color:rgba(0,0,0,.8);-webkit-border-radius:.2em .2em 0 0;-moz-border-radius:.2em .2em 0 0;border-radius:.2em .2em 0 0}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333} |
|||
.ui.popup{display:none;position:absolute;top:0;right:0;z-index:900;border:1px solid #DCDDDE;max-width:250px;background-color:#FFF;padding:.8em 1.2em;font-size:.875rem;font-weight:400;font-style:normal;color:rgba(0,0,0,.7);-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;-webkit-box-shadow:0 1px 1px #DCDDDE;-moz-box-shadow:0 1px 1px #DCDDDE;box-shadow:0 1px 1px #DCDDDE}.ui.popup .header{margin:-.8em -1.2em .8em;background-color:rgba(0,0,0,.05);padding:.8em 1.2em;line-height:1;font-weight:700;color:rgba(0,0,0,.8);-webkit-border-radius:.2em .2em 0 0;-moz-border-radius:.2em .2em 0 0;border-radius:.2em .2em 0 0}.ui.popup .ui.button,.ui.popup form.ui input .ui.popup form.ui textarea{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.popup{margin:0}.ui.popup.bottom{margin:.75em 0 0}.ui.popup.top{margin:0 0 .75em}.ui.popup.left.center{margin:0 .75em 0 0}.ui.popup.right.center{margin:0 0 0 .75em}.ui.popup.center{margin-left:-1.25em}.ui.popup:before{position:absolute;content:"";width:.75em;height:.75rem;background-image:none;background-color:#FFF;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);z-index:2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:1px 1px 1px #DCDDDE;-moz-box-shadow:1px 1px 1px #DCDDDE;box-shadow:1px 1px 1px #DCDDDE}.ui.bottom.center.popup:before{margin-left:-.4em;top:-.4em;left:50%;right:auto;bottom:auto;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.left.popup:before{top:-.4em;left:1em;right:auto;bottom:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.bottom.right.popup:before{top:-.4em;right:1em;bottom:auto;left:auto;margin-left:0;-webkit-box-shadow:-1px -1px 1px #dcddde;-moz-box-shadow:-1px -1px 1px #dcddde;box-shadow:-1px -1px 1px #dcddde}.ui.top.center.popup:before{top:auto;right:auto;bottom:-.4em;left:50%;margin-left:-.4em}.ui.top.left.popup:before{bottom:-.4em;left:1em;top:auto;right:auto;margin-left:0}.ui.top.right.popup:before{bottom:-.4em;right:1em;top:auto;left:auto;margin-left:0}.ui.left.center.popup:before{top:50%;right:-.35em;bottom:auto;left:auto;margin-top:-.4em;-moz-box-shadow:1px -1px 1px #dcddde;-webkit-box-shadow:1px -1px 1px #dcddde;box-shadow:1px -1px 1px #dcddde}.ui.right.center.popup:before{top:50%;left:-.35em;bottom:auto;right:auto;margin-top:-.4em;-moz-box-shadow:-1px 1px 1px #dcddde;-webkit-box-shadow:-1px 1px 1px #dcddde;box-shadow:-1px 1px 1px #dcddde}.ui.popup.loading{display:block;visibility:hidden}.ui.popup.active{display:block}.ui.small.popup{font-size:.75rem}.ui.large.popup{font-size:1rem}.ui.inverted.popup{background-color:#333;border:0;color:#FFF;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.ui.inverted.popup .header{background-color:rgba(0,0,0,.2);color:#FFF}.ui.inverted.popup:before{background-color:#333;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||
.ui.comments a{cursor:pointer}.ui.comments .comment{position:relative;margin-top:.75em;padding-top:.75em}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment .avatar{display:block;float:left;width:4em}.ui.comments .comment .avatar img{display:block;margin:0 auto;width:3em;height:3em;border-radius:500px}.ui.comments .comment>.content,.ui.comments .comment>.avatar{display:block}.ui.comments .comment .avatar~.content{padding:0 1em}.ui.comments .comment>.avatar~.content{padding-top:.25em;margin-left:3.5em}.ui.comments .comment .metadata{display:inline-block;margin-left:.3em;color:rgba(0,0,0,.4)}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .3em 0 0}.ui.comments .comment .text{margin:.25em 0 .5em}.ui.comments .comment .actions{font-size:.9em}.ui.comments .comment .actions a{display:inline-block;margin:0 .3em 0 0;color:rgba(0,0,0,.3)}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.6)}.ui.comments .reply.form{margin-top:.75em;width:100%;max-width:30em}.ui.comments .comment .reply.form{margin-left:2em}.ui.comments>.reply.form{margin-top:1.5em;max-width:40em}.ui.comments .reply.form textarea{height:12em}.ui.comments .comment .comments{margin-top:.25em;padding-top:.25em}.ui.comments .comment .comments:before{position:absolute;top:0;left:0}.ui.comments>.comment .comments{margin-left:2em}.ui.comments>.comment>.comments>.comment>.comments{margin-left:1.75em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments{margin-left:1.5em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments>.comment .comments{margin-left:.5em}.ui.threaded.comments .comment .comments{margin-left:2em!important;padding-left:2em!important;-webkit-box-shadow:-1px 0 0 rgba(0,0,0,.05);-moz-box-shadow:-1px 0 0 rgba(0,0,0,.05);box-shadow:-1px 0 0 rgba(0,0,0,.05)}.ui.minimal.comments .comment .actions{opacity:0;-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;transition:opacity .1s ease-out;-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.small.comments{font-size:.875em} |
|||
.ui.comments a{cursor:pointer}.ui.comments .comment{position:relative;margin-top:.5em;padding-top:.5em}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment .avatar{display:block;float:left;width:4em}.ui.comments .comment .avatar img{display:block;margin:0 auto;width:3em;height:3em;border-radius:500px}.ui.comments .comment>.content,.ui.comments .comment>.avatar{display:block}.ui.comments .comment .avatar~.content{padding:0 1em}.ui.comments .comment>.avatar~.content{padding-top:.25em;margin-left:3.5em}.ui.comments .comment .metadata{display:inline-block;margin-left:.3em;color:rgba(0,0,0,.4)}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .3em 0 0}.ui.comments .comment .text{margin:.25em 0 .5em}.ui.comments .comment .actions{font-size:.9em}.ui.comments .comment .actions a{display:inline-block;margin:0 .3em 0 0;color:rgba(0,0,0,.3)}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.6)}.ui.comments .reply.form{margin-top:.75em;width:100%;max-width:30em}.ui.comments .comment .reply.form{margin-left:2em}.ui.comments>.reply.form{margin-top:1.5em;max-width:40em}.ui.comments .reply.form textarea{height:12em}.ui.comments .comment .comments{margin-top:.5em;padding-top:.5em;padding-bottom:1em}.ui.comments .comment .comments:before{position:absolute;top:0;left:0}.ui.comments>.comment .comments{margin-left:2em}.ui.comments>.comment>.comments>.comment>.comments{margin-left:1.75em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments{margin-left:1.5em}.ui.comments>.comment>.comments>.comment>.comments>.comment>.comments>.comment .comments{margin-left:.5em}.ui.threaded.comments .comment .comments{margin-left:2em!important;padding-left:2em!important;-webkit-box-shadow:-1px 0 0 rgba(0,0,0,.05);-moz-box-shadow:-1px 0 0 rgba(0,0,0,.05);box-shadow:-1px 0 0 rgba(0,0,0,.05)}.ui.minimal.comments .comment .actions{opacity:0;-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;transition:opacity .1s ease-out;-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;-ms-transition-delay:.1s;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.small.comments{font-size:.875em} |
|||
@ -0,0 +1 @@ |
|||
.ui.sitemap{margin:0 -3rem;font-size:0rem;text-align:left}.ui.sitemap>.section{display:inline-block;vertical-align:top;margin:0 3rem;font-size:1rem}.ui.sitemap>.section>.header{font-size:1.125em;color:rgba(0,0,0,.8);padding-bottom:.5em}.ui.sitemap>.section>a{display:block;padding:.25em 0} |
|||
@ -1 +1 @@ |
|||
81bf4b494bf4c4073269abd0fba8780a187b3d8f |
|||
d28ce2df85ab9811336b78e674ec47f891cd6095 |
|||
@ -1 +1 @@ |
|||
70f85a14c4a13624d9c72934cea67846e3211ff3 |
|||
285c8f91c51a7e1a146de7ef602792de98242859 |
|||
@ -0,0 +1,36 @@ |
|||
/* |
|||
* # Sitemap |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
/******************************* |
|||
Sitemap |
|||
*******************************/ |
|||
.ui.sitemap { |
|||
margin: 0 -3rem; |
|||
font-size: 0rem; |
|||
text-align: left; |
|||
} |
|||
/*-------------- |
|||
Elements |
|||
---------------*/ |
|||
.ui.sitemap > .section { |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
margin: 0em 3rem; |
|||
font-size: 1rem; |
|||
} |
|||
.ui.sitemap > .section > .header { |
|||
font-size: 1.125em; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
padding-bottom: 0.5em; |
|||
} |
|||
.ui.sitemap > .section > a { |
|||
display: block; |
|||
padding: 0.25em 0em; |
|||
} |
|||
@ -0,0 +1,101 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'index' |
|||
|
|||
title : 'UI Collections' |
|||
type : 'Semantic' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">UI Collection</h1> |
|||
<p>UI collections are elements which contain other elements which often appear together.<p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
<h2 class="ui dividing header">Types of Collections</h2> |
|||
|
|||
<div class="ui type two items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui fluid form"> |
|||
<div class="field"> |
|||
<label>Name</label> |
|||
<input class="ui input" placeholder="Name"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>E-mail</label> |
|||
<input class="ui input" placeholder="E-mail"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/form.html" class="name">Form</a> |
|||
<p class="description">A form is used to solicit a user response</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui three column aligned responsive grid"> |
|||
<div class="column"><div class="ui segment">1</div></div> |
|||
<div class="column"><div class="ui segment">2</div></div> |
|||
<div class="column"><div class="ui segment">3</div></div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/grid.html" class="name">Grid</a> |
|||
<p class="description">A grid helps harmonize negative space in a layout</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui inverted three item menu"> |
|||
<a class="item">Friends</a> |
|||
<a class="item">Messages</a> |
|||
<a class="item">Profile</a> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/menu.html" class="name">Menu</a> |
|||
<p class="description">A menu organizes related links</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<table class="ui table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td class="positive"><i class="icon check"></i> Approved</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="/collections/table.html" class="name">Table</a> |
|||
<p class="description">A table collects related data into rows of content</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui warning message"> |
|||
<div class="header">Alert</div> |
|||
<p>You forgot your name!</p> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="collections/block.html" class="name">Message</a> |
|||
<p class="description">Messages alert a user to something important.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,70 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'breadcrumb' |
|||
title : 'Breadcrumb' |
|||
type : 'UI Collection' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Breadcrumb</h1> |
|||
<p>A breadcrumb is a menu to show the location of the current section in relation to other sections.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Collection</a> |
|||
<a class="item">Elements</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Collection</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">A simple breadcrumb</h4> |
|||
<div class="ui ignored info message"> |
|||
<p>This example uses a <a href="/elements/segment.html">ui segment</a> to add padding and background color. This is not required.</p> |
|||
</div> |
|||
<div class="ui breadcrumb segment"> |
|||
<a class="section">Food</a> |
|||
<div class="divider"> / </div> |
|||
<a class="section">Fruit</a> |
|||
<div class="divider"> / </div> |
|||
<div class="active section">Apples</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Elements</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">A divider</h4> |
|||
<p>A breadcrumb can contain a divider to show the relationship between sections, this can be formatted as an icon or text.</p> |
|||
<div class="ui breadcrumb segment"> |
|||
<a class="section">Food</a> |
|||
<i class="right arrow icon divider"></i> |
|||
<a class="section">Fruit</a> |
|||
<i class="right arrow icon divider"></i> |
|||
<div class="active section">Apples</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">A section</h4> |
|||
<p>A breadcrumb can contain sections that can either be formatted as a link or text</p> |
|||
<div class="ui breadcrumb segment"> |
|||
<a class="section">Food</a> |
|||
<div class="divider"> / </div> |
|||
<a class="section">Fruit</a> |
|||
<div class="divider"> / </div> |
|||
<div class="active section">Apples</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,519 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'form' |
|||
|
|||
title : 'Form' |
|||
type : 'UI Collection' |
|||
--- |
|||
<script src="/javascript/form.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Form</h1> |
|||
<p>A form is a collection of user input elements</p> |
|||
<div class="warning ui message"> |
|||
<b>Looking for form validation?</b> |
|||
Form input can be validated using the <a href="/modules/form.html">form behavior definition</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Collection</a> |
|||
<a class="item">Elements</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Collection</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Form:</h4> |
|||
<p> |
|||
Forms always include fields, and fields always contain form elements. Fields themselves may also include: |
|||
<a href="/elements/input.html">ui inputs</a>, standard form fields, <a href="/elements/labels.html">ui labels</a>, textareas, as well as: |
|||
<a href="/modules/checkbox.html">checkboxes</a>, and <a href="/elements/message.html">message blocks</a>. |
|||
</p> |
|||
<p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p> |
|||
<div class="ui ignored info message"> |
|||
<p>This example uses a <a href="/elements/segment.html">ui segment</a> to add the padding and background color. This is not required.</p> |
|||
</div> |
|||
<div class="ui form segment"> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<div class="ui left labeled icon input"> |
|||
<input type="text" placeholder="Username"> |
|||
<i class="user icon"></i> |
|||
<div class="ui corner label"> |
|||
<i class="icon asterisk"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<div class="ui left labeled icon input"> |
|||
<input type="password"> |
|||
<i class="lock icon"></i> |
|||
<div class="ui corner label"> |
|||
<i class="icon asterisk"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui error message"> |
|||
<div class="header">We noticed some issues</div> |
|||
</div> |
|||
<div class="ui blue submit button">Login</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Elements</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Field</h4> |
|||
<p>A field is a form element containing a label and an input</p> |
|||
<div class="ui form"> |
|||
<div class="field"> |
|||
<label>User Input</label> |
|||
<input type="text"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text Area</h4> |
|||
<p>A textarea uses the default form element</p> |
|||
<div class="ui form"> |
|||
<div class="field"> |
|||
<label>User Text</label> |
|||
<textarea></textarea> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Checkbox</h4> |
|||
<p><a href="modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p> |
|||
<div class="ui form"> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" id="uniqueid" /> |
|||
<label for="uniqueid"></label> |
|||
</div> |
|||
<label>Static Checkbox</label> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox"/> |
|||
<label></label> |
|||
</div> |
|||
<label>JS Checkbox</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Radio Box</h4> |
|||
<p>Radio boxes are styled forms of standard form radio controls.</p> |
|||
<div class="ui form"> |
|||
<div class="grouped inline fields"> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="example" /> |
|||
<label></label> |
|||
</div> |
|||
<label>Apples</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="example" /> |
|||
<label></label> |
|||
</div> |
|||
<label>Pears</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="example" /> |
|||
<label></label> |
|||
</div> |
|||
<label>Bananas</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="example" /> |
|||
<label></label> |
|||
</div> |
|||
<label>Oranges</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="example" /> |
|||
<label></label> |
|||
</div> |
|||
<label>Persimmon</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text Block</h4> |
|||
<p>Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.</p> |
|||
<div class="ui form"> |
|||
<div class="ui message"> |
|||
<div class="header">We had some issues</div> |
|||
<ul class="list"> |
|||
<li>Please enter your first name</li> |
|||
<li>Please enter your last name</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<h3 class="ui header">Form</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Loading</h4> |
|||
<p>If a form is in loading state, it will automatically show a loading indicator:</p> |
|||
|
|||
<div class="ui loading form segment"> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" id="terms" /> |
|||
<label for="terms"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Error</h4> |
|||
<p>If a form is in an error state, it will automatically show any error message blocks:</p> |
|||
<div class="ui error form segment"> |
|||
<div class="ui error message"> |
|||
<div class="header">Action Forbidden</div> |
|||
<p>You can only sign up for an account once with a given e-mail address.</p> |
|||
</div> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" id="terms" /> |
|||
<label for="terms"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Warning</h4> |
|||
<p>If a form is in warning state, it will automatically show any warning message block:</p> |
|||
|
|||
<div class="ui warning form segment"> |
|||
<div class="ui warning message"> |
|||
<div class="header">Could you check something!</div> |
|||
<ul class="list"> |
|||
<li>You forgot your <b>first name</b></li> |
|||
<li>And also your <b>last name</b></li> |
|||
</ul> |
|||
</div> |
|||
<div class="two error fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
<div class="ui red pointing above ui label">Enter a first name</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
<div class="ui red pointing above ui label">Enter a last name</div> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" id="terms" /> |
|||
<label for="terms"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Form Fields</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Error</h4> |
|||
<p>Individual fields may contain an error state</p> |
|||
|
|||
<div class="ui form segment"> |
|||
<div class="two fields"> |
|||
<div class="field error"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>Individual fields may be disabled or read only</p> |
|||
|
|||
<div class="ui form segment"> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="Read Only" readonly="readonly" type="text"> |
|||
</div> |
|||
<div class="disabled field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Disabled" disabled="disabled" type="text"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<h3 class="ui header">Forms</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fluid</h4> |
|||
<p>A form can take the width of its container</p> |
|||
<div class="ui fluid form segment"> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>A form can also be small or large</p> |
|||
<div class="ui small form segment"> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="ui blue small submit button">Submit</div> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui large form segment"> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A form on a dark background may have to invert its color scheme</p> |
|||
|
|||
<div style="background-color: #333333; padding: 15px;"> |
|||
<div class="ui inverted form"> |
|||
<div class="ui info message"> |
|||
<div class="header">We had some issues</div> |
|||
<ul class="list"> |
|||
<li>Please enter your first name</li> |
|||
<li>Please enter your last name</li> |
|||
</ul> |
|||
</div> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h3 class="ui header">Fields</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inline</h4> |
|||
<p>A field can have its label next to instead of above it.</p> |
|||
<div class="ui form"> |
|||
<div class="inline field"> |
|||
<label>Last name</label> |
|||
<input type="text" placeholder="Full Name"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Date</h4> |
|||
<p>A field can let users know they are for dates</p> |
|||
<div class="ui form"> |
|||
<div class="date field"> |
|||
<label>Birthday</label> |
|||
<input type="text" placeholder="xx/xx/xxxx"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Groups</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fields</h4> |
|||
<p>Fields can exist together side by side</p> |
|||
<div class="ui form"> |
|||
<div class="ui three fields"> |
|||
<div class="field"> |
|||
<label>First name</label> |
|||
<input type="text" placeholder="First Name"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Middle name</label> |
|||
<input type="text" placeholder="Middle Name"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last name</label> |
|||
<input type="text" placeholder="Last Name"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Grouped Fields</h4> |
|||
<p>Fields can be grouped to show related choices</p> |
|||
<div class="ui form"> |
|||
<div class="grouped inline fields"> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Apples</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Oranges</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Pears</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Grapefruit</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inline</h4> |
|||
<p>Multiple fields may be inline in a row</p> |
|||
<div class="ui form"> |
|||
<div class="ui inline fields"> |
|||
<div class="field"> |
|||
<label>Phone Number</label> |
|||
<input type="text" placeholder="(xxx)"> |
|||
</div> |
|||
<div class="field"> |
|||
<input type="text" placeholder="xxx"> |
|||
</div> |
|||
<div class="field"> |
|||
<input type="text" placeholder="xxxx"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,719 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'Grid' |
|||
|
|||
title : 'Grid' |
|||
type : 'UI Collection' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="ui main responsive grid"> |
|||
<div class="column"> |
|||
<h1 class="ui dividing header">Grid</h1> |
|||
<p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main responsive ui grid"> |
|||
<div class="column"> |
|||
|
|||
<h2 class="ui dividing header">Collection</h2> |
|||
|
|||
<div class="highlighted example"> |
|||
<h4 class="ui header">Grid</h4> |
|||
<p>A grid is made up of columns of content.</p> |
|||
|
|||
<div class="ui ignore green message"><i class="icon heart"></i>All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes <b>16 columns</b></div> |
|||
<div class="ui grid"> |
|||
<div class="four wide column"> |
|||
<div class="ui segment"> |
|||
</div> |
|||
</div> |
|||
<div class="four wide column"> |
|||
<div class="ui segment"> |
|||
</div> |
|||
</div> |
|||
<div class="four wide column"> |
|||
<div class="ui segment"> |
|||
</div> |
|||
</div> |
|||
<div class="four wide column"> |
|||
<div class="ui segment"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="highlighted example"> |
|||
<h4 class="ui header">Page Grid</h4> |
|||
<p>A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.</p> |
|||
|
|||
<div class="ui ignore warning message"><i class="icon info circle"></i> |
|||
It is important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div> |
|||
|
|||
<div class="ui two column page grid"> |
|||
<div class="column"> |
|||
<div class="ui labeled vertical fluid inverted icon menu"> |
|||
<a class="item"> |
|||
<i class="icon mail"></i> |
|||
Mail |
|||
</a> |
|||
<a class="item"> |
|||
<i class="icon lab"></i> |
|||
Lab |
|||
</a> |
|||
<a class="item"> |
|||
<i class="icon star"></i> |
|||
Favorites |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<b>Inbox</b> |
|||
<p>Welcome to your inbox. Would you like to see more information?</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="highlighted example"> |
|||
<h4 class="ui header">Rows</h4> |
|||
<p>A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.</p> |
|||
<p> |
|||
<div class="ui grid"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
A |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
B |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="highlighted example"> |
|||
<h4 class="ui header">Columns</h4> |
|||
<p>Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.</p> |
|||
<div class="ui three column grid"> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
1 |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
2 |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
3 |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
4 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<h3 class="ui header">Grid</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Responsive Grid</h4> |
|||
<p>A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p> |
|||
|
|||
<div class="ui text message info ignore"> |
|||
<i class="icon heart"></i> Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals. |
|||
</div> |
|||
|
|||
<div class="ui two column responsive grid"> |
|||
<div class="column"> |
|||
<div class="ui labeled vertical fluid inverted icon menu"> |
|||
<a class="item"> |
|||
<i class="icon mail"></i> |
|||
Mail |
|||
</a> |
|||
<a class="item"> |
|||
<i class="icon lab"></i> |
|||
Lab |
|||
</a> |
|||
<a class="item"> |
|||
<i class="icon star"></i> |
|||
Favorites |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<b>Inbox</b> |
|||
<p>Welcome to your inbox. Would you like to see more information?</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Changing grid column count</h4> |
|||
<p>A grid can have a different number of columns per row</p> |
|||
<div class="ui three column grid"> |
|||
<div class="column"> |
|||
<div class="ui fluid form segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" id="terms" /> |
|||
<label for="terms"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
<div class="item"> |
|||
Poodle |
|||
</div> |
|||
<div class="item"> |
|||
Cockerspaniel |
|||
</div> |
|||
<div class="header item"> |
|||
Cats |
|||
</div> |
|||
<div class="item"> |
|||
Abysinnian |
|||
</div> |
|||
<div class="item"> |
|||
Sphynx |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui fluid form segment"> |
|||
<p>Log in to your account</p> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password"> |
|||
</div> |
|||
<div class="ui blue submit button">Login</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Stackable Grid</h4> |
|||
<p>A grid can have its columns take a full column width when below a threshold to allow for content to display properly at small sizes</p> |
|||
<div class="ui text message info ignore"> |
|||
<i class="icon heart"></i> To see a grid stack, try resizing your browser to a small width |
|||
</div> |
|||
<div class="two column stackable ui grid"> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Divided</h4> |
|||
<p>A grid can show a division between its columns</p> |
|||
<div class="ui six divided column grid"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Celled</h4> |
|||
<p>A grid can have rows divided into cells</p> |
|||
<div class="ui celled grid"> |
|||
<div class="row"> |
|||
<div class="two wide column" style=""> |
|||
<p>Lorem ipsum do</p> |
|||
</div> |
|||
<div class="three wide column" style=""> |
|||
<p>Lorem ipsum dolor </p> |
|||
</div> |
|||
<div class="seven wide column"> |
|||
<p>Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="five wide column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
|
|||
<div class="three wide column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
|
|||
<div class="two wide column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="two wide column"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text Alignment</h4> |
|||
<p>A grid can specify its text alignment</p> |
|||
<div class="ui center aligned three column grid"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Cats |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
<div class="item"> |
|||
Poodle |
|||
</div> |
|||
<div class="item"> |
|||
Cockerspaniel |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Monkeys |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Vertical Alignment</h4> |
|||
<p>A grid can specify its vertical alignment to have all its columns vertically centered.</p> |
|||
<div class="ui middle aligned three column grid"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Cats |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
<div class="item"> |
|||
Poodle |
|||
</div> |
|||
<div class="item"> |
|||
Cockerspaniel |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Monkeys |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Rows</h3> |
|||
<div class="example"> |
|||
<h4 class="ui header">Vertical Alignment</h4> |
|||
<p>A row can also specify its vertical alignment to have its columns vertically centered.</p> |
|||
<div class="ui three column grid"> |
|||
<div class="top aligned row"> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Cats |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
<div class="item"> |
|||
Poodle |
|||
</div> |
|||
<div class="item"> |
|||
Cockerspaniel |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Monkeys |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="middle aligned row"> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
<div class="item"> |
|||
Poodle |
|||
</div> |
|||
<div class="item"> |
|||
Cockerspaniel |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Monkeys |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="bottom aligned row"> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Cats |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
<div class="item"> |
|||
Poodle |
|||
</div> |
|||
<div class="item"> |
|||
Cockerspaniel |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Monkeys |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Columns</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Row Alignment (Floating)</h4> |
|||
<p>A column can be"floated", to either the left or right of its row.</p> |
|||
<div class="ui grid"> |
|||
<div class="left floated four wide column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Dogs |
|||
</div> |
|||
<div class="item"> |
|||
Poodle |
|||
</div> |
|||
<div class="item"> |
|||
Cockerspaniel |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right floated four wide column"> |
|||
<div class="ui vertical fluid menu"> |
|||
<div class="header item"> |
|||
Cats |
|||
</div> |
|||
<div class="item"> |
|||
Abysinnian |
|||
</div> |
|||
<div class="item"> |
|||
Sphynx |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Column Width</h4> |
|||
<p>A column can span across multiple grid columns.</p> |
|||
<div class="ui grid"> |
|||
<div class="three wide column"> |
|||
<div class="ui segment"><b>Colume One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.</div> |
|||
</div> |
|||
<div class="six wide column"> |
|||
<div class="ui segment"><b>Colume Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</div> |
|||
</div> |
|||
<div class="three wide column"> |
|||
<div class="ui segment"><b>Colume Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. </div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,918 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'menu' |
|||
|
|||
title : 'Menu' |
|||
type : 'UI Collection' |
|||
--- |
|||
<script src="/javascript/menu.js"></script> |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Menu</h1> |
|||
<p>A menu is a collection of interface elements usually showing several actions which a user can take</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Collection</a> |
|||
<a class="item">Elements</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Collection</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Menu</h4> |
|||
|
|||
<p>This example uses several menu elements to display the versatility of a menu collection.</p> |
|||
<div class="ui menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
<span class="ui label">22</span> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
<div class="right menu"> |
|||
<div class="fitted borderless item"> |
|||
<div class="ui input"><input type="text" placeholder="Search..."></div> |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
More <i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<a class="item"><i class="edit icon"></i> Edit Profile</a> |
|||
<a class="item"><i class="globe icon"></i> Choose Language</a> |
|||
<a class="item"><i class="settings icon"></i> Account Settings</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Vertical Menu</h4> |
|||
<p>A vertical menu can have its own sub menus. This example uses three levels of menu depth.</p> |
|||
<div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div> |
|||
|
|||
<div class="ui vertical menu"> |
|||
<a class="active item"> |
|||
<i class="users icon"></i> |
|||
Feed |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
<div class="item"> |
|||
<div class="ui input"><input type="text" placeholder="Search..."></div> |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
More <i class="icon right triangle"></i> |
|||
<div class="menu"> |
|||
<a class="item"><i class="edit icon"></i> Edit Profile</a> |
|||
<a class="item"><i class="globe icon"></i> Choose Language</a> |
|||
<a class="item"><i class="settings icon"></i> Account Settings</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Pagination</h4> |
|||
<p>A pagination menu is specially formatted to present links to pages of content</p> |
|||
<div class="ui pagination menu"> |
|||
<a class="icon item"> |
|||
<i class="icon left arrow"></i> |
|||
</a> |
|||
<a class="active item"> |
|||
1 |
|||
</a> |
|||
<div class="disabled item"> |
|||
... |
|||
</div> |
|||
<a class="item"> |
|||
10 |
|||
</a> |
|||
<a class="item"> |
|||
11 |
|||
</a> |
|||
<a class="item"> |
|||
12 |
|||
</a> |
|||
<a class="icon item"> |
|||
<i class="icon right arrow"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Tiered Menu</h4> |
|||
<p>A tiered menu can show the sub-sections available as part of an activated section.</p> |
|||
<div class="ui tiered menu"> |
|||
<div class="menu"> |
|||
<a class="active item"> |
|||
<i class="users icon"></i> |
|||
Friends |
|||
</a> |
|||
<a class="item"> |
|||
<i class="grid layout icon"></i> Browse |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<div class="right menu"> |
|||
<div class="fitted borderless item"> |
|||
<div class="ui input"><input type="text" placeholder="Search..."></div> |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
More <i class="icon dropdown"></i> |
|||
<div class="menu"> |
|||
<a class="item"><i class="edit icon"></i> Edit Profile</a> |
|||
<a class="item"><i class="globe icon"></i> Choose Language</a> |
|||
<a class="item"><i class="settings icon"></i> Account Settings</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui sub menu"> |
|||
<a class="active item">Search</a> |
|||
<a class="item">Add</a> |
|||
<a class="item">Remove</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Tiered Vertical Menu</h4> |
|||
<p>A tiered menu can show the sub-sections available as part of an activated section.</p> |
|||
<div class="ui vertical menu"> |
|||
<div class="item"> |
|||
<div class="ui input"><input type="text" placeholder="Search..."></div> |
|||
</div> |
|||
<div class="item"> |
|||
<i class="home icon"></i> Home |
|||
<div class="menu"> |
|||
<a class="active item">Search</a> |
|||
<a class="item">Add</a> |
|||
<a class="item">Remove</a> |
|||
</div> |
|||
</div> |
|||
<a class="item"> |
|||
<i class="grid layout icon"></i> Browse |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<div class="ui simple dropdown item"> |
|||
More <i class="icon right triangle"></i> |
|||
<div class="menu"> |
|||
<a class="item"><i class="edit icon"></i> Edit Profile</a> |
|||
<a class="item"><i class="globe icon"></i> Choose Language</a> |
|||
<a class="item"><i class="settings icon"></i> Account Settings</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Secondary Menu</h4> |
|||
<p>A secondary menu allows for a section of content on a page to be activated</p> |
|||
<div class="ui secondary menu"> |
|||
<a class="active item"> |
|||
<i class="users icon"></i> |
|||
Friends |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<p>A vertical secondary menu</p> |
|||
<div class="ui secondary vertical menu"> |
|||
<a class="active item"> |
|||
<i class="users icon"></i> |
|||
Friends |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
<div class="ui simple dropdown item"> |
|||
More <i class="icon right triangle"></i> |
|||
<div class="menu"> |
|||
<a class="item"><i class="edit icon"></i> Edit Profile</a> |
|||
<a class="item"><i class="globe icon"></i> Choose Language</a> |
|||
<a class="item"><i class="settings icon"></i> Account Settings</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Pointing</h4> |
|||
<p>A menu can point to content to show relationship</p> |
|||
<div class="ui pointing menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui secondary pointing menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<p>A pointing menu can also be vertical</p> |
|||
<div class="ui vertical pointing menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui secondary vertical pointing menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text</h4> |
|||
<p>A menu can display simple text links</p> |
|||
<div class="ui text menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<p>A vertical text menu</p> |
|||
<div class="ui vertical text menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Elements</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Header Item</h4> |
|||
<p>A menu may have a header to help label sections of a menu.</p> |
|||
<div class="ui vertical menu"> |
|||
<div class="header item"> |
|||
<i class="community icon"></i> |
|||
Communities |
|||
</div> |
|||
<div class="item"> |
|||
College |
|||
<div class="menu"> |
|||
<a class="item">Baseball</a> |
|||
<a class="item">Basketball</a> |
|||
<a class="item">Golf</a> |
|||
</div> |
|||
</div> |
|||
<a class="item"> |
|||
Dance |
|||
</a> |
|||
<a class="item"> |
|||
Aerobics |
|||
</a> |
|||
<div class="header item"> |
|||
<i class="globe icon"></i> |
|||
Cities |
|||
</div> |
|||
<a class="item"> |
|||
New York |
|||
</a> |
|||
<a class="item"> |
|||
Montreal |
|||
</a> |
|||
<a class="item"> |
|||
Los Angeles |
|||
</a> |
|||
<a class="item"> |
|||
San Francisco |
|||
</a> |
|||
<div class="header item"> |
|||
<i class="icon calendar"></i> |
|||
Months |
|||
</div> |
|||
<a class="item"> |
|||
August |
|||
</a> |
|||
<a class="item"> |
|||
June |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text Item</h4> |
|||
<p>A menu may have a simple text item.</p> |
|||
<div class="ui ignore info message"> |
|||
<p><i class="icon heart"></i> Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname <b>text</b></p> |
|||
</div> |
|||
<div class="ui vertical menu"> |
|||
<div class="header item">Current Offer <span class="ui teal label">Exclusive</span></div> |
|||
<div class="item"> |
|||
<p><a>Join now</a> and save $10 on a pro membership! </p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Link Item</h4> |
|||
<p>A menu may contain a link item, or an item formatted as if it is a link.</p> |
|||
|
|||
<div class="ui ignore info message"> |
|||
<p><i class="icon heart"></i> Items that are anchor tags will automatically be formatted as a link.</p> |
|||
</div> |
|||
<div class="ui vertical menu"> |
|||
<a href="http://www.google.com" class="item"> |
|||
Visit Google |
|||
</a> |
|||
<div class="link item"> |
|||
Javascript Link |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Dropdown Item</h4> |
|||
<p>An item may contain a nested menu in a dropdown.</p> |
|||
<div class="ui ignore warning message"> |
|||
<p><i class="icon heart"></i>Dropdowns use <a href="/modules/dropdown.html">UI dropdown elements</a>. To have a dropdown open without javascript, use the simple variation</p> |
|||
</div> |
|||
<div class="ui vertical menu"> |
|||
<div class="ui simple dropdown item"> |
|||
Categories <i class="icon right triangle"></i> |
|||
<div class="menu"> |
|||
<a class="item">Electronics</a> |
|||
<a class="item">Automotive</a> |
|||
<a class="item">Home</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Menu</h4> |
|||
<p>A menu may contain another menu group in the same level as menu items.</p> |
|||
<div class="ui menu"> |
|||
<a class="item">Browse</a> |
|||
<a class="item">Submit</a> |
|||
<div class="right menu"> |
|||
<a class="item">Sign Up</a> |
|||
<a class="item">Help</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Nested Menu</h4> |
|||
<p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p> |
|||
<div class="ui vertical menu"> |
|||
<a class="item"><b>Friends</b></a> |
|||
<div class="item"> |
|||
<a><b>Your Profile</b></a> |
|||
<div class="menu"> |
|||
<a class="item">Inbox</a> |
|||
<a class="item">Activity</a> |
|||
<a class="item">Groups</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Hover</h4> |
|||
<p>A menu item can be hovered</p> |
|||
<div class="ui ignore warning message"><i class="icon heart"></i> Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.</div> |
|||
<div class="ui compact menu"> |
|||
<div class="hover item"> |
|||
Link |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Down</h4> |
|||
<p>A menu item can be pressed in</p> |
|||
<div class="ui compact menu"> |
|||
<div class="down item"> |
|||
Link |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Active</h4> |
|||
<p>A menu item can be active</p> |
|||
<div class="ui compact menu"> |
|||
<div class="active item"> |
|||
Link |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<h3 class="ui header">Menu</h3> |
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A menu may have its colors inverted to show greater contrast</p> |
|||
<div class="ui inverted menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Colors</h4> |
|||
<p>Additional colors can be specified.</p> |
|||
<div class="ui menu"> |
|||
<a class="active green item"> |
|||
<i class="home icon"></i> Green |
|||
</a> |
|||
<a class="red item"> |
|||
<i class="mail icon"></i> Red |
|||
</a> |
|||
<a class="blue item"> |
|||
<i class="community icon"></i> Blue |
|||
</a> |
|||
<a class="orange item"> |
|||
<i class="home icon"></i> Orange |
|||
</a> |
|||
<a class="purple item"> |
|||
<i class="mail icon"></i> Purple |
|||
</a> |
|||
<a class="teal item"> |
|||
<i class="community icon"></i> Teal |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui red menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui blue menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui orange menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui purple menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui teal menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<p>These colors can also be inverted</p> |
|||
<div class="ui green inverted menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui red inverted menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui blue inverted menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui orange inverted menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui purple inverted menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
<br> |
|||
<div class="ui teal inverted menu"> |
|||
<a class="active item"> |
|||
<i class="home icon"></i> Home |
|||
</a> |
|||
<a class="item"> |
|||
<i class="mail icon"></i> Messages |
|||
</a> |
|||
<a class="item"> |
|||
<i class="community icon"></i> Browse |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icons</h4> |
|||
<p>A menu may have just icons</p> |
|||
<div class="ui icon menu"> |
|||
<a class="red item"> |
|||
<i class="mail icon"></i> |
|||
</a> |
|||
<a class="teal item"> |
|||
<i class="lab icon"></i> |
|||
</a> |
|||
<a class="green item"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui vertical icon menu"> |
|||
<a class="red item"> |
|||
<i class="mail icon"></i> |
|||
</a> |
|||
<a class="teal item"> |
|||
<i class="lab icon"></i> |
|||
</a> |
|||
<a class="green item"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icons</h4> |
|||
<p>A menu may have labeled icons</p> |
|||
<div class="ui labeled icon menu"> |
|||
<a class="red item"> |
|||
<i class="mail icon"></i> |
|||
Mail |
|||
</a> |
|||
<a class="teal item"> |
|||
<i class="lab icon"></i> |
|||
Lab |
|||
</a> |
|||
<a class="green item"> |
|||
<i class="star icon"></i> |
|||
Favorites |
|||
</a> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui vertical labeled icon menu"> |
|||
<a class="red item"> |
|||
<i class="mail icon"></i> |
|||
Mail |
|||
</a> |
|||
<a class="teal item"> |
|||
<i class="lab icon"></i> |
|||
Lab |
|||
</a> |
|||
<a class="green item"> |
|||
<i class="star icon"></i> |
|||
Favorites |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fluid</h4> |
|||
<p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p> |
|||
<div class="ui fluid vertical menu"> |
|||
<a class="item">Run</a> |
|||
<a class="item">Walk</a> |
|||
<a class="item">Bike</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Evenly sized items</h4> |
|||
<p>A menu may divide its items evenly</p> |
|||
<div class="ui fluid three item menu"> |
|||
<a class="item">Buy</a> |
|||
<a class="item">Sell</a> |
|||
<a class="item">Rent</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<p>A vertical menu can point to content adjacent to itself to show ownership</p> |
|||
<div class="ui pointing vertical menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="item"> |
|||
<a>Current section</a> |
|||
</div> |
|||
<div class="item"> |
|||
<a>Grouped Section</a> |
|||
<div class="menu"> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="active item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
</div> |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown <i class="icon right triangle"></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> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Attached</h4> |
|||
<p>A menu may be attached to other content segments</p> |
|||
<div class="ui top attached pointing menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
Current section |
|||
</div> |
|||
<div class="right menu"> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown <i class="icon dropdown"></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> |
|||
<div class="ui bottom attached segment"> |
|||
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Horizontal Sizes</h4> |
|||
<p>A horizontal menu can vary in size</p> |
|||
<div class="ui large menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
Current section |
|||
</div> |
|||
<div class="item"> |
|||
<a>Another section</a> |
|||
</div> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui small menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
Current section |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown <i class="icon dropdown"></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> |
|||
<div class="example"> |
|||
<p>A vertical menu can also vary in size</p> |
|||
<div class="ui large vertical menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
Current section |
|||
</div> |
|||
<div class="item"> |
|||
<a>Grouped Section</a> |
|||
<div class="menu"> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
</div> |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown <i class="icon right triangle"></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> |
|||
<br><br> |
|||
<div class="ui small vertical menu"> |
|||
<div class="item"> |
|||
Site Title |
|||
</div> |
|||
<div class="active item"> |
|||
Current section |
|||
</div> |
|||
<div class="item"> |
|||
<a>Grouped Section</a> |
|||
<div class="menu"> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
<a class="item">Subsection 1</a> |
|||
</div> |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown <i class="icon right triangle"></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> |
|||
|
|||
<h3 class="ui header">Items</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fitted</h4> |
|||
<p>A menu item or menu might be fitted to remove element padding</p> |
|||
<div class="ui menu"> |
|||
<div class="fitted item"> |
|||
No vertical padding |
|||
</div> |
|||
<div class="tight item"> |
|||
No padding at all |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Borderless</h4> |
|||
<p>A menu item or menu might might have no dividers</p> |
|||
<div class="ui borderless menu"> |
|||
<div class="item"> |
|||
<i class="icon left arrow"></i> Previous |
|||
</div> |
|||
<div class="item">1</div> |
|||
<div class="item">2</div> |
|||
<div class="item">3</div> |
|||
<div class="item">4</div> |
|||
<div class="item">5</div> |
|||
<div class="item">6</div> |
|||
<div class="item"> |
|||
Next <i class="icon right arrow"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,241 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'text' |
|||
|
|||
title : 'Message' |
|||
type : 'UI Collection' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Message</h1> |
|||
<p>Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text Block</h4> |
|||
<p>A basic message</p> |
|||
<div class="ui message"> |
|||
<div class="header"> |
|||
Welcome back! |
|||
</div> |
|||
<p> |
|||
It's good to see you again. I have had a lot to think about since our last visit, I've changed much as a person and I can see that you have too. |
|||
</p> |
|||
<p> |
|||
Perhaps we can talk about it if you have the time. |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">List Block</h4> |
|||
<p>A message with a list</p> |
|||
<div class="ui message"> |
|||
<div class="header"> |
|||
Welcome back! |
|||
</div> |
|||
<ul class="list"> |
|||
<li>It's good to see you again.</li> |
|||
<li>Did you know it's been a while?</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Dismissable Block</h4> |
|||
<p>A message that the user can choose to hide</p> |
|||
<div class="ui message"> |
|||
<i class="icon close"></i> |
|||
<div class="header"> |
|||
Welcome back! |
|||
</div> |
|||
<ul class="list"> |
|||
<li>It's good to see you again.</li> |
|||
<li>Did you know it's been a while?</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<h4 class="ui header">Hidden</h4> |
|||
<p>Text Blocks can be hidden</p> |
|||
<div class="ui hidden message"> |
|||
<p>You can't see me</p> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Visible</h4> |
|||
<p>Text Blocks can be set to visible if they need to force themselves to be shown.</p> |
|||
<div class="ui visible message"> |
|||
<p>You can always see me</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icon</h4> |
|||
<p>A message can contain an icon.</p> |
|||
<div class="ui icon message"> |
|||
<i class="icon cloud"></i> |
|||
<div class="content"> |
|||
<div class="header"> |
|||
Have you heard about our mailing list? |
|||
</div> |
|||
<p>Get all the best inventions in your e-mail every day. Sign up now!</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Compact</h4> |
|||
<p>A message that only takes up the width of its content.</p> |
|||
<div class="ui compact message"> |
|||
<p>Get all the best inventions in your e-mail every day. Sign up now!</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Attached</h4> |
|||
<p>A message can be formatted to attach itself to content</p> |
|||
<div class="ui attached message"> |
|||
<div class="header"> |
|||
Have you heard about our mailing list? |
|||
</div> |
|||
<p>Get all the best inventions in your e-mail every day. Sign up now!</p> |
|||
</div> |
|||
<form class="ui form attached fluid segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" id="terms" /> |
|||
<label for="terms"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</form> |
|||
<div class="ui bottom attached info message"> |
|||
<i class="icon help"></i>Are you sure you know what you're doing? |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Colored</h4> |
|||
<p>A message can be formatted to be different colors</p> |
|||
<div class="ui red message">Red</div> |
|||
<div class="ui blue message">Blue</div> |
|||
<div class="ui green message">Green</div> |
|||
<div class="ui yellow message">Yellow</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Warning</h4> |
|||
<p>A message may be formatted to display warning messages.</p> |
|||
<div class="ui warning message"> |
|||
<i class="icon close"></i> |
|||
<div class="header"> |
|||
You must register before you can do that! |
|||
</div> |
|||
Visit our registration page, then try again |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Info</h4> |
|||
<p>A message may be formatted to display information.</p> |
|||
<div class="ui info message"> |
|||
<i class="icon close"></i> |
|||
<div class="header"> |
|||
Was this what you wanted? |
|||
</div> |
|||
<ul class="list"> |
|||
<li>It's good to see you again.</li> |
|||
<li>Did you know it's been a while?</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Success</h4> |
|||
<p>A message may be formatted to display a success message.</p> |
|||
<div class="ui success message"> |
|||
<i class="icon close"></i> |
|||
<div class="header"> |
|||
Congratulations, you are now a member! |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Error</h4> |
|||
<p>A message may be formatted to display errors.</p> |
|||
<div class="ui error message"> |
|||
<i class="icon close"></i> |
|||
<div class="header"> |
|||
Was this what you wanted? |
|||
</div> |
|||
<ul class="list"> |
|||
<li>It's good to see you again.</li> |
|||
<li>Did you know it's been a while?</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Sizes</h4> |
|||
<p>A message can have different sizes</p> |
|||
<div class="ui small message"> |
|||
This is a very small message. |
|||
</div> |
|||
<div class="ui large message"> |
|||
This is large |
|||
</div> |
|||
<div class="ui huge message"> |
|||
This is huge |
|||
</div> |
|||
<div class="ui massive message"> |
|||
This is massive |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,599 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'table' |
|||
|
|||
title : 'Table' |
|||
type : 'UI Collection' |
|||
--- |
|||
<script src="/javascript/library/tablesort.js"></script> |
|||
<script src="/javascript/table.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Tables</h1> |
|||
<p>Tables display collections of data grouped into rows.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Table</h4> |
|||
<p>A standard table</p> |
|||
<div class="ui info message"> |
|||
<p>This example uses a <a href="/elements/segment.html">ui segment</a> and to add padding and a background color. This is not required.</p> |
|||
</div> |
|||
<table class="ui sortable table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th colspan="3"> |
|||
<div class="ui small blue labeled icon button"><i class="icon add user"></i> Add User</div> |
|||
</th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Positive / Negative</h4> |
|||
<p>A cell may let a user know whether a value is good or bad:</p> |
|||
<table class="ui table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>No Name Specified</td> |
|||
<td>Unknown</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr class="positive"> |
|||
<td>Jimmy</td> |
|||
<td><i class="icon check"></i> Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Unknown</td> |
|||
<td class="negative"><i class="icon close"></i> Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Unknown</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Cells</h3> |
|||
<div class="example"> |
|||
<h4 class="ui header">Error</h4> |
|||
<p>A cell or row may alert the user to an error or a negative value:</p> |
|||
<table class="ui table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>No Name Specified</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr class="error"> |
|||
<td>Jimmy</td> |
|||
<td>Cannot pull data</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td class="error"><i class="attention circle icon"></i> Classified</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Warning</h4> |
|||
<p>A cell or row may warn a user:</p> |
|||
<table class="ui table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>No Name Specified</td> |
|||
<td>Unknown</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr class="warning"> |
|||
<td>Jimmy</td> |
|||
<td><i class="icon info"></i> Requires Action</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Unknown</td> |
|||
<td class="warning"><i class="icon info"></i> Hostile</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Unknown</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Active</h4> |
|||
<p>A cell or row can be active:</p> |
|||
<table class="ui table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr class="active"> |
|||
<td>John</td> |
|||
<td>Selected</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="active">Jill</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A cell can be disabled:</p> |
|||
<table class="ui table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr class="disabled"> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Selected</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="disabled">Jill</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Table</h4> |
|||
<p>A basic table</p> |
|||
<table class="ui basic table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Even Width</h4> |
|||
<p>A table can specify its column count to divide its content evenly</p> |
|||
<table class="ui five column table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Age</th> |
|||
<th>Gender</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>22</td> |
|||
<td>Male</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>32</td> |
|||
<td>Male</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>22</td> |
|||
<td>Female</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
<th></th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Collapsing</h4> |
|||
<p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p> |
|||
<table class="ui collapsing table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A tables colors can be inverted</p> |
|||
<table class="ui inverted segment table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Cells</h4> |
|||
<p>A table may be divided each row into separate cells</p> |
|||
<table class="ui celled table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Sortable</h4> |
|||
<p>A table may allow a user to sort contents by clicking on a table header.</p> |
|||
|
|||
<p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p> |
|||
|
|||
<table class="ui sortable table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>No Action</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td class="positive">Approved</td> |
|||
<td class="warning">Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td class="negative">Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Padded</h4> |
|||
<p>A table may sometimes need to be more padded for legibility</p> |
|||
<table class="ui padded table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Jamie was not interested in purchasing our product.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Compact</h4> |
|||
<p>A table may sometimes need to be more compact to make more rows visible at a time</p> |
|||
<table class="ui compact table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>A table can also be small or large</p> |
|||
<table class="ui small table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
<div class="another example"> |
|||
<h4 class="ui header">Large</h4> |
|||
<table class="ui large table segment"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>Approved</td> |
|||
<td>None</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Approved</td> |
|||
<td>Requires call</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Denied</td> |
|||
<td>None</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot> |
|||
<th>3 People</th> |
|||
<th>2 Approved</th> |
|||
<th></th> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,20 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'download' |
|||
|
|||
title : 'Download' |
|||
type : 'Library' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Download</h1> |
|||
<p>Download semantic</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,222 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'element' |
|||
|
|||
title : 'UI Elements' |
|||
type : 'Semantic' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">UI Element</h1> |
|||
<p>UI elements are the basic building blocks of a website. They help to structure content so that information, and possible user interactions on a website are more intuitive.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Definition</a> |
|||
<a class="item">Types</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Definition</h2> |
|||
<p>UI Elements are the smallest useful unit for describing page content, and do not contain other elements inside themselves.</p> |
|||
|
|||
<h3 class="ui header">Plurality</h3> |
|||
<p>Element usually exist by themselves, but they my also be grouped together with other elements of their kind. This forms a plural definition of an element.</p> |
|||
<p>The look and feel of the plural may change to show a relationship, and plural definitions can often share many of the same variations as singular definitions.</p> |
|||
|
|||
<div class="ui segment"> |
|||
<h4 class="ui header">Groups</h4> |
|||
<p>The plural of button is "buttons" a button wrapped inside "buttons" will automatically apply styling appropriate for a group. Many button variations can be used on plural definitions just like they would be used in singular.</p> |
|||
<p>For example, in this case each button will be large because we understand it is a part of the large button group, but the continue button has its own variations applied as well.</p> |
|||
<div class="ui simple ignored divider"></div> |
|||
<div class="large ui buttons"> |
|||
<div class="ui secondary button">Cancel</div> |
|||
<div class="ui teal button">Continue <i class="icon right arrow"></i></div> |
|||
</div> |
|||
<br> |
|||
<div class="code"> |
|||
<div class="large ui buttons"> |
|||
<div class="ui secondary button">Cancel</div> |
|||
<div class="ui teal button">Continue <i class="icon right arrow"></i></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
<div class="ui two type items"> |
|||
|
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui teal labeled icon button"> |
|||
<i class="icon user add"></i>Follow |
|||
</div> |
|||
<br><br> |
|||
<div class="ui black icon buttons"> |
|||
<div class="ui button"><i class="icon user add"></i></div> |
|||
<div class="ui button"><i class="icon user"></i></div> |
|||
<div class="ui button"><i class="icon community"></i></div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="elements/button.html" class="name">Button</a> |
|||
<p>A button indicates a possible user action.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<h2 class="ui blue block header"> |
|||
Section 2 |
|||
<div class="sub header">The second section of the website</div> |
|||
</h2> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="elements/label.html" class="name">Header</a> |
|||
<p>Headers provide a short summary of content</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui red active progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="elements/progress.html" class="name">Progress Bar</a> |
|||
<p>A progress bar displays progress on a task</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui inverted stacked segment"> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="elements/segment.html" class="name">Segment</a> |
|||
<p>A segment is used to create a grouping of related content.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<div class="ui four fluid steps"> |
|||
<div class="ui step"> |
|||
First |
|||
</div> |
|||
<div class="ui active step"> |
|||
Second |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Third |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Last |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="elements/step.html" class="name">Step</a> |
|||
<p>Steps show the current activity in a series of steps.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
<i class="icon pie chart"></i> |
|||
<i class="icon date"></i> |
|||
<i class="icon doc"></i> |
|||
<i class="icon docs"></i> |
|||
<i class="icon email"></i> |
|||
<i class="icon folder"></i> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
<i class="icon pie chart"></i> |
|||
<i class="icon date"></i> |
|||
<i class="icon doc"></i> |
|||
<i class="icon docs"></i> |
|||
<i class="icon email"></i> |
|||
<i class="icon folder"></i> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
<i class="icon pie chart"></i> |
|||
<i class="icon date"></i> |
|||
<i class="icon doc"></i> |
|||
<i class="icon docs"></i> |
|||
<i class="icon email"></i> |
|||
<i class="icon folder"></i> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
<i class="icon pie chart"></i> |
|||
<i class="icon date"></i> |
|||
<i class="icon doc"></i> |
|||
<i class="icon docs"></i> |
|||
<i class="icon email"></i> |
|||
<i class="icon folder"></i> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
<i class="icon pie chart"></i> |
|||
<i class="icon date"></i> |
|||
<i class="icon doc"></i> |
|||
<i class="icon docs"></i> |
|||
<i class="icon email"></i> |
|||
<i class="icon folder"></i> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
<i class="icon pie chart"></i> |
|||
<i class="icon date"></i> |
|||
<i class="icon doc"></i> |
|||
<i class="icon docs"></i> |
|||
<i class="icon email"></i> |
|||
<i class="icon folder"></i> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
<i class="icon pie chart"></i> |
|||
<i class="icon date"></i> |
|||
<i class="icon doc"></i> |
|||
<i class="icon docs"></i> |
|||
<i class="icon email"></i> |
|||
<i class="icon folder"></i> |
|||
<i class="icon bookmark"></i> |
|||
<i class="icon cart"></i> |
|||
<i class="icon chart"></i> |
|||
<i class="icon bar chart"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="elements/icon.html" class="name">Icon</a> |
|||
<p>An icon is a glyph used to represent another concept more simply</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
</div> |
|||
<div class="content"> |
|||
<a href="elements/label.html" class="name">Label</a> |
|||
<p>Labels give descriptions to sections of content.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,317 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'button' |
|||
title : 'Button' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<script src="/javascript/button.js"></script> |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header"> |
|||
Button |
|||
<div class="sub header">Buttons indicate a possible user action.</div> |
|||
</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">Groups</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Basic:</h4> |
|||
<p>A standard button</p> |
|||
<div class="ui button"><i class="icon add user"></i> Follow</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icon</h4> |
|||
<p>Icon only button</p> |
|||
<div class="ui icon button"> |
|||
<i class="icon cloud"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Labeled Icon</h4> |
|||
<p>An icon and a label</p> |
|||
<div class="ui labeled icon button"> |
|||
<i class="icon pause"></i> Pause |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Hover</h4> |
|||
<p>Changes when a user moves their cursor over it</p> |
|||
<div class="ui hover button"><i class="icon add user"></i> Follow</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Down</h4> |
|||
<p>Changes when pressed using touch or mouse events</p> |
|||
<div class="ui down button"><i class="icon add user"></i> Follow</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Active</h4> |
|||
<p>Changes to show it is currently the selected user action</p> |
|||
<div class="ui active button"><i class="icon add user"></i> Follow</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>Changes to show it is currently unable to be interacted with</p> |
|||
<div class="ui disabled button"><i class="icon add user"></i> Followed</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Loading</h4> |
|||
<p>Can show a loading indicator:</p> |
|||
<div class="ui loading button">Loading Button</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Success</h4> |
|||
<p>Can alert to a succesful action:</p> |
|||
<div class="ui success button"> |
|||
<i class="icon add user"></i> Follow User |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Error</h4> |
|||
<p>Can alert user of an error:</p> |
|||
<div class="ui error button"> |
|||
<i class="icon add user"></i> |
|||
Follow User |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Ordinality</h4> |
|||
<p>A button can be formatted to appear more or less noticable</p> |
|||
<div class="ui secondary button"><i class="icon user"></i> Add Friend</div> |
|||
<div class="ui secondary teal button"><i class="icon desk globe"></i>Change Language</div> |
|||
<div class="ui secondary purple button">Secondary</div> |
|||
<div class="ui secondary red button">Secondary</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<h4 class="ui header">Tertiary</h4> |
|||
<div class="ui tertiary teal button">Tertiary</div> |
|||
<div class="ui tertiary purple button">Tertiary</div> |
|||
<div class="ui tertiary red button">Tertiary</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Sizes</h4> |
|||
<p>Can have different sizes:</p> |
|||
<div class="mini ui button"> |
|||
Mini |
|||
</div> |
|||
<div class="tiny ui button"> |
|||
Tiny |
|||
</div> |
|||
<div class="small ui button"> |
|||
Small |
|||
</div> |
|||
<div class="medium ui button"> |
|||
Medium |
|||
</div> |
|||
<div class="large ui button"> |
|||
Large |
|||
</div> |
|||
<div class="big ui button"> |
|||
Big |
|||
</div> |
|||
<div class="huge ui button"> |
|||
Huge |
|||
</div> |
|||
<div class="massive ui button"> |
|||
Massive |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Colors</h4> |
|||
<p>Can have different colors:</p> |
|||
<a class="ui black button">Black Button</a> |
|||
<a class="ui green button">Green BUtton</a> |
|||
<a class="ui red button">Red Button</a> |
|||
<a class="ui blue button">Blue Button</a> |
|||
<br><br> |
|||
<a class="ui purple button">Purple Button</a> |
|||
<a class="ui teal button">Teal Button</a> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Toggle</h4> |
|||
<p>Can be formatted to toggle on and off</p> |
|||
<div class="ui toggle button"> |
|||
Vote |
|||
</div> |
|||
</div> |
|||
|
|||
<h4 class="ui header">Feedback</h4> |
|||
<div class="example"> |
|||
<p>Can be positive or negative:</p> |
|||
<div class="positive ui button">Positive Button</div> |
|||
<div class="negative ui button">Negative Button</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fluid</h4> |
|||
<p>Can fit parent container:</p> |
|||
<div class="fluid ui button">Fits container</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Circular</h4> |
|||
<p>Can be circular:</p> |
|||
<div class="circular ui button">Rounded</div> |
|||
<div class="circular ui icon button"><i class="icon settings"></i></div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Vertically Attached</h4> |
|||
<p>Can be attached to the top or bottom of other content</p> |
|||
<div class="ui top attached button">Top</div> |
|||
<div class="ui attached segment"></div> |
|||
<div class="bottom attached ui button">Bottom</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Horizontally Attached</h4> |
|||
<p>Can be attached to the left or right of other content</p> |
|||
<div class="ui left attached button">Left</div> |
|||
<div class="right attached ui button">Right</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Groups</h2> |
|||
|
|||
<h3 class="ui header">Types</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Buttons</h4> |
|||
<p>Can exist together as groups</p> |
|||
<div class="ui buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Conditionals</h4> |
|||
<p>Groups can be separated by conditionals</p> |
|||
<div class="ui buttons"> |
|||
<div class="ui button">Cancel</div> |
|||
<div class="or"></div> |
|||
<div class="ui positive button">Save</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Plural Variations</h3> |
|||
<p>Singular variations can be applied to groups to infer all elements share the same quality</p> |
|||
|
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Vertical</h4> |
|||
<p>Groups can be formatted to appear vertically</p> |
|||
<div class="ui vertical buttons"> |
|||
<div class="ui button">Top</div> |
|||
<div class="ui button">Middle</div> |
|||
<div class="ui button">Bottom</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icon</h4> |
|||
<p>Groups can be formatted as icons</p> |
|||
<div class="ui icon buttons"> |
|||
<div class="ui button"><i class="icon pause"></i></div> |
|||
<div class="ui button"><i class="icon play"></i></div> |
|||
<div class="ui button"><i class="icon shuffle"></i></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Labeled Icon</h4> |
|||
<p>Groups can be formatted as labeled icons</p> |
|||
<div class="ui vertical labeled icon buttons"> |
|||
<div class="ui button"><i class="icon pause"></i> Pause</div> |
|||
<div class="ui button"><i class="icon play"></i> Play</div> |
|||
<div class="ui button"><i class="icon shuffle"></i> Shuffle</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fluid</h4> |
|||
<p>Groups can be divided evenly to fit parent</p> |
|||
<div class="five fluid ui buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
<div class="ui button">Four</div> |
|||
<div class="ui button">Five</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Colors</h4> |
|||
<p>Groups can have a shared color</p> |
|||
<div class="blue ui buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Ordinality</h4> |
|||
<p>A button can be formatted to appear more or less noticable</p> |
|||
<div class="ui teal secondary buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="another example"> |
|||
<div class="ui red tertiary buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Sizes</h4> |
|||
<p>Groups can have a shared size</p> |
|||
<div class="large ui buttons"> |
|||
<div class="ui button">One</div> |
|||
<div class="ui button">Two</div> |
|||
<div class="ui button">Three</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,132 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'divider' |
|||
title : 'Divider' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Divider</h1> |
|||
<p>A divider visually segments content into separate groups</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Divider</h4> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui divider"></div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Vertical Divider</h4> |
|||
<p>A divider can segment content vertically</p> |
|||
<div class="ui two column middle aligned grid basic segment"> |
|||
<div class="column"> |
|||
<div class="ui form segment"> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<div class="ui labeled icon input"> |
|||
<input type="password" placeholder="Username"> |
|||
<i class="user icon"></i> |
|||
<div class="ui corner label"> |
|||
<i class="asterisk icon"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<div class="ui labeled icon input"> |
|||
<input type="password"> |
|||
<i class="lock icon"></i> |
|||
<div class="ui corner label"> |
|||
<i class="asterisk icon"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui blue submit button">Login</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui vertical divider"> |
|||
Or |
|||
</div> |
|||
<div class="center aligned column"> |
|||
<div class="huge green ui labeled icon button"> |
|||
<i class="icon check"></i> |
|||
Sign Up |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Horizontal Divider</h4> |
|||
<p>A divider can segment content horizontally</p> |
|||
<h3 class="ui header">Retrieve Order</h3> |
|||
<div class="ui form secondary segment"> |
|||
<div class="field"> |
|||
<label>Lookup Order</label> |
|||
<div class="ui left labeled icon input"> |
|||
<i class="search icon"></i> |
|||
<input type="text" placeholder="Order #"> |
|||
</div> |
|||
</div> |
|||
<div class="ui blue submit button">Search</div> |
|||
</div> |
|||
<div class="ui horizontal divider"> |
|||
Or |
|||
</div> |
|||
<div class="teal ui right labeled icon button"> |
|||
Create New Order |
|||
<i class="right arrow icon"></i> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A divider can have its colors inverted</p> |
|||
<div class="ui inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui inverted divider"></div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fitted</h4> |
|||
<p>A divider can be fitted, without any padding above or below it.</p> |
|||
<div class="ui segment"> |
|||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. |
|||
<div class="ui fitted divider"></div> |
|||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Clearing</h4> |
|||
<p>A divider can clear the contents above it</p> |
|||
<div class="ui segment"> |
|||
<h2 class="ui left floated header">Left Header</h2> |
|||
<h2 class="ui right floated header">Right Header</h2> |
|||
<div class="ui clearing divider"></div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,301 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'header' |
|||
title : 'Header' |
|||
type : 'UI Element' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Header</h1> |
|||
<p>Headers provide a short summary of content</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Header</h4> |
|||
<p>A simple header</p> |
|||
<div class="ui segment"> |
|||
<h2 class="ui header"> |
|||
Account Settings |
|||
</h2> |
|||
<p>Welcome to your account settings, here you can change your e-mail preferences and other settings related to your account. If you have any issues with your account please feel free to e-mail us at <a>mail@mail.com</a>. Thanks and have a wonderful day</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Descriptive Headers</h4> |
|||
<p>Headers may have sub headers containing further context to the section</p> |
|||
|
|||
<div class="ui segment"> |
|||
<h2 class="ui header"> |
|||
<i class="settings icon"></i> Account Settings |
|||
<div class="sub header">Manage your account settings and set e-mail preferences.</div> |
|||
</h2> |
|||
<p>Welcome to your account settings, here you can change your e-mail preferences and other settings related to your account. If you have any issues with your account please feel free to e-mail us at <a>mail@mail.com</a>. Thanks and have a wonderful day</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Page Headings</h4> |
|||
<p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p> |
|||
<div class="ui segment"> |
|||
<h1 class="ui header">First header</h1> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<h2 class="ui header">Second header</h2> |
|||
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> |
|||
<h3 class="ui header">Third header</h3> |
|||
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p> |
|||
<h4 class="ui header">Fourth header</h4> |
|||
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> |
|||
<h5 class="ui header">Fifth header</h5> |
|||
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p> |
|||
</div> |
|||
<div class="ui secondary font menu"> |
|||
<a class="increase item"> <i class="icon green plus"></i> Base Font</a> |
|||
<a class="decrease item"> <i class="icon red minus"></i> Base Font</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Content Headings</h4> |
|||
<p>Headers may be oriented to give the importance of a section in the context of the content that surrounds it</p> |
|||
<div class="ui segment"> |
|||
<div class="ui huge header">Huge Header</div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui large header">Large Header</div> |
|||
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> |
|||
<div class="ui medium header">Medium Header</div> |
|||
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p> |
|||
<div class="ui small header">Small Header</div> |
|||
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> |
|||
<div class="ui tiny header">Tiny Header</div> |
|||
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p> |
|||
</div> |
|||
<div class="ui secondary font menu"> |
|||
<a class="increase item"> <i class="icon green plus"></i> Base Font</a> |
|||
<a class="decrease item"> <i class="icon red minus"></i> Base Font</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A header can show that it is inactive</p> |
|||
<div class="ui disabled header"> |
|||
Disabled Header |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icon</h4> |
|||
<p>A header can be formatted to emphasize an icon</p> |
|||
<div class="ui icon header"> |
|||
<i class="icon sketchy question circle"></i>Questions |
|||
<div class="sub header">Have any questions? Contact Us |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Attached</h4> |
|||
<p>A header can be attached to other content</p> |
|||
<h3 class="ui top attached header"> |
|||
Sign Up For Our Site |
|||
</h3> |
|||
<div class="ui segment attached"> |
|||
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p> |
|||
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p> |
|||
</div> |
|||
<h3 class="ui bottom attached header"> |
|||
Thanks |
|||
</h3> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Floating</h4> |
|||
<p>A header can sit to the left or right of other content</p> |
|||
<div class="ui segment"> |
|||
<h3 class="ui right floated header"> |
|||
Go Forward |
|||
</h3> |
|||
<h3 class="ui left floated header"> |
|||
Go Back |
|||
</h3> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Text Alignment</h4> |
|||
<p>A header can have its text aligned to a side</p> |
|||
<div class="ui segment"> |
|||
<h3 class="ui right aligned header"> |
|||
Right |
|||
</h3> |
|||
<h3 class="ui left aligned header"> |
|||
Left |
|||
</h3> |
|||
<h3 class="ui center aligned header"> |
|||
Center |
|||
</h3> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Colors</h4> |
|||
<p>A header can be formatted with different colors</p> |
|||
<h5 class="ui black header"> |
|||
Black |
|||
</h5> |
|||
<h5 class="ui blue header"> |
|||
Blue |
|||
</h5> |
|||
<h5 class="ui red header"> |
|||
Red |
|||
</h5> |
|||
<h5 class="ui green header"> |
|||
Green |
|||
</h5> |
|||
<h5 class="ui purple header"> |
|||
Purple |
|||
</h5> |
|||
<h5 class="ui teal header"> |
|||
Teal |
|||
</h5> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Dividing</h4> |
|||
<p>A header can be formatted to divide itself from the content below it</p> |
|||
<h5 class="ui black dividing header"> |
|||
Black |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui blue dividing header"> |
|||
Blue |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui red dividing header"> |
|||
Red |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui green dividing header"> |
|||
Green |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui purple dividing header"> |
|||
Purple |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui teal dividing header"> |
|||
Teal |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Block</h4> |
|||
<p>A header can be formatted to create a block</p> |
|||
<h5 class="ui black block header"> |
|||
Black |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui blue block header"> |
|||
Blue |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui red block header"> |
|||
Red |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui green block header"> |
|||
Green |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui purple block header"> |
|||
Purple |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h5 class="ui teal block header"> |
|||
Teal |
|||
</h5> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
</div> |
|||
<div class="another example"> |
|||
<h3 class="ui black inverted block header"> |
|||
Black |
|||
</h3> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h3 class="ui blue inverted block header"> |
|||
Blue |
|||
</h3> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h3 class="ui red inverted block header"> |
|||
Red |
|||
</h3> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h3 class="ui green inverted block header"> |
|||
Green |
|||
</h3> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h3 class="ui purple inverted block header"> |
|||
Purple |
|||
</h3> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
|
|||
<h3 class="ui teal inverted block header"> |
|||
Teal |
|||
</h3> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A header can have its colors inverted for contrast</p> |
|||
<h5 class="ui inverted black header"> |
|||
Black |
|||
</h5> |
|||
<h5 class="ui inverted blue header"> |
|||
Blue |
|||
</h5> |
|||
<h5 class="ui inverted red header"> |
|||
Red |
|||
</h5> |
|||
<h5 class="ui inverted green header"> |
|||
Green |
|||
</h5> |
|||
<h5 class="ui inverted purple header"> |
|||
Purple |
|||
</h5> |
|||
<h5 class="ui inverted teal header"> |
|||
Teal |
|||
</h5> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,289 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'icon' |
|||
title : 'Icon' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Icon</h1> |
|||
<p>An icon is a glyph used to represent another concept more simply.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<h4 class="ui header">Icon Set</h4> |
|||
<p>Icon sets contain an arbitrary number of icons</p> |
|||
<div class="ui ignored warning message"> |
|||
Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text. |
|||
</div> |
|||
|
|||
|
|||
<div class="another icon example"> |
|||
<div class="ui green message"> |
|||
This icon set was built using a custom combination of fonts using the amazing web tool <a href="http://fontello.com/">Fontello</a> |
|||
</div> |
|||
|
|||
<h4 class="ui header">Content</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon attachment"></i> Attachment</div> |
|||
<div class="column"><i class="icon barcode"></i> Barcode</div> |
|||
<div class="column"><i class="icon bookmark"></i> Bookmark</div> |
|||
<div class="column"><i class="icon cart"></i> Cart</div> |
|||
<div class="column"><i class="icon chart"></i> Chart</div> |
|||
<div class="column"><i class="icon bar chart"></i> Bar chart</div> |
|||
<div class="column"><i class="icon pie chart"></i> Pie chart</div> |
|||
<div class="column"><i class="icon date"></i> Date</div> |
|||
<div class="column"><i class="icon doc"></i> Doc</div> |
|||
<div class="column"><i class="icon docs"></i> Docs</div> |
|||
<div class="column"><i class="icon email"></i> Email</div> |
|||
<div class="column"><i class="icon folder"></i> Folder</div> |
|||
<div class="column"><i class="icon open folder"></i> Open folder</div> |
|||
<div class="column"><i class="icon home"></i> Home</div> |
|||
<div class="column"><i class="icon mail"></i> Mail</div> |
|||
<div class="column"><i class="icon photo"></i> Photo</div> |
|||
<div class="column"><i class="icon photos"></i> Photos</div> |
|||
<div class="column"><i class="icon search"></i> Search</div> |
|||
<div class="column"><i class="icon setting"></i> Setting</div> |
|||
<div class="column"><i class="icon settings"></i> Settings</div> |
|||
<div class="column"><i class="icon tag"></i> Tag</div> |
|||
<div class="column"><i class="icon tags"></i> Tags</div> |
|||
<div class="column"><i class="icon time"></i> Time</div> |
|||
<div class="column"><i class="icon top list"></i> Top list</div> |
|||
<div class="column"><i class="icon trash"></i> Trash</div> |
|||
<div class="column"><i class="icon community"></i> Community</div> |
|||
<div class="column"><i class="icon url"></i> URL</div> |
|||
<div class="column"><i class="icon user"></i> User</div> |
|||
<div class="column"><i class="icon users"></i> Users</div> |
|||
<div class="column"><i class="icon chat"></i> Chat</div> |
|||
</div> |
|||
</div> |
|||
<div class="another icon example"> |
|||
<h4 class="ui header">Special Content</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon trophy"></i> Trophy</div> |
|||
<div class="column"><i class="icon cloud"></i> Cloud</div> |
|||
<div class="column"><i class="icon flight"></i> Flight</div> |
|||
<div class="column"><i class="icon gift"></i> Gift</div> |
|||
<div class="column"><i class="icon dollar"></i> Dollar</div> |
|||
<div class="column"><i class="icon lab"></i> Lab</div> |
|||
<div class="column"><i class="icon rss"></i> RSS</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="another icon example"> |
|||
<h4 class="ui header">User Actions</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon add user"></i> Add User</div> |
|||
<div class="column"><i class="icon block"></i> Block</div> |
|||
<div class="column"><i class="icon hide"></i> Hide</div> |
|||
<div class="column"><i class="icon unhide"></i> Unhide</div> |
|||
<div class="column"><i class="icon lock"></i> Lock</div> |
|||
<div class="column"><i class="icon unlock"></i> Unlock</div> |
|||
<div class="column"><i class="icon flag"></i> Flag</div> |
|||
<div class="column"><i class="icon cancel"></i> Cancel</div> |
|||
<div class="column"><i class="icon close"></i> Close</div> |
|||
<div class="column"><i class="icon close"></i> Delete</div> |
|||
<div class="column"><i class="icon check"></i> Check</div> |
|||
<div class="column"><i class="icon edit"></i> Edit</div> |
|||
<div class="column"><i class="icon open"></i> Open</div> |
|||
<div class="column"><i class="icon export"></i> Export</div> |
|||
<div class="column"><i class="icon forward"></i> Forward</div> |
|||
<div class="column"><i class="icon upload"></i> Upload</div> |
|||
<div class="column"><i class="icon like"></i> Like</div> |
|||
<div class="column"><i class="icon dislike"></i> Dislike</div> |
|||
<div class="column"><i class="icon pin"></i> Pin</div> |
|||
<div class="column"><i class="icon star"></i> Star</div> |
|||
<div class="column"><i class="icon empty star"></i> Empty Star</div> |
|||
<div class="column"><i class="icon half star"></i> Half Star</div> |
|||
<div class="column"><i class="icon print"></i> Print</div> |
|||
<div class="column"><i class="icon comment"></i> Comment</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="another icon example"> |
|||
<h4 class="ui header">View</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon content"></i> Content</div> |
|||
<div class="column"><i class="icon grid layout"></i> Grid Layout</div> |
|||
<div class="column"><i class="icon block layout"></i> Block Layout</div> |
|||
<div class="column"><i class="icon list layout"></i> List Layout</div>> |
|||
<div class="column"><i class="icon resize full"></i> Resize Full</div> |
|||
<div class="column"><i class="icon resize horizontal"></i> Resize Horizontal</div> |
|||
<div class="column"><i class="icon resize small"></i> Resize Small</div> |
|||
<div class="column"><i class="icon resize vertical"></i> Resize Vertical</div> |
|||
<div class="column"><i class="icon zoom in"></i> Zoom in</div> |
|||
<div class="column"><i class="icon zoom out"></i> Zoom out</div> |
|||
</div> |
|||
</div> |
|||
<div class="another icon example"> |
|||
<h4 class="ui header">Media Actions</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon eject"></i> Eject</div> |
|||
<div class="column"><i class="icon fast-forward"></i> Fast-forward</div> |
|||
<div class="column"><i class="icon pause"></i> Pause</div> |
|||
<div class="column"><i class="icon play"></i> Play</div> |
|||
<div class="column"><i class="icon to-end"></i> To-start</div> |
|||
<div class="column"><i class="icon to-start"></i> To-end</div> |
|||
<div class="column"><i class="icon forward"></i> Forward</div> |
|||
<div class="column"><i class="icon shuffle"></i> Shuffle</div> |
|||
<div class="column"><i class="icon clockwise"></i> Clockwise</div> |
|||
<div class="column"><i class="icon counter clockwise"></i> Counter clockwise</div> |
|||
</div> |
|||
</div> |
|||
<div class="another icon example"> |
|||
<h4 class="ui header">Objects</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon book"></i> Book</div> |
|||
<div class="column"><i class="icon calendar"></i> Calendar</div> |
|||
<div class="column"><i class="icon color"></i> Color</div> |
|||
<div class="column"><i class="icon desk globe"></i> Desk globe</div> |
|||
<div class="column"><i class="icon fire"></i> Fire</div> |
|||
<div class="column"><i class="icon globe"></i> Globe</div> |
|||
<div class="column"><i class="icon headphones"></i> Headphones</div> |
|||
<div class="column"><i class="icon id"></i> Id</div> |
|||
<div class="column"><i class="icon idea"></i> Idea</div> |
|||
<div class="column"><i class="icon lightning"></i> Lightning</div> |
|||
<div class="column"><i class="icon money"></i> Money</div> |
|||
<div class="column"><i class="icon paint"></i> Paint</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="another icon example"> |
|||
<h4 class="ui header">Indications</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon cancel circle"></i> Cancel Circle</div> |
|||
<div class="column"><i class="icon asterisk"></i> Asterisk</div> |
|||
<div class="column"><i class="icon attention circle"></i> Attention Circle</div> |
|||
<div class="column"><i class="icon attention"></i> Attention</div> |
|||
<div class="column"><i class="icon empty heart"></i> Empty Heart</div> |
|||
<div class="column"><i class="icon heart"></i> Heart</div> |
|||
<div class="column"><i class="icon thumbs down"></i> Thumbs Down</div> |
|||
<div class="column"><i class="icon thumbs up"></i> Thumbs Up</div> |
|||
<div class="column"><i class="icon terminal"></i> Terminal</div> |
|||
<div class="column"><i class="icon direction"></i> Direction</div> |
|||
|
|||
<div class="column"><i class="icon location"></i> Location</div> |
|||
<div class="column"><i class="icon help"></i> Help</div> |
|||
<div class="column"><i class="icon info"></i> Info</div> |
|||
<div class="column"><i class="icon mic"></i> Mic</div> |
|||
<div class="column"><i class="icon off"></i> Off</div> |
|||
|
|||
<div class="column"><i class="icon add"></i> Add</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="another icon example"> |
|||
<h4 class="ui header">Symbols</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon left arrow"></i> Left Open</div> |
|||
<div class="column"><i class="icon left triangle"></i> Left Triangle</div> |
|||
<div class="column"><i class="icon left"></i> Left</div> |
|||
<div class="column"><i class="icon right"></i> Right</div> |
|||
<div class="column"><i class="icon right triangle"></i> Right Triangle</div> |
|||
<div class="column"><i class="icon right arrow"></i> Right Arrow</div> |
|||
<div class="column"><i class="icon up"></i> Up</div> |
|||
<div class="column"><i class="icon up triangle"></i> Up Triangle</div> |
|||
<div class="column"><i class="icon up arrow"></i> Up Arrow</div> |
|||
<div class="column"><i class="icon down arrow"></i> Down Arrow</div> |
|||
<div class="column"><i class="icon down triangle"></i> Down Triangle</div> |
|||
<div class="column"><i class="icon down"></i> Down Arrow</div> |
|||
<div class="column"><i class="icon cube"></i> Cube</div> |
|||
<div class="column"><i class="icon minus"></i> Minus</div> |
|||
<div class="column"><i class="icon plus"></i> Plus</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="another icon example"> |
|||
<h4 class="ui header">Social</h4> |
|||
<div class="ui eight column grid"> |
|||
<div class="column"><i class="icon facebook"></i> Facebook</div> |
|||
<div class="column"><i class="icon twitter"></i> Twitter</div> |
|||
<div class="column"><i class="icon github"></i> Github</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>An icon can show that it is disabled</p> |
|||
<i class="disabled users icon"></i> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>An icon can vary in size</p> |
|||
<i class="small users icon"></i> |
|||
<br> |
|||
<i class="users icon"></i> |
|||
<br> |
|||
<i class="large users icon"></i> |
|||
<br> |
|||
<i class="huge users icon"></i> |
|||
<br> |
|||
<i class="massive users icon"></i> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Link</h4> |
|||
<p>An icon can be formatted as a link</p> |
|||
<i class="close icon link"></i> |
|||
<br> |
|||
<i class="help circle icon link"></i> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Circular</h4> |
|||
<p>An icon can be formatted to appear circular</p> |
|||
<i class="circular users icon"></i> |
|||
<br> |
|||
<i class="circular inverted users icon"></i> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Square</h4> |
|||
<p>An icon can be formatted to appear square</p> |
|||
<i class="square users icon"></i> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Colors</h4> |
|||
<p>An icon can be formatted with different colors</p> |
|||
<i class="black users icon"></i> |
|||
<i class="blue user icon"></i> |
|||
<i class="red community icon"></i> |
|||
<i class="green add user icon"></i> |
|||
<i class="purple chat icon"></i> |
|||
<i class="teal comment icon"></i> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>an icon can have its colors inverted for contrast</p> |
|||
<i class="inverted black users icon"></i> |
|||
<i class="inverted blue user icon"></i> |
|||
<i class="inverted red community icon"></i> |
|||
<i class="inverted green add user icon"></i> |
|||
<i class="inverted purple chat icon"></i> |
|||
<i class="inverted teal comment icon"></i> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,125 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'image' |
|||
title : 'Image' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Image</h1> |
|||
<p>An image is a graphic representation of something</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">Groups</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Image</h4> |
|||
<p>An image</p> |
|||
<div class="ui ignored info message">Images will, by default, take up the same size as the original image. Specifying a size will force an image to only take up a specific size.</div> |
|||
<img class="ui medium image" src="/images/demo/photo.jpg"> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Image Link</h4> |
|||
<p>An image can be formatted to link to other content</p> |
|||
<a href="http://google.com" class="ui medium image"> |
|||
<img src="/images/demo/photo.jpg"> |
|||
</a> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>An image can show that it is disabled and cannot be selected</p> |
|||
<img class="medium disabled ui image" src="/images/demo/photo.jpg"> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Avatar</h4> |
|||
<p>An image may be formatted to appear inline with text as an avatar</p> |
|||
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Rounded</h4> |
|||
<p>An image may appear rounded</p> |
|||
<img class="rounded ui image" src="/images/demo/photo2.jpg"> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Circular</h4> |
|||
<p>An image may appear circular</p> |
|||
<img class="circular ui image" src="/images/demo/photo2.jpg"> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Floated</h4> |
|||
<p>An image can sit to the left or right of other content</p> |
|||
<div class="ui segment"> |
|||
<img class="ui small left floated image" src="/images/demo/photo.jpg"> |
|||
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p> |
|||
<img class="ui small right floated image" src="/images/demo/photo.jpg"> |
|||
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p> |
|||
|
|||
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Sizes</h4> |
|||
<p>An image may be formatted to be different sizes</p> |
|||
<img class="ui tiny image" src="/images/demo/photo2.jpg"> |
|||
|
|||
<div class="ui simple ignored divider"></div> |
|||
<img class="ui mini image" src="/images/demo/photo2.jpg"> |
|||
|
|||
<div class="ui simple ignored divider"></div> |
|||
<img class="ui small image" src="/images/demo/photo2.jpg"> |
|||
|
|||
<div class="ui simple ignored divider"></div> |
|||
<img class="ui large image" src="/images/demo/photo.jpg"> |
|||
|
|||
<div class="ui simple ignored divider"></div> |
|||
<img class="ui huge image" src="/images/demo/photo.jpg"> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<h2 class="ui dividing header">Groups</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Sizes</h4> |
|||
<p>A group of images can be formatted to have the same size.</p> |
|||
<div class="ui small images"> |
|||
<img class="ui image" src="/images/demo/photo.jpg"> |
|||
<img class="ui image" src="/images/demo/photo.jpg"> |
|||
<img class="ui image" src="/images/demo/photo.jpg"> |
|||
<img class="ui image" src="/images/demo/photo.jpg"> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui medium images"> |
|||
<img src="/images/demo/photo.jpg"> |
|||
<img src="/images/demo/photo.jpg"> |
|||
<img src="/images/demo/photo.jpg"> |
|||
<img src="/images/demo/photo.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,124 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'input' |
|||
title : 'Input' |
|||
type : 'UI Element' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<div class="ui small download menu"> |
|||
<div class="header item">Links</div> |
|||
<div class="simple ui dropdown item"> |
|||
<i class="icon setting"></i> Download <i class="icon dropdown"></i> |
|||
<div class="menu"> |
|||
<a class="item">Uncompressed</a> |
|||
<a class="item">Minified</a> |
|||
<a class="item">LESS</a> |
|||
</div> |
|||
</div> |
|||
<a class="item"><i class="icon edit"></i> Authoring Guide</a> |
|||
</div> |
|||
<h1 class="ui header"> |
|||
Input |
|||
<div class="sub header">Inputs allow a user to enter information</div> |
|||
</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Input:</h4> |
|||
<p>A standard input</p> |
|||
<div class="ui input"> |
|||
<input type="text"> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Focus</h4> |
|||
<p>An input field can show a user is currently interacting with it</p> |
|||
<div class="ui input focus"> |
|||
<input type="text"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Error</h4> |
|||
<p>An input field can show the data contains errors</p> |
|||
<div class="ui input error"> |
|||
<input type="text"> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Icon</h4> |
|||
<p>An input can be formatted with an icon</p> |
|||
<div class="ui icon input"> |
|||
<input type="text" placeholder="Search..."> |
|||
<i class="icon search"></i> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui left icon input"> |
|||
<input type="text" placeholder="Search users..."> |
|||
<i class="icon users"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Labeled</h4> |
|||
<p>An input can be formatted with a label</p> |
|||
<div class="ui labeled input"> |
|||
<input type="text" placeholder="Search..."> |
|||
<div class="ui corner label"> |
|||
<i class="asterisk icon"></i> |
|||
</div> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui labeled input"> |
|||
<input type="text" placeholder="Search..."> |
|||
<div class="ui corner label"> |
|||
<div class="text">New</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Action</h4> |
|||
<p>An input can be formatted to alert the user to an action they may perform</p> |
|||
<div class="ui action input"> |
|||
<input type="text" placeholder="Search..."> |
|||
<div class="ui button">Search</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui action input"> |
|||
<input type="text" placeholder="Username"> |
|||
<div class="ui teal button"><i class="add user icon"></i> Add users</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui action input"> |
|||
<input type="text" placeholder="Search..."> |
|||
<div class="ui icon button"><i class="search icon"></i></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,308 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : "label" |
|||
title : 'Label' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Label</h1> |
|||
<p>Labels give descriptions to pieces of content.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">Groups</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Types</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Label</h4> |
|||
<p>A basic label</p> |
|||
<div class="ui label"> |
|||
<i class="icon location"></i> 23 |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Linkable Label</h4> |
|||
<p>If an html link tag is used, a label will be formatted as a link</p> |
|||
<a class="ui label"> |
|||
Fun |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Label with detail</h4> |
|||
<p>A tag can optionally display a detail</p> |
|||
<div class="ui label"> |
|||
Dogs |
|||
<div class="detail">214</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Removable label</h4> |
|||
<p>A tag can also be removable</p> |
|||
<div class="ui label"> |
|||
Witty |
|||
<i class="icon close"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Corner Label</h4> |
|||
<p>A label can position itself in the corner of an element</p> |
|||
<div class="yellow ui message">A corner label must be positioned inside a container with position: relative to display properly</div> |
|||
<div class="ui segment"> |
|||
<div class="ui right corner label"> |
|||
<i class="heart icon"></i> |
|||
</div> |
|||
<div class="ui left corner label"> |
|||
<div class="text">New</div> |
|||
</div> |
|||
This is a normal text segment |
|||
</div> |
|||
<div class="ui segment"> |
|||
<a class="ui left corner label"> |
|||
<i class="heart icon"></i> |
|||
</a> |
|||
<a class="ui right corner label"> |
|||
<div class="text">New</div> |
|||
</a> |
|||
These corner labels are formatted as links |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Attached Label</h4> |
|||
<p>A label attached to a content segment</p> |
|||
<div class="ui three column grid"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<div class="ui top attached label">HTML</div> |
|||
<p>This is some pretend content</p> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<div class="ui bottom attached label">CSS</div> |
|||
<p>This is some pretend content</p> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<div class="ui top right attached label">Code</div> |
|||
<p>This is some pretend content</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<div class="ui top left attached label">View</div> |
|||
<p>This is some pretend content</p> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<div class="ui bottom left attached label">User View</div> |
|||
<p>This is some pretend content</p> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segment"> |
|||
<div class="ui bottom right attached label">Admin View</div> |
|||
<p>This is some pretend content</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Colors</h4> |
|||
<p>A label can have different colors</p> |
|||
<a class="ui black label"> |
|||
First |
|||
</a> |
|||
<a class="ui green label"> |
|||
Fun |
|||
</a> |
|||
<a class="ui red label"> |
|||
Happy |
|||
</a> |
|||
<a class="ui blue label"> |
|||
Smart |
|||
</a> |
|||
<a class="ui purple label"> |
|||
Insane |
|||
</a> |
|||
<a class="ui teal label"> |
|||
Exciting |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Circular</h4> |
|||
<p>A label can be circular</p> |
|||
<a class="ui black circular label"> |
|||
12 |
|||
</a> |
|||
<a class="ui green circular label"> |
|||
11 |
|||
</a> |
|||
<a class="ui red circular label"> |
|||
10 |
|||
</a> |
|||
<a class="ui blue circular label"> |
|||
64 |
|||
</a> |
|||
<a class="ui purple circular label"> |
|||
62 |
|||
</a> |
|||
<a class="ui teal circular label"> |
|||
1 |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Floating</h4> |
|||
<p>A label can float above another element</p> |
|||
<div class="ui compact menu"> |
|||
<a class="item"> |
|||
<i class="icon mail"></i> Messages |
|||
<div class="floating ui red label">22</div> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="icon users"></i> Friends |
|||
<div class="floating ui teal label">22</div> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Pointing</h4> |
|||
<p>A label can point to content next to it</p> |
|||
<form class="ui fluid form"> |
|||
<div class="field"> |
|||
<input type="text" placeholder="First name"> |
|||
<div class="ui pointing label"> |
|||
Please enter a value |
|||
</div> |
|||
</div> |
|||
<div class="ui simple divider"></div> |
|||
<div class="field" placeholder="Last Name"> |
|||
<div class="ui pointing below label"> |
|||
Please enter a value |
|||
</div> |
|||
<input type="text"> |
|||
</div> |
|||
<div class="ui simple divider"></div> |
|||
<div class="inline field"> |
|||
<input type="text" placeholder="Username"> |
|||
<div class="ui pointing left label"> |
|||
That name is taken! |
|||
</div> |
|||
</div> |
|||
<div class="ui simple divider"></div> |
|||
<div class="inline field"> |
|||
<div class="ui pointing right label"> |
|||
Your password must be 6 characters or more |
|||
</div> |
|||
<input type="password"> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>A label can be small or large</p> |
|||
<div class="ui small label"> |
|||
Fun |
|||
</div> |
|||
<br><br> |
|||
<div class="ui large label"> |
|||
Fun |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Groups</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>Labels can share sizes together</p> |
|||
<div class="ui large labels"> |
|||
<div class="ui label"> |
|||
Fun |
|||
</div> |
|||
<div class="ui label"> |
|||
Happy |
|||
</div> |
|||
<div class="ui label"> |
|||
Smart |
|||
</div> |
|||
<div class="ui label"> |
|||
Witty |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Colors</h4> |
|||
<p>Labels can share colors together</p> |
|||
<div class="ui blue labels"> |
|||
<a class="ui label"> |
|||
Fun <i class="icon close"></i> |
|||
</a> |
|||
<a class="ui label"> |
|||
Happy |
|||
<div class="detail">22</div> |
|||
</a> |
|||
<a class="ui label"> |
|||
Smart |
|||
</a> |
|||
<a class="ui label"> |
|||
Insane |
|||
</a> |
|||
<a class="ui label"> |
|||
Exciting |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Circular</h4> |
|||
<p>Labels can share shapes</p> |
|||
<div class="ui circular labels"> |
|||
<a class="ui label"> |
|||
11 |
|||
</a> |
|||
<a class="ui label"> |
|||
22 |
|||
</a> |
|||
<a class="ui label"> |
|||
33 |
|||
</a> |
|||
<a class="ui label"> |
|||
44 |
|||
</a> |
|||
<a class="ui label"> |
|||
141 |
|||
</a> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,135 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'loader' |
|||
title : 'Loader' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Loader</h1> |
|||
<p>Loaders lets a user know to wait for activity to finish.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Loader</h4> |
|||
<p>A loader</p> |
|||
<div class="ui info message">Loaders by default are hidden unless inside of a dimmer.</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui active dimmer"> |
|||
<div class="ui loader"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text Loader</h4> |
|||
<p>Text loader</p> |
|||
<div class="ui info message">If the text for a loader is larger than the size of a loader it might need to have its margins manually adjusted to center itself precisely.</div> |
|||
<div class="ui segment"> |
|||
<div class="ui active dimmer"> |
|||
<div class="ui text loader">Loading</div> |
|||
</div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui info message">If the text for a loader is larger than the size of a loader it might need to have its margins manually adjusted to center itself precisely.</div> |
|||
<div class="ui segment"> |
|||
<div class="ui inverted dimmer"> |
|||
<div class="ui text loader">Loading</div> |
|||
</div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Active</h4> |
|||
<p>A loader can be active or visible</p> |
|||
<div class="ui segment"> |
|||
<div class="ui active loader"></div> |
|||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A loader can be disabled or hidden</p> |
|||
<div class="ui segment"> |
|||
<div class="ui disabled loader"></div> |
|||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inline</h4> |
|||
<p>Loaders can appear inline with content </p> |
|||
<div class="ui active inline loader"></div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>Loaders can have different sizes</p> |
|||
|
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui active dimmer"><div class="ui mini loader"></div></div> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui active dimmer"><div class="ui small loader"></div></div> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui active dimmer"><div class="ui medium loader"></div></div> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui active dimmer"><div class="ui large loader"></div></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>Loaders can have their colors inverted.</p> |
|||
<div class="ignored ui info message">Loaders will automatically be inverted inside dimmers to maintain consistency</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui inverted active dimmer"><div class="ui mini loader"></div></div> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui inverted active dimmer"><div class="ui small loader"></div></div> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui inverted active dimmer"><div class="ui medium loader"></div></div> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui inverted active dimmer"><div class="ui large loader"></div></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,119 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'progress' |
|||
title : 'Progress' |
|||
type : 'UI Element' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Progress Bar</h1> |
|||
<p>Progress bars show the percent of a task complete</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Progress:</h4> |
|||
<p>A standard progress bar</p> |
|||
<div class="ui progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Active</h4> |
|||
<p>A progress bar can show activity</p> |
|||
<div class="ui active progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Successful</h4> |
|||
<p>A progress bar can show success</p> |
|||
<div class="ui successful progress"> |
|||
<div class="bar" style="width:100%"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Failed</h4> |
|||
<p>A progress bar can show failure</p> |
|||
<div class="ui failed progress"> |
|||
<div class="bar" style="width:100%"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A progress bar can be disabled</p> |
|||
<div class="ui disabled progress"> |
|||
<div class="bar" style="width:100%"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Attached</h4> |
|||
<p>A progress bar can show progress of an element</p> |
|||
<div class="ui top attached progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
<div class="ui attached segment"> |
|||
<p>La la la la</p> |
|||
</div> |
|||
<div class="ui bottom attached progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Color</h4> |
|||
<p>Can have different colors:</p> |
|||
<div class="ui blue progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
<div class="ui black progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
<div class="ui green progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
<div class="ui red progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
<div class="ui blue progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
<div class="ui purple progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
<div class="ui teal progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Striped</h4> |
|||
<p>A progress bar can be striped</p> |
|||
<div class="ui striped progress"> |
|||
<div class="bar"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,221 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'segment' |
|||
title : 'Segment' |
|||
type : 'UI Element' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Segment</h1> |
|||
<p>A segment is used to create a grouping of related content.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Segment</h4> |
|||
<p>A segment of content</p> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Vertical Segment</h4> |
|||
<p>A vertical segment divides content vertically</p> |
|||
<div class="ui vertical segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Horizontal Segment</h4> |
|||
<p>A horizontal segment divides content horizontally</p> |
|||
<div class="ui horizontal segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Piled</h4> |
|||
<p>A segment can be formatted to look like a pile of pages</p> |
|||
<div class="ui piled segment"> |
|||
<h2>A header</h2> |
|||
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p> |
|||
|
|||
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p> |
|||
|
|||
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Stacked</h4> |
|||
<p>A segment can be formatted to show it contains multiple pages</p> |
|||
<div class="ui stacked segment"> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A segment may show its content is disabled |
|||
<div class="ui disabled segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A segment can have its colors inverted for contrast</p> |
|||
<div class="ui inverted segment"> |
|||
<p>I'm here to tell you something, and you will probably read me first.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Raised</h4> |
|||
<p>A segment may be formatted to raise above the page.</p> |
|||
<div class="ui raised segment"> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Colored</h4> |
|||
<p>A segment can be colored</p> |
|||
<div class="ui blue segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui green segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui red segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui purple segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<div class="ui teal segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<p>These colors can be inverted</p> |
|||
<div class="ui blue inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="ui green inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="ui red inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="ui purple inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="ui teal inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Ordinality</h4> |
|||
<p>A segment can be formatted to appear more or less noticable</p> |
|||
<div class="ui primary segment"> |
|||
<p>I'm here to tell you something, and you will probably read me first.</p> |
|||
</div> |
|||
<div class="ui secondary segment"> |
|||
<p>I am pretty noticable but you might check out other content before you look at me.</p> |
|||
</div> |
|||
<div class="ui tertiary segment"> |
|||
<p>If you notice me you must be looking very hard.</p> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<p>Inverted colors may also be more or less noticable</p> |
|||
<div class="ui primary inverted segment"> |
|||
<p>I'm here to tell you something, and you will probably read me first.</p> |
|||
</div> |
|||
<div class="ui secondary inverted segment"> |
|||
<p>I am pretty noticable but you might check out other content before you look at me.</p> |
|||
</div> |
|||
<div class="ui tertiary inverted segment"> |
|||
<p>If you notice me you must be looking very hard.</p> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui primary inverted red segment"> |
|||
<p>I'm here to tell you something, and you will probably read me first.</p> |
|||
</div> |
|||
<div class="ui secondary inverted red segment"> |
|||
<p>I am pretty noticable but you might check out other content before you look at me.</p> |
|||
</div> |
|||
<div class="ui tertiary inverted red segment"> |
|||
<p>If you notice me you must be looking very hard.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Floated</h4> |
|||
<p>A segment cant sit to the left or right of other content</p> |
|||
<div class="ui right floated segment"> |
|||
<p>This segment will appear to the right |
|||
</div> |
|||
<div class="ui left floated segment"> |
|||
This segment will appear to the left |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Text Alignment</h4> |
|||
<p>A segment cant have its text aligned to a side</p> |
|||
<div class="ui right aligned segment"> |
|||
Right |
|||
</div> |
|||
<div class="ui left aligned segment"> |
|||
Left |
|||
</div> |
|||
<div class="ui center aligned segment"> |
|||
Center |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Basic</h4> |
|||
<p>A basic segment has no special formatting</p> |
|||
<div class="ui basic segment"> |
|||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<h4 class="ui header">Attached</h4> |
|||
<p>A segment can be attached to other content on a page</p> |
|||
|
|||
<div class="ui top attached segment"> |
|||
<p>This segment is on top</p> |
|||
</div> |
|||
<div class="ui attached segment"> |
|||
<p>This segment is attached on both sides</p> |
|||
</div> |
|||
<div class="ui bottom attached segment"> |
|||
<p>This segment is on bottom</p> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,139 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'steps' |
|||
title : 'Step' |
|||
type : 'UI Element' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Step</h1> |
|||
<p>Steps show the current activity in a series of steps.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Element</a> |
|||
<a class="item">Groups</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Step</h4> |
|||
<p>A step</p> |
|||
<div class="ui steps"> |
|||
<div class="ui step"> |
|||
Shipping |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Groups</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Steps</h4> |
|||
<p>A set of step</p> |
|||
<div class="ui steps"> |
|||
<div class="ui step"> |
|||
Shipping |
|||
</div> |
|||
<div class="ui active step"> |
|||
Billing |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Confirm Order |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Complete |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Active</h4> |
|||
<p>A step can be highlighted as active</p> |
|||
<div class="ui steps"> |
|||
<div class="ui active step"> |
|||
Billing |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A step can show that it cannot be selected</p> |
|||
<div class="ui steps"> |
|||
<div class="ui disabled step"> |
|||
Billing |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>Steps can have different sizes</p> |
|||
|
|||
<div class="ui small steps"> |
|||
<div class="ui active step"> |
|||
Shipping |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Billing |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Confirm Order |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Complete |
|||
</div> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui large steps"> |
|||
<div class="ui active step"> |
|||
Shipping |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Billing |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Confirm Order |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Complete |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Step</h4> |
|||
<p>Steps can be divided evenly inside their parent</p> |
|||
<div class="ui four steps"> |
|||
<div class="ui active step"> |
|||
Shipping |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Billing |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Confirm Order |
|||
</div> |
|||
<div class="ui disabled step"> |
|||
Complete |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,52 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'Authoring UI' |
|||
type : 'UI Introduction' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">Writing a Component</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
|
|||
<h2 class="ui header">Creating an Element</h2> |
|||
|
|||
<p>Semantic defines five categories of elements, each type of element has different definition requirements</p> |
|||
|
|||
<ul class="ui list"> |
|||
<li><b>Element</b> - a basic building block of a website, exists alone or in homogenous groups</li> |
|||
<li><b>Colleciton</b> - a group of several elements which are usually found together</li> |
|||
<li><b>Module</b> - an element where its behavior is included as part of its definition</li> |
|||
<li><b>Behavior</b> - a definition of behavior that exists without any physical description</li> |
|||
<li><b>View</b> - a way to present specific website content</li> |
|||
</ul> |
|||
|
|||
Creating Components |
|||
===================================== |
|||
|
|||
The first step after deciding what type of element you are creating is writing a spec file, these allow you to define the language for describing your interface element before beginning to write a component. The spec file can be used to generate a css and javascript stub which will give you a starting point for writing your component. Spec files content varies depending on which of the five UI types are being defined. |
|||
|
|||
Here's an example spec file for a ui element button. You can read more about creating spec files <here> |
|||
|
|||
<whatever> |
|||
|
|||
After creating a spec file you can use semantic to generate ui components. Simply specify a package name and json spec file. |
|||
|
|||
semantic generate awesome button.json |
|||
|
|||
This will create a stub css (and possibly js) file in ui/element with your definition. This will also create a stub html file in docs/, this is the visual representation of your element definition, and will appear unformatted until you begin to create your css. |
|||
|
|||
As you edit each css definition to create the look and feel of your element, you can refresh this page to verify each element appears properly. After you finish writing your UI component, if you would like to register your package to be used by others. No need to package anything up, simply type |
|||
|
|||
semantic register awesome button |
|||
|
|||
Assuming your package name is not taken, your buttons will now be available on semantic. |
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,57 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'Using UI' |
|||
type : 'UI Introduction' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">Writing a Component</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
|
|||
<h2 class="ui header">Creating an Element</h2> |
|||
|
|||
<p>Semantic defines five categories of elements, each type of element has different definition requirements</p> |
|||
|
|||
<ul class="ui list"> |
|||
<li><b>Element</b> - a basic building block of a website, exists alone or in homogenous groups</li> |
|||
<li><b>Colleciton</b> - a group of several elements which are usually found together</li> |
|||
<li><b>Module</b> - an element where its behavior is included as part of its definition</li> |
|||
<li><b>Behavior</b> - a definition of behavior that exists without any physical description</li> |
|||
<li><b>View</b> - a way to present specific website content</li> |
|||
</ul> |
|||
|
|||
The first step when using semantic is to initialize a directory as using semantic |
|||
<div class="code" data-type="html"> |
|||
semantic init |
|||
</div> |
|||
This will create a directory, by default, 'ui' which will hold all your element definitions. |
|||
|
|||
After initializing semantic, you may install other registered components. Each semantic component uses a css classname as a namespace. This namespace is also the name of the package on semantic. To search for a button for example, you could use the following command. |
|||
|
|||
semantic find button |
|||
|
|||
Multiple packages will appear showing possible buttons available to download. |
|||
|
|||
There are four button packages: |
|||
|
|||
1) Fancy: A set of rounded buttons (3 types, 22 variations) |
|||
2) Loadr: A set of buttons with expandable loaders (1 type, 10 variations) |
|||
3) Bootstrap: Classic bootstrap buttons (2 types, 10 variations) |
|||
4) Semantic: Semantic UI buttons (4 types, 20 variations) |
|||
|
|||
Each package that uses the button namespace also contains a name. Use this to specify what type of element you want to install. |
|||
|
|||
semantic install semantic button |
|||
|
|||
This will install semantic's core button library. Inside your ui directory, this will also generate a new file inside ui/docs, which will include an overview of the element. |
|||
|
|||
To use a button on your page, simple link to the css and js of an element |
|||
|
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,134 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : ' Getting Started' |
|||
type : 'UI Introduction' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">Getting Started</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Installing</a> |
|||
<a class="item">Usage</a> |
|||
<a class="item">Why Use Semantic?</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui header">Installing</h2> |
|||
<p>Semantic uses an eponymous package manager written in node. To begin you must <a href="http://howtonode.org/how-to-install-nodejs">install nodejs and npm</a> for your platform.</p> |
|||
|
|||
<p>After these dependencies are ready to go, you can install semantic using npm |
|||
<div class="code" data-type="text" data-label="true"> |
|||
npm install -g semantic |
|||
</div> |
|||
|
|||
<h2 class="ui header">Usage</h2> |
|||
|
|||
<p>Components are given a namespace. This makes sure the css rules dont interfere with other rules on your page.</p> |
|||
<div class="code" data-type="text" data-label="true"> |
|||
semantic add button |
|||
</div> |
|||
<div class="code" data-type="html" data-label="true"> |
|||
<div class="ui button">Button</div> |
|||
</div> |
|||
<div class="code" data-type="css" data-label="true"> |
|||
.ui.button { |
|||
font-size: 14px; |
|||
} |
|||
</div> |
|||
|
|||
<p>If multiple components are available of the same type, you can specify which one to use by adding the package's name before. A package name is different than its namespace, for example there may be many types of buttons.</p> |
|||
<div class="code" data-type="text" data-label="true"> |
|||
semantic search button |
|||
>> 2 buttons were found: |
|||
>> fancy button - a collection of buttons formatted for a blog - 15 variations, 3 types |
|||
>> semantic button - the official button collection of semantic - 10 variations, 5 types |
|||
</div> |
|||
|
|||
<p>Components will download inside a directory. To use these components, simply link to their javascript and css in a web page</p> |
|||
<div class="code" data-type="html"> |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/ui/elements/button.css"> |
|||
</div> |
|||
|
|||
<h3>So I downloaded a component, now what?</h3> |
|||
|
|||
<p>Semantic components are self documenting, that means documentation are generated automatically after you download. You can see the element and code samples by simply opening up the corresponding html file. |
|||
<div class="code" data-type="html"> |
|||
/ui/specification/button.html |
|||
</div> |
|||
|
|||
<p>You can view an example of an element definition by checking out the docs for semantic's first party button definition</p> |
|||
<a class="ui teal right labeled icon button" href="/elements/button.html"> |
|||
View button definition <i class="right arrow icon"></i> |
|||
</a> |
|||
|
|||
<div class="ui divider"></div> |
|||
|
|||
<h2 class="ui header">Why Use Semantic?</h2> |
|||
|
|||
<p> |
|||
Semantic sees website development as the coallescence of two things: <b>Re-usable UI Components + Discardable Page Glue</b> |
|||
</p> |
|||
<p>Semantic is a framework for writing portable UI components, which helps you and others re-use and re-skin your ui elements in their projects.</p> |
|||
|
|||
<h3 class="ui header">Definitions and Language</h3> |
|||
|
|||
<p>Natural language is <em>particularly good</em> at describing visual scenes, i.e. dogs, trees, flowers and hard at defining abstractions: behavior, emotions, etc. Where programming languages are <em>particularly good</em> at describing behavior, but can be more obtuse at describing layouts.</p> |
|||
|
|||
<p>Semantic adopts concepts from natural languages like: plurals, adjectives, and tense so web developers can enjoy some of the more useful features of natural language. Semantic also aspires for developers to make decision based on common usage instead of deciding arbitrarily how to name things.</p> |
|||
|
|||
<p>For example if a developer wants to include a set of red buttons with icons on a page he can simple grab the semantic button and icon component:</p> |
|||
|
|||
<div class="code" data-type="text"> |
|||
semantic add button |
|||
semantic add icon |
|||
</div> |
|||
|
|||
and then include in html: |
|||
<div class="code" data-type="html"> |
|||
<div class="red ui icon buttons"> |
|||
<div class="ui button"> |
|||
<i class="grid layout icon"></i> |
|||
</div> |
|||
<div class="ui button"> |
|||
<i class="block layout icon"></i> |
|||
</div> |
|||
<div class="ui button"> |
|||
<i class="list layout icon"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="red ui icon buttons"> |
|||
<div class="ui button"><i class="grid layout icon"></i></div> |
|||
<div class="ui button"><i class="block layout icon"></i></div> |
|||
<div class="ui button"><i class="list layout icon"></i></div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Authoring</h3> |
|||
|
|||
<p>Creating a component in semantic requires two steps: |
|||
<ol class="ui list"> |
|||
<li>Defining how your element can look.</li> |
|||
<li>Writing code to match your definitions</li> |
|||
</ol> |
|||
<p>These steps can be completed in either order. If you enjoy Test-Driven-Development, you can write your specification before coding, or if you prefer a more ad-hoc approach you can swap the order, defining your element only after you finish describing it.</p> |
|||
|
|||
<h3 class="ui header">Consuming</h3> |
|||
<p>Semantic is a package manager, created by other people is a simple process</p> |
|||
<ol class="ui list"> |
|||
<li>Search semantic for a type of UI component</li> |
|||
<li>Open up its specification to see what it can do and how to use it.</li> |
|||
</ol> |
|||
|
|||
Semantic components are self documenting, giving you the ability to download a component, and get working immediately. Each component contains a spec file, which describes what a component can do. This is used to generate documentation automatically that lives alongside your project, making sure you know exactly what exists in your CSS.</p> |
|||
|
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,111 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'module' |
|||
|
|||
title : 'UI Modules' |
|||
type : 'Semantic' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">UI Modules</h1> |
|||
<p>UI modules are interface elements whose behavior is an essential part of their definition.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Types</a> |
|||
<a class="item">Usage</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
<h2 class="ui dividing header">Usage</h3> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Settings</h2> |
|||
<p>Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins. |
|||
|
|||
<h3 class="ui header">Common Settings</h3> |
|||
<table class="ui table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Usage</th> |
|||
</thead> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Name used in debug logs to differentiate this widget from other debug statements.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>Provides standard debug output to console.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>Provides performance logging to console of internal method calls.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>Provides extra debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>Namespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>selectors</td> |
|||
<td>An object containing all selectors used in the module, these are usually children of the module.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>classNames</td> |
|||
<td>An object containing all classnames used in the module.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2">A javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements. |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<h3 class="ui header">Changing Settings</h3> |
|||
<ol> |
|||
<li>A settings object can be passed in when initializing the plugin |
|||
<br> |
|||
<div class="code"> |
|||
$('.foo') |
|||
.module({ |
|||
moduleName: 'Godzilla', |
|||
verbose: true |
|||
}) |
|||
; |
|||
</div> |
|||
</li> |
|||
<li>Default settings for the module can be overridden by modifying $.fn.module.settings. |
|||
<br><div class="code">$.fn.module.settings.moduleName = 'Godzilla';</div> |
|||
</li> |
|||
<li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair. |
|||
<br> |
|||
<div class="code"> |
|||
$('.foo') |
|||
// lets initialize that! |
|||
.module() |
|||
// oh wait forgot something |
|||
.module('setting', 'moduleName', 'Godzilla') |
|||
; |
|||
</div> |
|||
</li> |
|||
</ol> |
|||
<h3 class="ui header">Reading Settings</h3> |
|||
<p>Settings can also be read programmatically: |
|||
<div class="code"> |
|||
$('.foo').module('setting', 'moduleName'); |
|||
// outputs godzilla |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,263 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'accordion' |
|||
|
|||
title : 'Accordion' |
|||
type : 'UI Module' |
|||
--- |
|||
<link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/modules/accordion.css"> |
|||
|
|||
<script src="/javascript/accordion.js"></script> |
|||
<script src="/components/semantic/modules/accordion.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Accordion</h1> |
|||
<p>An accordion displays a single piece of content, while allowing the option of displaying other content.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Examples</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">Usage</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Accordion</h4> |
|||
<p>A standard accordion</p> |
|||
<div class="ui accordion"> |
|||
<div class="active title">What is a dog?</div> |
|||
<div class="active content"> |
|||
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p> |
|||
</div> |
|||
<div class="title">What kinds of dogs are there?</div> |
|||
<div class="content"> |
|||
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p> |
|||
</div> |
|||
<div class="title">How do you acquire a dog?</div> |
|||
<div class="content"> |
|||
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p> |
|||
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<h2 class="ui dividing header">Examples</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Form</h4> |
|||
<p>An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.</p> |
|||
<div class="ui basic accordion form"> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="title"> |
|||
Optional Details |
|||
<i class="icon dropdown"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="field"> |
|||
<label>Maiden Name</label> |
|||
<input placeholder="Maiden Name" type="text"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- |
|||
<div class="example"> |
|||
<h4 class="ui header">Menu</h4> |
|||
<p>An accordion can be used to create content drawers inside a menu</p> |
|||
<div class="ui vertical accordion menu"> |
|||
<div class="item"> |
|||
Clothing |
|||
</div> |
|||
<div class="item"> |
|||
<a class="title">Size</a> |
|||
<div class="active content menu"> |
|||
<div class="ui form item"> |
|||
<div class="grouped inline fields"> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Small</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Medium</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Large</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> X-Large</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown <i class="icon right triangle"></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> |
|||
--> |
|||
<h2 class="ui dividing header">Variations </h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Basic</h4> |
|||
<p>A basic accordion does not add any extra formatting</p> |
|||
<div class="ui basic accordion"> |
|||
<div class="active title"> |
|||
What is a dog? |
|||
<i class="dropdown icon"></i> |
|||
</div> |
|||
<div class="active content"> |
|||
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p> |
|||
</div> |
|||
<div class="title"> |
|||
What kinds of dogs are there? |
|||
<i class="dropdown icon"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p> |
|||
</div> |
|||
<div class="title"> |
|||
How do you acquire a dog? |
|||
<i class="dropdown icon"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p> |
|||
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h3 class="ui header">Initializing an accordion</h3> |
|||
<div class="code"> |
|||
$('.ui.accordion') |
|||
.accordion() |
|||
; |
|||
</div> |
|||
|
|||
|
|||
<h3 class="ui header">Settings</h3> |
|||
<table class="ui red table segment"> |
|||
<thead> |
|||
<th colspan="3">Accordion Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>exclusive</td> |
|||
<td>true</td> |
|||
<td>Set to false to allow multiple sections to be open at the same time</td> |
|||
</tr> |
|||
<tr> |
|||
<td>collapsible</td> |
|||
<td>true</td> |
|||
<td>Set to false to require an accordion to always have a section open</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onOpen</td> |
|||
<td>None</td> |
|||
<td>Callback after a accordion section is opened.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onClose</td> |
|||
<td>None</td> |
|||
<td>Callback after a accordion section is closed.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onChange</td> |
|||
<td>None</td> |
|||
<td>Callback after a accordion section is changed.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Accordion</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>accordion</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,160 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'carousel' |
|||
|
|||
title : 'Carousel' |
|||
type : 'UI Module' |
|||
--- |
|||
<script src="/javascript/carousel.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Carousel</h1> |
|||
<div class="ui red label">Incomplete</div> |
|||
<p> A carousel alternates display between several pieces of content in sequence.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">Behavior</a> |
|||
<a class="item">Examples</a> |
|||
<a class="item">Usage</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Carousel</h4> |
|||
<p>A standard carousel</p> |
|||
<div class="ui carousel"> |
|||
<i class="left arrow icon"></i> |
|||
<i class="right arrow icon"></i> |
|||
<div class="slides"> |
|||
<div class="slide"> |
|||
<img src="/images/demo/item1.jpg"> |
|||
</div> |
|||
<div class="slide"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="slide"> |
|||
<img src="/images/demo/item3.jpg"> |
|||
</div> |
|||
<div class="slide"> |
|||
<img src="/images/demo/item4.jpg"> |
|||
</div> |
|||
<div class="slide"> |
|||
<img src="/images/demo/item5.jpg"> |
|||
</div> |
|||
</div> |
|||
<div class="menu"> |
|||
<i class="active circle icon item"></i> |
|||
<i class="circle icon item"></i> |
|||
<i class="circle icon item"></i> |
|||
<i class="circle icon item"></i> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h3>Initializing</h3> |
|||
<h3 class="ui header">Initializing a carousel</h3> |
|||
<div class="code"> |
|||
$('.ui.carousel') |
|||
.carousel() |
|||
; |
|||
</div> |
|||
|
|||
<h3 class="ui header">Settings</h3> |
|||
<table class="ui red table segment"> |
|||
<thead> |
|||
<th colspan="3">Carousel Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>required</td> |
|||
<td>auto</td> |
|||
<td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td> |
|||
</tr> |
|||
<tr> |
|||
<td>context</td> |
|||
<td>false</td> |
|||
<td>A selector or jQuery object to use as a delegated event context</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onChange</td> |
|||
<td>None</td> |
|||
<td>Callback after a carousel is either disabled or enabled.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onEnable</td> |
|||
<td>None</td> |
|||
<td>Callback after a carousel is enabled.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onDisable</td> |
|||
<td>None</td> |
|||
<td>Callback after a carousel is disabled.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Carousel</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>carousel</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,353 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'checkbox' |
|||
|
|||
title : 'Checkbox' |
|||
type : 'UI Module' |
|||
--- |
|||
<script src="/javascript/checkbox.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Checkbox</h1> |
|||
<p>A checkbox is a <a href="/module.html">ui module</a> which indicates a user's selection of a choice.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">Behavior</a> |
|||
<a class="item">Examples</a> |
|||
<a class="item">Usage</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Check Box</h4> |
|||
<p>A standard checkbox</p> |
|||
|
|||
<div class="ui language label">Javascript</div> |
|||
<div class="code"> |
|||
$('.ui.checkbox') |
|||
.checkbox() |
|||
; |
|||
</div> |
|||
<div class="ui language label">HTML</div> |
|||
<div class="ui form"> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<label>I would like a dog.</label> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="static example"> |
|||
<h4 class="ui header">Static Check Box</h4> |
|||
<p>A checkbox can function without javascript</p> |
|||
<div class="ui language label">HTML Only</div> |
|||
<div class="ui form"> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" id="unique-id" /> |
|||
<label class="box" for="unique-id"></label> |
|||
</div> |
|||
<label for="unique-id"> I would like a dog but i am lazy.</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Form Checkbox</h4> |
|||
<p>A checkbox can be found inside a form</p> |
|||
<div class="ui form segment"> |
|||
<div class="field"> |
|||
<label>Name</label> |
|||
<input placeholder="Name" type="text"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<label>Accept all our evil terms and conditions</label> |
|||
</div> |
|||
<div class="ui teal button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Radio Box</h4> |
|||
<p>A checkbox can be formatted as a radio element. This means it is an exclusive option.</p> |
|||
<div class="ui form"> |
|||
<div class="grouped inline fields"> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Apples</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Oranges</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Pears</label> |
|||
</div> |
|||
<div class="field"> |
|||
<div class="ui radio checkbox"> |
|||
<input type="radio" name="fruit" /> |
|||
<label></label> |
|||
</div> |
|||
<label> Grapefruit</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>A checkbox can be a different size.</p> |
|||
<h4 class="ui red block header"> |
|||
<div class="ui large checkbox"> |
|||
<input type="checkbox" /> |
|||
<label></label> |
|||
</div> |
|||
Add a pro membership |
|||
</h4> |
|||
<br><br> |
|||
<h3 class="ui blue block header"> |
|||
<div class="ui huge checkbox"> |
|||
<input type="checkbox" /> |
|||
<label></label> |
|||
</div> |
|||
Signup for our mailing list |
|||
</h3> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Behavior</h2> |
|||
|
|||
<div class="example"> |
|||
<p>A checkbox can change to show a user has selected it</p> |
|||
<div class="ignore code"> |
|||
$('.ui.checkbox') |
|||
.checkbox('enable') |
|||
; |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<p>A checkbox can change to show a user has not selected it</p> |
|||
<div class="ignore code"> |
|||
$('.ui.checkbox') |
|||
.checkbox('disable') |
|||
; |
|||
</div> |
|||
</div> |
|||
<div class="example"> |
|||
<p>A checkbox can toggle between states</p> |
|||
<div class="ignore code"> |
|||
$('.ui.checkbox') |
|||
.checkbox('toggle') |
|||
; |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Examples</h2> |
|||
|
|||
<div class="example"> |
|||
<p>Example of using checkbox states to alter multiple checkboxes</p> |
|||
<div class="evaluated code"> |
|||
$('.enable.button') |
|||
.on('click', function() { |
|||
$(this) |
|||
.parent() |
|||
.nextAll('.checkbox') |
|||
.checkbox('enable') |
|||
; |
|||
}) |
|||
; |
|||
$('.disable.button') |
|||
.on('click', function() { |
|||
$(this) |
|||
.parent() |
|||
.nextAll('.checkbox') |
|||
.checkbox('disable') |
|||
; |
|||
}) |
|||
; |
|||
$('.toggle.button') |
|||
.on('click', function() { |
|||
$(this) |
|||
.parent() |
|||
.nextAll('.checkbox') |
|||
.checkbox('toggle') |
|||
; |
|||
}) |
|||
; |
|||
</div> |
|||
<div class="ui buttons"> |
|||
<div class="ui enable button">Enable</div> |
|||
<div class="ui disable button">Disable</div> |
|||
<div class="ui toggle button">Toggle</div> |
|||
</div> |
|||
<br><br> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" checked="checked" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" checked="checked" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" checked="checked" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" checked="checked" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h3>Initializing</h3> |
|||
<h3 class="ui header">Initializing a check box</h3> |
|||
<div class="code"> |
|||
$('.ui.checkbox') |
|||
.checkbox() |
|||
; |
|||
</div> |
|||
|
|||
<h3 class="ui header">Settings</h3> |
|||
<table class="ui red table segment"> |
|||
<thead> |
|||
<th colspan="3">Checkbox Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>required</td> |
|||
<td>auto</td> |
|||
<td>Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes</td> |
|||
</tr> |
|||
<tr> |
|||
<td>context</td> |
|||
<td>false</td> |
|||
<td>A selector or jQuery object to use as a delegated event context</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onChange</td> |
|||
<td>None</td> |
|||
<td>Callback after a checkbox is either disabled or enabled.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onEnable</td> |
|||
<td>None</td> |
|||
<td>Callback after a checkbox is enabled.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onDisable</td> |
|||
<td>None</td> |
|||
<td>Callback after a checkbox is disabled.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Checkbox</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>checkbox</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,289 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : '' |
|||
|
|||
title : 'Dimmer' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<script src="/javascript/dimmer.js"></script> |
|||
<div class="ui page dimmer"></div> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<div class="ui small download menu"> |
|||
<div class="header item">Links</div> |
|||
<div class="simple ui dropdown item"> |
|||
<i class="icon setting"></i> Download <i class="icon dropdown"></i> |
|||
<div class="menu"> |
|||
<a class="item">Uncompressed</a> |
|||
<a class="item">Minified</a> |
|||
<a class="item">LESS</a> |
|||
</div> |
|||
</div> |
|||
<a class="item"><i class="icon edit"></i> Authoring Guide</a> |
|||
</div> |
|||
<h1 class="ui header"> |
|||
Dimmer |
|||
<div class="sub header">Dimmers focus a users attention on particular content</div> |
|||
</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Usage</a> |
|||
<a class="item">Standard</a> |
|||
<a class="item">Behavior</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h4 class="ui header">Initializing an popup</h4> |
|||
<div class="code"> |
|||
// can be invoked on content that needs to be dimmed |
|||
$('.ui.dimmable') |
|||
.dimmer() |
|||
; |
|||
|
|||
// can be invoked directly on dimmer |
|||
$('.ui.dimmer') |
|||
.dimmer() |
|||
; |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Dimmable</h4> |
|||
<p>A dimmable section can be dimmed</p> |
|||
<div class="ui ignored info message">A dimmer will automatically be inserted the first time you create a dimmer on a dimmable section</div> |
|||
<div class="ui segment"> |
|||
<h4 class="ui header"> |
|||
<i class="icon photos"></i>Dog Photos |
|||
</h4> |
|||
<img src="/images/demo/item1.jpg"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="ignored ui icon buttons"> |
|||
<div class="ui show button"><i class="plus icon"></i></div> |
|||
<div class="ui hide button"><i class="minus icon"></i></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Dimmer with Content</h4> |
|||
<p>A dimmer can display simple messages in a content block</p> |
|||
<div class="ui ignored info message">Messages that are direct descendants of a content block will be vertically centered table cell. To avoid content being stretched include it as child element.</div> |
|||
<div class="ui segment"> |
|||
<h4 class="ui header"> |
|||
<i class="icon photos"></i>Dog Photos |
|||
</h4> |
|||
<img src="/images/demo/item1.jpg"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
<div class="ui dimmer"> |
|||
<div class="content"> |
|||
<div class="center"> |
|||
<h2 class="ui inverted teal block icon header"> |
|||
<i class="icon globe"></i> |
|||
Wait a second |
|||
<div class="sub header">You forgot something</div> |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="ignored ui icon buttons"> |
|||
<div class="ui show button"><i class="plus icon"></i></div> |
|||
<div class="ui hide button"><i class="minus icon"></i></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Page Dimmer</h4> |
|||
<p>A dimmer can be formatted to be fixed to the page</p> |
|||
<div class="ui page dimmer"></div> |
|||
<div class="ui ignored page button"><i class="plus icon"></i> Show</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Stand-alone Dimmer</h4> |
|||
<p>A dimmer can exist on its own without defining content that is /p> |
|||
<div class="ui segment"> |
|||
<h4 class="ui header"> |
|||
<i class="icon photos"></i>Dog Photos |
|||
</h4> |
|||
<img src="/images/demo/item1.jpg"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
<div class="ui dimmer"></div> |
|||
</div> |
|||
<div class="ignored ui icon buttons"> |
|||
<div class="ui show button"><i class="plus icon"></i></div> |
|||
<div class="ui hide button"><i class="minus icon"></i></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Behavior</h2> |
|||
|
|||
|
|||
<div class="no example"> |
|||
<h4>Display</h4> |
|||
<p>A dimmer can show or hide itself, a can show or hide a dimmer</p> |
|||
<div class="ignore code"> |
|||
// these two are the same |
|||
$('.ui.dimmable) |
|||
.dimmer('show') |
|||
; |
|||
$('.ui.dimmer') |
|||
.dimmer('show') |
|||
; |
|||
|
|||
// these two as well |
|||
$('.ui.dimmable) |
|||
.dimmer('hide') |
|||
; |
|||
$('.ui.dimmer') |
|||
.dimmer('hide') |
|||
; |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Active</h4> |
|||
<p>An active dimmer will dim its parent container</p> |
|||
<div class="ui segment"> |
|||
<div class="ui active dimmer"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A disabled dimmer cannot be activated</p> |
|||
<div class="ui segment"> |
|||
<div class="ui disabled dimmer"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<h3>Dimmer</h3> |
|||
<div class="example"> |
|||
<h4 class="ui header">Simple Dimmer</h4> |
|||
<p>A dimmer can be controlled without javascript</p> |
|||
<div class="ignored ui info message">Having any parent element receive the class "dimmed" will trigger the dimmer to display.</div> |
|||
<div class="ui dimmable dimmed segment"> |
|||
<div class="ui simple dimmer"></div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted Dimmer</h4> |
|||
<p>A dimmer can be formatted to have its colors inverted</p> |
|||
<div class="ui segment"> |
|||
<div class="ui inverted dimmer"></div> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> |
|||
</div> |
|||
<div class="ignore ui icon buttons"> |
|||
<div class="ui show button"><i class="plus icon"></i></div> |
|||
<div class="ui hide button"><i class="minus icon"></i></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Settings</h3> |
|||
<table class="ui green table segment"> |
|||
<thead> |
|||
<th colspan="3">Popup Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>closable</td> |
|||
<td>true</td> |
|||
<td>Whether clicking on the dimmer should close it automatically</td> |
|||
</tr> |
|||
<tr> |
|||
<td>duration</td> |
|||
<td>500</td> |
|||
<td>Duration of dimming animation.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onInit</td> |
|||
<td>None</td> |
|||
<td>Callback after a dimmer html is generated.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onShow</td> |
|||
<td>None</td> |
|||
<td>Callback after a dimmer section is shown.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onHide</td> |
|||
<td>None</td> |
|||
<td>Callback after a dimmer section is hidden.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Dimmer</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>dimmer</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,475 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'dropdown' |
|||
|
|||
title : 'Dropdown' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<script src="/components/semantic/modules/dropdown.js"></script> |
|||
<script src="/javascript/dropdown.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Dropdown</h1> |
|||
<p>A dropdown is a hidden list of selections that a user can choose to have appear.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">States</a> |
|||
<a class="item">Behavior</a> |
|||
<a class="item">Usage</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="visible hover example"> |
|||
<h4 class="ui header">Dropdown</h4> |
|||
<p>The markup for a dropdown</p> |
|||
<div class="ui dropdown"> |
|||
Select |
|||
<i class="icon dropdown"></i> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dropdown example"> |
|||
<h4 class="ui header">Button Dropdown</h4> |
|||
<p>A button can be formatted to open a dropdown</p> |
|||
<div class="ui red labeled icon dropdown button"> |
|||
<i class="down settings icon"></i> |
|||
<span class="text">Settings</span> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="dropdown example"> |
|||
<h4 class="ui header">Combo Dropdown</h4> |
|||
<p>A button group can be formatted with a dropdown</p> |
|||
<div class="ui teal buttons"> |
|||
<div class="ui button">Update Post</div> |
|||
<div class="ui teal dropdown icon button"> |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit Post</div> |
|||
<div class="item"><i class="delete icon"></i>Remove Post</div> |
|||
<div class="item"><i class="hide icon"></i>Hide Post</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="hover example"> |
|||
<h4 class="ui header">Menu Dropdown</h4> |
|||
<p>A menu element can contain a dropdown</p> |
|||
<div class="ui compact tiered purple inverted menu"> |
|||
<div class="menu"> |
|||
<a class="active item"> |
|||
<i class="icon home"></i> Home |
|||
</a> |
|||
<a class="ui dropdown item"> |
|||
<i class="icon mail"></i> Messages <i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item"><i class="mail icon"></i>Inbox</div> |
|||
<div class="item"><i class="book icon"></i>Archive</div> |
|||
</div> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="icon community"></i> Browse |
|||
</a> |
|||
</div> |
|||
<div class="sub menu"> |
|||
<div class="active item">Activity Feed</div> |
|||
<div class="item">Profile</div> |
|||
<div class="item">Events</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="form example"> |
|||
<h4 class="ui header">Select</h4> |
|||
<p>A dropdown can be formatted to allow selection inside a form</p> |
|||
<div class="ui form segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Gender</label> |
|||
<div class="ui dropdown selection"> |
|||
<input type="hidden" name="gender"> |
|||
<i class="icon dropdown"></i> |
|||
<div class="text">Male</div> |
|||
<div class="menu"> |
|||
<div class="item" data-value="male">Male</div> |
|||
<div class="item" data-value="female">Female</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
<div class="form example"> |
|||
<h4 class="ui header">Fluid</h4> |
|||
<p>A dropdown can take the full width of its parent</p> |
|||
<div class="ui vertical menu"> |
|||
<a class="item">Link 1</a> |
|||
<a class="item">Link 2</a> |
|||
<div class="header item">All Sections</div> |
|||
<div class="ui item"> |
|||
<div class="ui fluid selection dropdown"> |
|||
More <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> |
|||
</div> |
|||
|
|||
<h4 class="ui header">Pointing Dropdown</h4> |
|||
<p>A dropdown menu can be formatted to point to its content</p> |
|||
|
|||
<div class="another hover example"> |
|||
<p>A standard pointing dropdown</p> |
|||
<div class="ui compact tiered purple inverted menu"> |
|||
<div class="menu"> |
|||
<a class="active item"> |
|||
<i class="icon home"></i> Home |
|||
</a> |
|||
<a class="ui pointing dropdown item"> |
|||
<i class="icon mail"></i> Messages <i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item"><i class="mail icon"></i>Inbox</div> |
|||
<div class="item"><i class="book icon"></i>Archive</div> |
|||
</div> |
|||
</a> |
|||
<a class="item"> |
|||
<i class="icon community"></i> Browse |
|||
</a> |
|||
</div> |
|||
<div class="sub menu"> |
|||
<div class="active item">Activity Feed</div> |
|||
<div class="item">Profile</div> |
|||
<div class="item">Events</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another dropdown example"> |
|||
<p>Top Right Pointing</p> |
|||
<div class="ui red labeled icon top right pointing dropdown button"> |
|||
<i class="settings icon"></i> |
|||
<span class="text">Settings</span> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another dropdown example"> |
|||
<p>Top Left Pointing</p> |
|||
<div class="ui blue labeled icon top left pointing dropdown button"> |
|||
<i class="settings icon"></i> |
|||
<span class="text">Settings</span> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another dropdown example"> |
|||
<p>Left Pointing</p> |
|||
<div class="ui green left pointing dropdown icon button"> |
|||
<i class="settings icon"></i> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another dropdown example"> |
|||
<p>Right Pointing</p> |
|||
<div class="ui teal right pointing dropdown icon button"> |
|||
<i class="settings icon"></i> |
|||
<div class="menu"> |
|||
<div class="item"><i class="edit icon"></i>Edit</div> |
|||
<div class="item"><i class="delete icon"></i>Remove</div> |
|||
<div class="item"><i class="hide icon"></i>Hide</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Simple</h4> |
|||
<p>A dropdown can open without javascript</p> |
|||
<div class="ui compact menu"> |
|||
<div class="ui simple dropdown item"> |
|||
Dropdown <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> |
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Visible</h4> |
|||
<p>A visible dropdown menu has its menu open</p> |
|||
<div class="ui compact menu"> |
|||
<div class="ui simple visible dropdown item"> |
|||
Dropdown <i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item">Choice 1</div> |
|||
<div class="item">Choice 2</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Disabled</h4> |
|||
<p>A disabled dropdown menu will not open or close</p> |
|||
<div class="ui menu"> |
|||
<div class="ui simple disabled dropdown item"> |
|||
Dropdown <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> |
|||
|
|||
<h2 class="ui dividing header">Behavior</h2> |
|||
|
|||
<div class="no example"> |
|||
<h4>Trigger event</h4> |
|||
<p>A dropdown can trigger based on a variety of user events</p> |
|||
<div class="ignore code"> |
|||
// changes dropdown visibility on hover |
|||
$('.ui.dropdown') |
|||
.dropdown({ |
|||
on: 'hover' |
|||
}) |
|||
; |
|||
// changes dropdown visibility on click |
|||
$('.ui.dropdown') |
|||
.dropdown({ |
|||
on: 'click' |
|||
}) |
|||
; |
|||
</div> |
|||
</div> |
|||
<div class="no example"> |
|||
<h4>Dropdown Action</h4> |
|||
<p>A dropdown can trigger different behaviors on selection</p> |
|||
<div class="ignore code"> |
|||
// just hides content |
|||
$('.ui.dropdown') |
|||
.dropdown({ |
|||
action: 'hide' |
|||
}) |
|||
; |
|||
// changes text of matching text selector |
|||
$('.ui.dropdown') |
|||
.dropdown({ |
|||
action: 'changeText' |
|||
}) |
|||
; |
|||
// changes text of matching text selector and hidden input field |
|||
$('.ui.dropdown') |
|||
.dropdown({ |
|||
action: 'form' |
|||
}) |
|||
; |
|||
// triggers custom action |
|||
$('.ui.dropdown') |
|||
.dropdown({ |
|||
action: function() { |
|||
// custom action |
|||
} |
|||
}) |
|||
; |
|||
// triggers a default action and a custom action |
|||
$('.ui.dropdown') |
|||
.dropdown({ |
|||
action: 'hide', |
|||
onChange: function() { |
|||
// do something |
|||
} |
|||
}) |
|||
; |
|||
</div> |
|||
</div> |
|||
<div class="no example"> |
|||
<h4>Display state</h4> |
|||
<p>A dropdown can show or hide itself</p> |
|||
<div class="ignore code"> |
|||
$('.ui.dropdown') |
|||
.dropdown('show') |
|||
; |
|||
$('.ui.dropdown') |
|||
.dropdown('hide') |
|||
; |
|||
</div> |
|||
</div> |
|||
<div class="no example"> |
|||
<h4>Toggle</h4> |
|||
<p>A dropdown can toggle between states</p> |
|||
<div class="ignore code"> |
|||
$('.ui.dropdown') |
|||
.dropdown('toggle') |
|||
; |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h3 class="ui header">Initializing a dropdown</h3> |
|||
<div class="code"> |
|||
$('.ui.dropdown') |
|||
.dropdown() |
|||
; |
|||
</div> |
|||
|
|||
<h3 class="ui header">Defaults</h3> |
|||
<table class="ui red table segment"> |
|||
<thead> |
|||
<th colspan="3">Dropdown Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>on</td> |
|||
<td>click</td> |
|||
<td>Event used to trigger dropdown</td> |
|||
</tr> |
|||
<tr> |
|||
<td>gracePeriod</td> |
|||
<td>300</td> |
|||
<td>Time in milliseconds to allow a user to move cursor back into dropdown before hiding when on event is set to hover</td> |
|||
</tr> |
|||
<tr> |
|||
<td>animation</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
{ |
|||
show: 'slide', |
|||
hide: 'slide' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>action</td> |
|||
<td>hide</td> |
|||
<td>Sets a default action to occur. Possible values are 'nothing', 'form', 'changeText', 'hide'</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onChange</td> |
|||
<td>None</td> |
|||
<td>Callback after a dropdown is either disabled or enabled, receieves name and value of selection.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onShow</td> |
|||
<td>None</td> |
|||
<td>Callback after a dropdown is shown.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onHide</td> |
|||
<td>None</td> |
|||
<td>Callback after a dropdown is hidden.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">General Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Dropdown</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>dropdown</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
action : 'You called a dropdown action that was not defined', |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,335 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'form' |
|||
|
|||
title : 'Validate Form' |
|||
type : 'UI Behavior' |
|||
--- |
|||
|
|||
<script src="/components/semantic/modules/behavior/form.js"></script> |
|||
<script src="/javascript/validate-form.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Form Validation</h1> |
|||
<p>Form validation checks user input data against a set of criteria before passing along the data to the server.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="item">Usage</a> |
|||
<a class="item">Settings</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Basic Validation</h4> |
|||
<p>Form validation requires passing in a validation object with the rules required to validate your form.</p> |
|||
<!-- <div class="ui green message">If no validation object is specified then the form will validate against the default validation set up for the plugin. See <em>default validation</em> below.</div> --> |
|||
<div class="ignore code"> |
|||
$('.ui.form') |
|||
.form({ |
|||
firstName: { |
|||
identifier : 'first-name', |
|||
rules: [ |
|||
{ |
|||
type : 'empty', |
|||
prompt : 'Please enter your first name' |
|||
} |
|||
] |
|||
}, |
|||
lastName: { |
|||
identifier : 'last-name', |
|||
rules: [ |
|||
{ |
|||
type : 'empty', |
|||
prompt : 'Please enter your last name' |
|||
} |
|||
] |
|||
}, |
|||
username: { |
|||
identifier : 'username', |
|||
rules: [ |
|||
{ |
|||
type : 'empty', |
|||
prompt : 'Please enter a username' |
|||
} |
|||
] |
|||
}, |
|||
password: { |
|||
identifier : 'password', |
|||
rules: [ |
|||
{ |
|||
type : 'empty', |
|||
prompt : 'Please enter a password' |
|||
}, |
|||
{ |
|||
type : 'length[6]', |
|||
prompt : 'Your password must be at least 6 characters' |
|||
} |
|||
] |
|||
} |
|||
terms: { |
|||
identifier : 'terms', |
|||
rules: [ |
|||
{ |
|||
type : 'checked', |
|||
prompt : 'You must agree to the terms and conditions' |
|||
} |
|||
] |
|||
} |
|||
}) |
|||
; |
|||
</div> |
|||
<div class="ui form segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" name="first-name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" name="last-name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" name="username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password" name="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" name="terms" /> |
|||
<label class="box"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Validation w/ Message</h4> |
|||
<p>Forms that contain a <a href="elements/message.html">ui message</a> error block will automatically be filled in with form validation information.</p> |
|||
<div class="info message">The template for error messages can be modified by adjusting settings.template.error</div> |
|||
|
|||
<div class="ui form segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" name="first-name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" name="last-name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" name="username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password" name="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" name="terms" /> |
|||
<label class="box"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
<div class="ui error message"></div> |
|||
</div> |
|||
</div> |
|||
<div class="dog example"> |
|||
<h4>Custom Validation</h4> |
|||
<p>Custom form validation requires passing in a validation object with the rules required to validate your form.</p> |
|||
<div class="ui info message"> |
|||
<i class="help icon"></i>A validation object includes a list of form elements, and rules to validate each against. Fields are matched by either the id tag, name tag, or data-validate metadata matching the identifier provided in the settings object. To pass parameters to a rule, use bracket notation |
|||
</div> |
|||
<div class="ignore code"> |
|||
$('.ui.form') |
|||
.form({ |
|||
dog: { |
|||
identifier: 'dog', |
|||
rules: [ |
|||
{ |
|||
type: 'empty', |
|||
prompt: 'You must have a dog to add' |
|||
}, |
|||
{ |
|||
type: 'is[fluffy dog]', |
|||
prompt: 'I only want you to add fluffy dogs!' |
|||
}, |
|||
{ |
|||
type: 'not[mean]', |
|||
prompt: 'Why would you add a mean dog to the list?' |
|||
} |
|||
] |
|||
} |
|||
}) |
|||
; |
|||
</div> |
|||
<div class="ui form segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="field"> |
|||
<label>Dog</label> |
|||
<input placeholder="Dog" name="dog" type="text"> |
|||
</div> |
|||
<div class="ui blue submit button">Add Dog <i class="add icon"></i></div> |
|||
<div class="ui error message"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="inline example"> |
|||
<h4>Inline Validation</h4> |
|||
<p>Validation messages can also appear inline. UI Forms automatically format <a href="/elements/label.html">labels</a> with the className prompt. These validation prompts are also set to appear on input change instead of form submission.</p> |
|||
<div class="ui form segment"> |
|||
<p>Let's go ahead and get you signed up.</p> |
|||
<div class="two fields"> |
|||
<div class="field"> |
|||
<label>First Name</label> |
|||
<input placeholder="First Name" name="first-name" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Last Name</label> |
|||
<input placeholder="Last Name" name="last-name" type="text"> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Username</label> |
|||
<input placeholder="Username" name="username" type="text"> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Password</label> |
|||
<input type="password" name="password"> |
|||
</div> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" name="terms" /> |
|||
<label class="box"></label> |
|||
</div> |
|||
<label>I agree to the terms and conditions</label> |
|||
</div> |
|||
<div class="ui blue submit button">Submit</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2>Settings</h2> |
|||
|
|||
<h3 class="ui header">Defaults</h3> |
|||
<table class="ui red table segment"> |
|||
<thead> |
|||
<th colspan="3">Form Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>keyboardShortcuts</td> |
|||
<td>true</td> |
|||
<td>Adds keyboard shortcuts for enter and escape keys to submit form and blur fields respectively</td> |
|||
</tr> |
|||
<tr> |
|||
<td>on</td> |
|||
<td>click</td> |
|||
<td>Event used to trigger validation. Can be either submit or change</td> |
|||
</tr> |
|||
<tr> |
|||
<td>inlineError</td> |
|||
<td>false</td> |
|||
<td>Adds prompt text from template on validation error</td> |
|||
</tr> |
|||
<tr> |
|||
<td>animationDuration</td> |
|||
<td>150</td> |
|||
<td>Fade in speed for inline prompt</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onValid</td> |
|||
<td>None</td> |
|||
<td>Callback on each valid field</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onInvalid</td> |
|||
<td>None</td> |
|||
<td>Callback on each invalid field</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onSuccess</td> |
|||
<td>None</td> |
|||
<td>Callback if a form is all valid</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onFailure</td> |
|||
<td>None</td> |
|||
<td>Callback if any form field is invalid</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">General Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Form</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>form</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
action : 'You called a form action that was not defined', |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,270 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'popup' |
|||
|
|||
title : 'Popup' |
|||
type : 'UI Module' |
|||
--- |
|||
<script src="/javascript/popup.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Popup</h1> |
|||
<p>A popup displays additional information on top of a page element.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Usage</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Popup</h4> |
|||
<p>A standard popup</p> |
|||
<i class="sketchy question icon link" data-content="Hello. This is a popup"></i> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Size</h4> |
|||
<p>A popup can be large or small</p> |
|||
<i class="sketchy question icon link" data-content="Hello. This is a small popup" data-variation="small"></i> |
|||
<i class="sketchy question icon link" data-content="Hello. This is a large popup" data-variation="large"></i> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Inverted</h4> |
|||
<p>A popup can have its colors inverted</p> |
|||
<i class="sketchy question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Usage</h2> |
|||
|
|||
<h4 class="ui header">Initializing an popup</h4> |
|||
<div class="code"> |
|||
$('.ui.popup') |
|||
.popup() |
|||
; |
|||
</div> |
|||
|
|||
<h4 class="ui header">Including metadata</h4> |
|||
<p>Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata<p> |
|||
<div class="ui info icon ignored message"> |
|||
<i class="icon sketchy question circle"></i> |
|||
<div class="content"> |
|||
<div class="header">Specifying Content</div> |
|||
<p>Popups can specify content in three ways:<p> |
|||
<ul class="list"> |
|||
<li>Using html title attribute</li> |
|||
<li>Using data-content attribute</li> |
|||
<li>Using the content property in the initialization of the popup</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div class="code" data-type="html"> |
|||
<i class="sketchy question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Examples</h2> |
|||
|
|||
<div class="example segment"> |
|||
<h4 class="ui header">Positioning</h4> |
|||
<p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p> |
|||
<i class="sketchy question icon link" data-content="Top Left" data-position="top left"></i> |
|||
<i class="sketchy question icon link" data-content="Top Center" data-position="top center"></i> |
|||
<i class="sketchy question icon link" data-content="Top Right" data-position="top right"></i> |
|||
<i class="sketchy question icon link" data-content="Left Center" data-position="left center"></i> |
|||
<i class="sketchy question icon link" data-content="Right Center" data-position="right center"></i> |
|||
<i class="sketchy question icon link" data-content="Bottom Left" data-position="bottom left"></i> |
|||
<i class="sketchy question icon link" data-content="Bottom Center " data-position="bottom center"></i> |
|||
<i class="sketchy question icon link" data-content="Bottom Right" data-position="bottom right"></i> |
|||
</div> |
|||
|
|||
<div class="example segment"> |
|||
<h4 class="ui header">Title</h4> |
|||
<p>A popup can be formatted with a title</p> |
|||
<i class="sketchy question icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i> |
|||
</div> |
|||
|
|||
<div class="example segment"> |
|||
<h4 class="ui header">HTML</h4> |
|||
<p>A popup can be formatted with html</p> |
|||
<i class="sketchy question icon link" data-html="<strike>I rescind my comment about cats</strike>"></i> |
|||
</div> |
|||
|
|||
|
|||
<h3 class="ui header">Settings</h3> |
|||
<table class="ui red table segment"> |
|||
<thead> |
|||
<th colspan="3">Content</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>content</td> |
|||
<td></td> |
|||
<td>Content to display</td> |
|||
</tr> |
|||
<tr> |
|||
<td>title</td> |
|||
<td></td> |
|||
<td>Title to display alongside content</td> |
|||
</tr> |
|||
<tr> |
|||
<td>html</td> |
|||
<td></td> |
|||
<td>HTML content to display instead of preformatted title and content</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<table class="ui green table segment"> |
|||
<thead> |
|||
<th colspan="3">Popup Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>inline</td> |
|||
<td>true</td> |
|||
<td>If a popup is inline it will be created next to current element, allowing for local css rules to apply. Otherwise popups will appended to body and removed after being hidden.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>delay</td> |
|||
<td>0</td> |
|||
<td>Delay in milliseconds before showing a popup when using hover events.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>variation</td> |
|||
<td></td> |
|||
<td>Popup variation to use, can use multiple variations with a space delimiter</td> |
|||
</tr> |
|||
<tr> |
|||
<td>on</td> |
|||
<td>hover</td> |
|||
<td>Event used to invoke popup</td> |
|||
</tr> |
|||
<tr> |
|||
<td>clickToClose</td> |
|||
<td>hover</td> |
|||
<td>Whether clicking anywhere outside a popup should close it.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>position</td> |
|||
<td>top center</td> |
|||
<td>Position that the popup should appear</td> |
|||
</tr> |
|||
<tr> |
|||
<td>distanceAway</td> |
|||
<td>0</td> |
|||
<td>Distance away from element for the popup to appear.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>arrowOffset</td> |
|||
<td>0</td> |
|||
<td>Offset to apply to arrow positioning of element</td> |
|||
</tr> |
|||
<tr> |
|||
<td>maxSearchDepth</td> |
|||
<td>10</td> |
|||
<td>Number of iterations before giving up search for popup position when a popup cannot fit on screen</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">Animation</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>animation</td> |
|||
<td>Pop</td> |
|||
<td>Animation to use, can be set to either pop or fade.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>duration</td> |
|||
<td>250</td> |
|||
<td>Duration of popup animation.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>easing</td> |
|||
<td>easeOutQuint</td> |
|||
<td>Easing equation for popup animation</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui teal table segment"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>onInit</td> |
|||
<td>None</td> |
|||
<td>Callback after a popup html is generated.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onShow</td> |
|||
<td>None</td> |
|||
<td>Callback after a popup section is shown.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onHide</td> |
|||
<td>None</td> |
|||
<td>Callback after a popup section is hidden.</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<table class="ui blue table segment"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Popup</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides performance output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>popup</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code"> |
|||
errors : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,170 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'reveal' |
|||
|
|||
title : 'Reveal' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Reveal</h1> |
|||
<p>A reveal is an element that shows different content below it when hovered</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Types</a> |
|||
<a class="item">Variations</a> |
|||
<a class="item">States</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Reveal</h4> |
|||
<p>The markup for a reveal</p> |
|||
<div class="ui message"> |
|||
A reveal will take no action unless a type of reveal is specified and has no specific styling of its own. It can be used effectively with other elements like, <a href="/elements/message.html">message blocks</a>, <a href="/elements/segment.html">segments</a>, and <a href="/elements/images.html">images</a>. |
|||
</div> |
|||
<div class="ui circular reveal image"> |
|||
<img class="visible content" src="/images/demo/stickfigure.jpg"> |
|||
<img class="hidden content" src="/images/demo/photo2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Types</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Slide</h4> |
|||
<p>An element can slide revealing content along-side it</p> |
|||
<div class="ui slide reveal compact message"> |
|||
<div class="visible content"> |
|||
<p>Do you want to check out a call to action just hover your mouse over this text block</p> |
|||
<p>It's actually right next to this one</p> |
|||
<p>Not obvious or anything</p> |
|||
</div> |
|||
<div class="hidden content"> |
|||
<p>Bam another message</p> |
|||
<div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui green right slide reveal button"> |
|||
<div class="visible content">Sign up for the newsletter</div> |
|||
<div class="hidden content">Thanks!</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui slide up reveal compact message"> |
|||
<div class="visible content"> |
|||
<p>Do you want to check out a call to action just hover your mouse over this text block</p> |
|||
<p>It's actually right next to this one</p> |
|||
</div> |
|||
<div class="hidden content"> |
|||
Bam another message |
|||
<div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui slide down reveal compact message"> |
|||
<div class="visible content"> |
|||
<p>Do you want to check out a call to action just hover your mouse over this text block</p> |
|||
<p>It's actually right next to this one</p> |
|||
</div> |
|||
<div class="hidden content"> |
|||
Bam another message |
|||
<div class="ui teal labeled icon button"><i class="sketchy x icon"></i> Bam here i am</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Fade</h4> |
|||
<p>An element can disappear to reveal content below</p> |
|||
<div class="ui fade reveal image"> |
|||
<img class="visible content" src="/images/demo/invention.jpg"> |
|||
<img class="hidden content" src="/images/demo/invention2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Move</h4> |
|||
<p>An element can move in a direction to reveal content</p> |
|||
<div class="ui move reveal image"> |
|||
<img class="visible content" src="/images/demo/invention.jpg"> |
|||
<img class="hidden content" src="/images/demo/invention2.jpg"> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui move right reveal image"> |
|||
<img class="visible content" src="/images/demo/invention.jpg"> |
|||
<img class="hidden content" src="/images/demo/invention2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="another example"> |
|||
<div class="ui move up reveal image"> |
|||
<img class="visible content" src="/images/demo/invention.jpg"> |
|||
<img class="hidden content" src="/images/demo/invention2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="another example"> |
|||
<div class="ui move down reveal image"> |
|||
<img class="visible content" src="/images/demo/invention.jpg"> |
|||
<img class="hidden content" src="/images/demo/invention2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Rotate</h4> |
|||
<p>An element can rotate to reveal content below</p> |
|||
<div class="ui circular rotate reveal image"> |
|||
<img class="visible content" src="/images/demo/stickfigure.jpg"> |
|||
<img class="hidden content" src="/images/demo/photo2.jpg"> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<div class="ui circular rotate left reveal image"> |
|||
<img class="visible content" src="/images/demo/stickfigure.jpg"> |
|||
<img class="hidden content" src="/images/demo/photo2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Masked</h4> |
|||
<p>An element can mask its content so that an element does not escape its parent</p> |
|||
<div class="ui circular masked move reveal image"> |
|||
<img class="visible content" src="/images/demo/stickfigure.jpg"> |
|||
<img class="hidden content" src="/images/demo/photo2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Instant</h4> |
|||
<p>An element can show its content without delay</p> |
|||
<div class="ui circular instant move reveal image"> |
|||
<img class="visible content" src="/images/demo/stickfigure.jpg"> |
|||
<img class="hidden content" src="/images/demo/photo2.jpg"> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">States</h2> |
|||
|
|||
|
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,373 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'shape' |
|||
|
|||
title : 'Shape' |
|||
type : 'UI Module' |
|||
--- |
|||
|
|||
<link rel="stylesheet" type="text/css" href="/stylesheets/shape.css"> |
|||
<script src="/components/semantic/modules/shape.js"></script> |
|||
<script src="/javascript/shape.js"></script> |
|||
|
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Shape</h1> |
|||
<p>Shapes are three dimensional objects displayed on a 2d plane.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Examples</a> |
|||
<a class="item">Getting Started</a> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="ui info message">The module uses 3D transformations which are currently only supported in modern versions of Chrome, Safari, and Firefox.</div> |
|||
|
|||
<div class="shown example"> |
|||
<h4 class="ui header">Shape</h4> |
|||
<p>A shape has multiple sides of arbitrary content. Only one is visible</p> |
|||
|
|||
<div class="ui shape"> |
|||
<div class="sides"> |
|||
<div class="active side">This side is visible.</div> |
|||
<div class="side">This side is not visible.</div> |
|||
<div class="side">This side is not visible.</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Examples</h2> |
|||
|
|||
<h3 class="ui header">Automatic</h3> |
|||
<div class="dog two ui shape"> |
|||
<div class="sides"> |
|||
<div class="active side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item1.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item3.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="meta">5 days ago</div> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dog one ui shape"> |
|||
<div class="sides"> |
|||
<div class="active side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item4.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item5.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="meta">5 days ago</div> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="dog three ui shape"> |
|||
<div class="sides"> |
|||
<div class="active side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item1.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item3.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="side"> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="ui like corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="meta">5 days ago</div> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui clearing divider"></div> |
|||
|
|||
<h3 class="ui header">Interactive</h3> |
|||
<div class="demo square ui shape"> |
|||
<div class="sides"> |
|||
<div class="active jira side"> |
|||
<img src="/images/shape/jira.png"> |
|||
</div> |
|||
<div class="heroku side"> |
|||
<img src="/images/shape/heroku.png"> |
|||
</div> |
|||
<div class="quirky side"> |
|||
<img src="/images/shape/quirky.png"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Shape</h3> |
|||
<div class="ui shape buttons"> |
|||
<div class="active ui button" data-shape="square">Square</div> |
|||
<div class="ui button" data-shape="rectangle">Rectangle</div> |
|||
<div class="ui button" data-shape="irregular">Irregular</div> |
|||
</div> |
|||
|
|||
<h3 class="ui header">Flip</h3> |
|||
<div class="ui direction buttons"> |
|||
<div class="ui button" data-animation="flip" data-direction="left">Left</div> |
|||
<div class="ui button" data-animation="flip" data-direction="right">Right</div> |
|||
<div class="ui button" data-animation="flip" data-direction="up">Up</div> |
|||
<div class="ui button" data-animation="flip" data-direction="down">Down</div> |
|||
<div class="ui button" data-animation="flip" data-direction="over">Over</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Getting Started</h2> |
|||
|
|||
<p>Initializing a shape</p> |
|||
<div class="code">$('.shape') |
|||
.shape() |
|||
;</div> |
|||
|
|||
<p>Transitions automatically assume next side is the next sibling (or first if last element)</p> |
|||
<div class="code">$('.shape') |
|||
.shape('flip.up') |
|||
;</div> |
|||
|
|||
<p>To manually set the next side to appear use a selector or jQuery object</p> |
|||
<div class="code">$('.shape') |
|||
.shape('set.nextSide', '.second') |
|||
.shape('flip.up') |
|||
;</div> |
|||
|
|||
<p>Any internal method can be invoked programmatically</p> |
|||
<div class="code">$('.shape') |
|||
.shape('repaint') |
|||
;</div> |
|||
|
|||
<h3 class="ui header">Defaults</h3> |
|||
<table class="ui settings table"> |
|||
<thead> |
|||
<th colspan="3">Shape Settings</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>useCSS</td> |
|||
<td>True</td> |
|||
<td>Not currently supported. Will allow for use of javascript requestAnimationFrame transitions instead of css3 transitions.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>duration</td> |
|||
<td>1000ms</td> |
|||
<td>Duration of animation (javascript only). To modify animation duration for css simply modify the css property transition-duration.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>easing</td> |
|||
<td>easeInOutQuad</td> |
|||
<td>Easing equation for animation (javascript only). To modify the easing for css simply modify the css property transition-easing</td> |
|||
</tr> |
|||
<tr> |
|||
<td>selector</td> |
|||
<td> |
|||
<div class="code" data-type="css">{ |
|||
shape : '.shape', |
|||
side : '.side' |
|||
}</div> |
|||
</td> |
|||
<td>Object containing selectors used by module.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>className</td> |
|||
<td> |
|||
<div class="code">{ |
|||
css : 'css', |
|||
animating : 'animating', |
|||
hidden : 'hidden', |
|||
active : 'active' |
|||
}</div> |
|||
</td> |
|||
<td>Object containing class names used by module.</td> |
|||
</tr> |
|||
</table> |
|||
<table class="ui settings table"> |
|||
<thead> |
|||
<th colspan="3">Callbacks</th> |
|||
</thead> |
|||
<tr> |
|||
<td>beforeChange</td> |
|||
<td>None</td> |
|||
<td>Callback before side is changed. This context is the new side.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>onChange</td> |
|||
<td>None</td> |
|||
<td>Callback after side is changed. This context is new side.</td> |
|||
</tr> |
|||
</table> |
|||
<table class="ui settings table"> |
|||
<thead> |
|||
<th colspan="3">UI Module Settings</th> |
|||
</thead> |
|||
<tr> |
|||
<td>moduleName</td> |
|||
<td>Shape</td> |
|||
<td>Name used in debug logs</td> |
|||
</tr> |
|||
<tr> |
|||
<td>debug</td> |
|||
<td>True</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>performance</td> |
|||
<td>False</td> |
|||
<td>Provides standard debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>verbose</td> |
|||
<td>False</td> |
|||
<td>Provides ancillary debug output to console</td> |
|||
</tr> |
|||
<tr> |
|||
<td>namespace</td> |
|||
<td>shape</td> |
|||
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>errors</td> |
|||
<td colspan="2"> |
|||
<div class="code">{ |
|||
side : 'You tried to switch to a side that does not exist.', |
|||
method : 'The method you called is not defined' |
|||
}</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,190 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'playground' |
|||
|
|||
title : 'Playground' |
|||
type : 'Library' |
|||
--- |
|||
<% uiElements = @getCollection("documents").findAllLive({type: $in: ['UI Element']},[{title: 1}]).toJSON() %> |
|||
<% uiCollections = @getCollection("documents").findAllLive({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %> |
|||
<% uiModules = @getCollection("documents").findAllLive({type: $in: ['UI Module']},[{title: 1}]).toJSON() %> |
|||
<% uiViews = @getCollection("documents").findAllLive({type: $in: ['UI View']},[{title: 1}]).toJSON() %> |
|||
<script src="/javascript/library/zencoding.js"></script> |
|||
<script src="/javascript/library/handlebars.js"></script> |
|||
<script src="/components/semantic/modules/dropdown.js"></script> |
|||
<script src="/components/semantic/modules/behavior/api.js"></script> |
|||
<script src="/javascript/playground.js"></script> |
|||
|
|||
<div class="ui page grid center aligned title"> |
|||
<div class="ten wide column"> |
|||
<h1 class="ui dividing header"> |
|||
<i class="icon circular lab"></i> Playground |
|||
</h1> |
|||
</div> |
|||
</div> |
|||
<div class="ui page grid"> |
|||
<div class="ui three wide column"> |
|||
<div class="ui fluid vertical ui element menu"> |
|||
<div class="header item">Choose UI</div> |
|||
<div class="item"> |
|||
<form class="ui form"> |
|||
<div class="field"> |
|||
<label>Elements</label> |
|||
<div class="ui fluid dropdown selection"> |
|||
<input type="hidden" name="element"> |
|||
<i class="icon dropdown"></i> |
|||
<div class="text">Button</div> |
|||
<div class="menu"> |
|||
<% for element in uiElements: %> |
|||
<div data-value="<%= element.title.toLowerCase() %>" class="item"> |
|||
<%= element.title %> |
|||
</div> |
|||
<% end %> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Collections</label> |
|||
<div class="ui fluid dropdown selection"> |
|||
<input type="hidden" name="collection"> |
|||
<i class="icon dropdown"></i> |
|||
<div class="text">---</div> |
|||
<div class="menu"> |
|||
<% for element in uiCollections: %> |
|||
<div data-value="<%= element.title.toLowerCase() %>" class="item"> |
|||
<%= element.title %> |
|||
</div> |
|||
<% end %> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Modules</label> |
|||
<div class="ui fluid dropdown selection"> |
|||
<input type="hidden" name="module"> |
|||
<i class="icon dropdown"></i> |
|||
<div class="text">---</div> |
|||
<div class="menu"> |
|||
<% for element in uiModules: %> |
|||
<div data-value="<%= element.title.toLowerCase() %>" class="item"> |
|||
<%= element.title %> |
|||
</div> |
|||
<% end %> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="field"> |
|||
<label>Views</label> |
|||
<div class="ui fluid dropdown selection"> |
|||
<input type="hidden" name="view"> |
|||
<i class="icon dropdown"></i> |
|||
<div class="text">---</div> |
|||
<div class="menu"> |
|||
<% for element in uiViews: %> |
|||
<div data-value="<%= element.title.toLowerCase() %>" class="item"> |
|||
<%= element.title %> |
|||
</div> |
|||
<% end %> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="type menu"> |
|||
<div class="header item">Types</div> |
|||
<div class="type item"> |
|||
<form class="ui form"> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
<div class="variation menu"> |
|||
<div class="header item">Variations</div> |
|||
<div class="variation item"> |
|||
<form class="ui form"> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="ui large red fluid add button"><i class="icon add"></i>Add</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
<div class="ui ten wide default page column"> |
|||
<div class="ui raised segment"> |
|||
<div class="ui large message warning"> |
|||
<div class="header"><i class="icon empty heart"></i> No Designs Yet!</div> |
|||
Add an element to the left to begin |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="three wide column"> |
|||
|
|||
<div class="ui purple segment"> |
|||
<div class="ui small dividing header">Preview</div> |
|||
<div class="ui secondary preview segment"> |
|||
</div> |
|||
</div> |
|||
<div class="ui blue segment"> |
|||
<div class="ui small dividing header">Text</div> |
|||
<div class="ui form"> |
|||
<div class="field"> |
|||
<textarea class="text"></textarea> |
|||
</div> |
|||
<div class="ui fluid blue button">Update Text</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui green segment"> |
|||
<div class="ui small dividing header">View</div> |
|||
<div class="ui two fluid secondary view buttons"> |
|||
<div class="ui active preview button">Preview</div> |
|||
<div class="ui html button">Code</div> |
|||
</div> |
|||
<div class="ui small dividing header">Finish Up</div> |
|||
<div class="ui positive secondary fluid download button">Download</div> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
|
|||
<script class="checkbox" type="text/x-handlebars-template"> |
|||
<div class="inline field"> |
|||
<div class="ui checkbox"> |
|||
<input type="checkbox" name="{{name}}" value="{{value}}" /> |
|||
<div class="box"></div> |
|||
</div> |
|||
{{#if name}} |
|||
<label>{{name}}</label> |
|||
{{else}} |
|||
<label>{{uppercase value}}</label> |
|||
{{/if}} |
|||
</div> |
|||
</script> |
|||
|
|||
|
|||
<script class="select" type="text/x-handlebars-template"> |
|||
<div class="field"> |
|||
<label>{{name}}</label> |
|||
<div class="ui fluid dropdown {{value}} selection"> |
|||
<input type="hidden" name="{{name}}" value="none"> |
|||
<i class="icon dropdown"></i> |
|||
<div class="text">Standard</div> |
|||
<div class="menu"> |
|||
<div class="item" data-value="none">---</div> |
|||
{{#each values}} |
|||
{{#if @key}} |
|||
<div data-value="{{this}}" class="item"> |
|||
{{@key}} |
|||
</div> |
|||
{{else}} |
|||
<div data-value="{{this}}" class="item"> |
|||
{{uppercase this}} |
|||
</div> |
|||
{{/if}} |
|||
{{/each}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</script> |
|||
|
|||
</html> |
|||
@ -0,0 +1,219 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'sink' |
|||
|
|||
title : 'Roadmap' |
|||
type : 'Other' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Project Roadmap</h1> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="ui icon info message"> |
|||
<i class="icon heart"></i> |
|||
<div class="content"> |
|||
<div class="header"> |
|||
Progress Report |
|||
</div> |
|||
<p>Current status of work on Semantic UI</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui divider simple"></div> |
|||
|
|||
<div class="ui black top attached menu"> |
|||
<div class="item"> |
|||
<b>Redesign Timeline</b> |
|||
</div> |
|||
<div class="borderless item"> |
|||
<div class="ui red label">6.5 <div class="detail">days left</div></div> |
|||
</div> |
|||
</div> |
|||
<div class="ui bottom attached segment"> |
|||
<div class="ui message"> |
|||
<div class="header">UI Elements</div> |
|||
<p>This is an estimate of total time left to compete reskin and docs for the following elements</p> |
|||
</div> |
|||
<table class="ui sortable table"> |
|||
<thead> |
|||
<th>UI Element</th> |
|||
<th>Estimated</th> |
|||
<th>Spent</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>Button</td> |
|||
<td>1</td> |
|||
<td>1</td> |
|||
<td class="positive">Complete</td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Text Block</td> |
|||
<td>0.5</td> |
|||
<td>0.5</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Header</td> |
|||
<td>0.5</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Grid</td> |
|||
<td>1</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Divider</td> |
|||
<td>0.25</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Tags</td> |
|||
<td>0.25</td> |
|||
<td>0.25</td> |
|||
<td class="positive">Complete</td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Labels</td> |
|||
<td>0.5</td> |
|||
<td>0</td> |
|||
<td class="positive">Complete</td> |
|||
<td> |
|||
Changes:<br> |
|||
- Consolidated into tags |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Icons</td> |
|||
<td>1</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Menu</td> |
|||
<td>3</td> |
|||
<td>1</td> |
|||
<td class="positive">Complete</td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Throbber</td> |
|||
<td>1</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Video</td> |
|||
<td>0.5</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Steps</td> |
|||
<td>0.5</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Segment</td> |
|||
<td>0.5</td> |
|||
<td>0.25</td> |
|||
<td class="warning">In Progress</td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Table</td> |
|||
<td>0.5</td> |
|||
<td>1</td> |
|||
<td class="negative">Complete</td> |
|||
<td></td> |
|||
</tr> |
|||
<tfoot> |
|||
<th>14 Elements</th> |
|||
<th>10.5 days</th> |
|||
<th>4 days</th> |
|||
<th></th> |
|||
<th></th> |
|||
</tfoot> |
|||
</tbody> |
|||
</table> |
|||
<div class="ui divider"></div> |
|||
<div class="ui message"> |
|||
<div class="header">UI Collections</div> |
|||
</div> |
|||
<table class="ui sortable table"> |
|||
<thead> |
|||
<th>Name</th> |
|||
<th>Estimated</th> |
|||
<th>Spent</th> |
|||
<th>Status</th> |
|||
<th>Notes</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>Activity Feed</td> |
|||
<td>1</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Forms</td> |
|||
<td>2 days</td> |
|||
<td>1</td> |
|||
<td class="positive">Complete</td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>List View</td> |
|||
<td>0.75</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Item View</td> |
|||
<td>1</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>User List View</td> |
|||
<td>0.5</td> |
|||
<td>0</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tfoot> |
|||
<th>5 Elements</th> |
|||
<th>5.25 days</th> |
|||
<th>1 days</th> |
|||
<th></th> |
|||
<th></th> |
|||
</tfoot> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,138 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'guide' |
|||
|
|||
title : 'Spec Files' |
|||
type : 'UI Specification' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui header">Spec Files</h1> |
|||
<div class="ui large red message"> |
|||
This is a starting draft, check back later. |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<h2>Introduction</h2> |
|||
|
|||
<p>Semantic defines an exchange format for user interface. Writing your interface components to match the specifications allows others to easily use your interface components in their project.</p> |
|||
|
|||
|
|||
<h3>Writing a Spec File</h3> |
|||
|
|||
<p>Before authoring an element you should begin by writing a spec file for your element. A specification file defines the structure and names used inside your element. For more information on naming convention visit our css and html guides.</p> |
|||
<p>A spec file also allows you to provide metadata to generate code for your element, this can be used to generate visual documentation of your element.</p> |
|||
|
|||
<h3>Common Specification</h3> |
|||
|
|||
<p>A spec file is a specially formatted json file.</p> |
|||
<div class="code" type="javascript"> |
|||
{ |
|||
// your element name should be a single word and match to the classname of your element |
|||
"Name": "Button", |
|||
|
|||
// you may include metadata |
|||
"Author": "Jack Lukic", |
|||
"Website": "http://www.semantic-ui.com" |
|||
"Version": "2.0", |
|||
|
|||
// All elements must specify whether it is an element, collection, module, or behavior |
|||
"Type": "Element", |
|||
|
|||
// Types are exclusive forms of your element. For example a button cannot be an icon button and a text button. The definitions of the html structure of each element is written using emmet syntax. These are used to generate html structures for your elements. For more information visit: http://docs.emmet.io/abbreviations/syntax/ |
|||
"Types": { |
|||
"Standard" : ".ui.button", |
|||
"Icon" : ".ui.icon.button > i.icon", |
|||
} |
|||
|
|||
// States are ways which elements show an innate change in its quality. |
|||
"States": { |
|||
"Active" : "active", |
|||
"Loading" : "loading", |
|||
"Disabled" : "disabled" |
|||
}, |
|||
|
|||
|
|||
// Variations are individual classnames which your element may receive to alter its look. Variations should, for the most part, be able to be used together to create more complex styles of an element. |
|||
"Variations": { |
|||
// If a set of variations are options of a single type (for example sizing may contain, small, medium, etc) then this can be defined as an array. |
|||
"Size": [ |
|||
"mini", |
|||
"tiny", |
|||
"small", |
|||
"medium", |
|||
"large", |
|||
"huge", |
|||
"massive" |
|||
], |
|||
"Color": [ |
|||
"black", |
|||
"green", |
|||
"red", |
|||
"blue", |
|||
"green", |
|||
"red", |
|||
"teal" |
|||
], |
|||
"Ordinality": [ |
|||
"secondary", |
|||
"tertiary" |
|||
], |
|||
"Attached": [ |
|||
"attached top", |
|||
"attached bottom", |
|||
"attached left", |
|||
"attached right" |
|||
], |
|||
"Circular" : "circular", |
|||
"Fluid" : "fluid" |
|||
}, |
|||
|
|||
// You may define a list of dummy text and selectors which can be filled with them. This is used by generators to export a style guide of your interface element. If you specify an array, each item will be used in order to fill the content of each match. |
|||
"Text": { |
|||
".ui.button": ["Button", "Click Me", "Lorem Ipsum"] |
|||
}, |
|||
|
|||
// Your module may optionally include a text definition of its variations to help clarify their purpose. This may include the definition of types or variations |
|||
"Definition": { |
|||
"Standard" : "A simple button", |
|||
"Icon" : "A button icon is formatted to contain only an icon", |
|||
"Size" : "A button can vary in size", |
|||
"Color" : "A button can have different colors", |
|||
"Ordinality" : "A button can blend into a page", |
|||
"Attached" : "A button can attach to other content", |
|||
"Circular" : "A button can be circular", |
|||
"Fluid" : "A button can be fluid" |
|||
} |
|||
} |
|||
</div> |
|||
|
|||
<h3>UI Elements</h3> |
|||
|
|||
<p>A UI element is a basic building block of a website. It may have a singular or group (plural) definition</p> |
|||
|
|||
<div class="code" type="javascript"> |
|||
{ |
|||
// in addition to the parameters above an element may contain a definition for its singular and plural type |
|||
"Types": { |
|||
// these types can only exist for class="ui button" |
|||
"Singular": { |
|||
"Standard" : ".ui.button", |
|||
"Icon" : ".ui.icon.button > i.add.icon", |
|||
"Labeled Icon" : ".ui.labeled.icon.button > i.add.icon" |
|||
}, |
|||
// these types can exist only for class="ui button" |
|||
"Group": { |
|||
"Standard" : ".ui.buttons > .button+.button+.button", |
|||
"Icon" : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))", |
|||
"Conditional" : ".ui.buttons > .button+.or+.button", |
|||
"Vertical" : ".vertical.ui.buttons > .button+.button+.button" |
|||
} |
|||
} |
|||
} |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,542 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'comment' |
|||
|
|||
title : 'Comment' |
|||
type : 'UI View' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Comment</h1> |
|||
<p>A comment view is used to display lists of user feedback to site content.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Content</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Comments</h4> |
|||
<p>A basic list of comments</p> |
|||
|
|||
<div class="ui two column grid"> |
|||
<div class="column"> |
|||
<div class="ui piled blue segment"> |
|||
<h2 class="ui header"> |
|||
<i class="icon inverted circular blue comment"></i> Comments |
|||
</h2> |
|||
<div class="ui comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">2 days ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Pawfin Dog</a> |
|||
<div class="metadata"> |
|||
<span class="date">2 days ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">2 days ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<form class="ui reply form"> |
|||
<div class="field"> |
|||
<textarea></textarea> |
|||
</div> |
|||
<div class="ui small fluid blue labeled submit icon button"> |
|||
<i class="icon edit"></i> Add Reply |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<h2 class="ui dividing header">Content</h2> |
|||
|
|||
<h3 class="ui header">Comment</h3> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Avatar</h4> |
|||
<p>A comment can contain an image or avatar</p> |
|||
<div class="ui comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Metadata</h4> |
|||
<p>A comment can contain metadata about the comment, an arbitrary amount of metadata may be defined.</p> |
|||
<div class="ui comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<div class="date">2 days ago</div> |
|||
<div class="stars"> |
|||
<i class="icon star"></i> |
|||
<i class="icon star"></i> |
|||
<i class="icon star"></i> |
|||
<i class="icon empty star"></i> |
|||
<i class="icon empty star"></i> |
|||
</div> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Actions</h4> |
|||
<p>A comment can contain an list of actions a user may perform related to this comment.</p> |
|||
<div class="ui comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<div class="date">2 days ago</div> |
|||
<div class="stars"> |
|||
<i class="icon star"></i> |
|||
<i class="icon star"></i> |
|||
<i class="icon star"></i> |
|||
<i class="icon empty star"></i> |
|||
<i class="icon empty star"></i> |
|||
</div> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Reply Form</h4> |
|||
<p>A comment can contain a form to reply to a comment. This may have arbitrary content.</p> |
|||
<div class="ui comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<div class="date">2 days ago</div> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply active">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
<form class="ui reply form"> |
|||
<div class="field"> |
|||
<textarea></textarea> |
|||
</div> |
|||
<div class="ui button teal submit labeled icon"> |
|||
<i class="icon edit"></i> Add Reply |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<p>A comment reply form can also exist below a comment feed to reply specifically to the original content. |
|||
<div class="ui comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<div class="date">2 days ago</div> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Pawfin Dog</a> |
|||
<div class="metadata"> |
|||
<div class="date">1 day ago</div> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<form class="ui reply form"> |
|||
<div class="field"> |
|||
<textarea></textarea> |
|||
</div> |
|||
<div class="ui button teal submit labeled icon"> |
|||
<i class="icon edit"></i> Add Comment |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Threaded</h4> |
|||
<p>A comment list can be threaded to showing the relationship between conversations</p> |
|||
<div class="ui threaded comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">2 days ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
<div class="comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Pawfin Dog</a> |
|||
<div class="metadata"> |
|||
<span class="date">1 day ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
<div class="comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">20 minutes ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">20 minutes ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
Also pizza. |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">2 days ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">20 hours ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Pawfin Dog</a> |
|||
<div class="metadata"> |
|||
<span class="date">15 hours ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Minimal</h4> |
|||
<p>Comments can hide extra information unless a user shows intent to interact with a comment.</p> |
|||
<div class="ui minimal comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">2 days ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
<div class="comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Pawfin Dog</a> |
|||
<div class="metadata"> |
|||
<span class="date">1 day ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
<div class="comments"> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">20 minutes ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">20 minutes ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
Also pizza. |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">2 days ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
<a class="delete">Delete</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Dog Doggington</a> |
|||
<div class="metadata"> |
|||
<span class="date">20 hours ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="comment"> |
|||
<a class="avatar"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</a> |
|||
<div class="content"> |
|||
<a class="author">Pawfin Dog</a> |
|||
<div class="metadata"> |
|||
<span class="date">15 hours ago</span> |
|||
</div> |
|||
<div class="text"> |
|||
I think this is a great idea and i am voting on it |
|||
</div> |
|||
<div class="actions"> |
|||
<a class="reply">Reply</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,268 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'feed' |
|||
|
|||
title : 'Feed' |
|||
type : 'UI View' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Feed</h1> |
|||
<p>A feed is a collection of events that have occured in series</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Content</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Feed</h4> |
|||
<p>A standard feed with some optional elements</p> |
|||
<div class="ui red feed segment"> |
|||
<h2 class="ui header"> |
|||
<i class="icon red circular inverted chat"></i>Recent Activity |
|||
</h2> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
Just moments ago |
|||
</div> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added you as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<i class="icon circular idea"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
3 days ago |
|||
</div> |
|||
<div class="summary"> |
|||
You submitted a new post to the page |
|||
</div> |
|||
<div class="extra text"> |
|||
I am a dog and I do not know how to make a post |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<i class="icon circular photos"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
3 days ago |
|||
</div> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added <a>2 new photos</a> of you |
|||
</div> |
|||
<div class="extra images"> |
|||
<img src="/images/demo/item1.jpg"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Content</h2> |
|||
|
|||
<div class="example"> |
|||
<h4>Label</h4> |
|||
<p>An event can contain a label</p> |
|||
<div class="ignored ui info message">In semantic's implementation a label is formatted to contain an icon or an image</div> |
|||
<div class="ui feed segment"> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added you as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<i class="icon circular idea"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="summary"> |
|||
You submitted a new post to the page |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Date</h4> |
|||
<p>An event can contain a date</p> |
|||
<div class="ui feed segment"> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
3 days ago |
|||
</div> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added you as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4>Additional information</h4> |
|||
<p>An event can contain additional content explaining the event</p> |
|||
<div class="ui feed segment"> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
3 days ago |
|||
</div> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added 2 photos of you |
|||
</div> |
|||
<div class="extra images"> |
|||
<img src="/images/demo/item1.jpg"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<img src="/images/demo/avatar.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
3 days ago |
|||
</div> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> created a post |
|||
</div> |
|||
<div class="extra text"> |
|||
I am a dog and I do not know how to make a post |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
<div class="example"> |
|||
<h4 class="ui header">Sizes</h4> |
|||
<p>A feed can have different sizes</p> |
|||
|
|||
<div class="ui grid"> |
|||
<div class="ten wide column"> |
|||
<div class="ui small red feed segment"> |
|||
<h4 class="ui header">My Activity</h4> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<img src="/images/demo/avatar2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
Just moments ago |
|||
</div> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added you as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<i class="icon circular idea"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
3 days ago |
|||
</div> |
|||
<div class="summary"> |
|||
You submitted a new post to the page |
|||
</div> |
|||
<div class="extra text"> |
|||
I am a dog and I do not know how to make a post |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="label"> |
|||
<i class="icon circular photos"></i> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="date"> |
|||
3 days ago |
|||
</div> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added <a>2 new photos</a> of you |
|||
</div> |
|||
<div class="extra images"> |
|||
<img src="/images/demo/item1.jpg"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="six wide column"> |
|||
<div class="ui small blue feed segment"> |
|||
<h4 class="ui header">Followers Activity</h4> |
|||
<div class="event"> |
|||
<div class="content"> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added <a>hotpup202</a> as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="content"> |
|||
<div class="summary"> |
|||
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="content"> |
|||
<div class="summary"> |
|||
<a>Sally Poodle</a> added <a>sixpack dog</a> as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="event"> |
|||
<div class="content"> |
|||
<div class="summary"> |
|||
<a>Dally Doodle</a> added <a>hotpup202</a> as a friend |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
@ -0,0 +1,313 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'item' |
|||
|
|||
title : 'Item' |
|||
type : 'UI View' |
|||
--- |
|||
<div class="segment"> |
|||
<div class="container"> |
|||
<h1 class="ui dividing header">Item</h1> |
|||
<p>An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.</p> |
|||
</div> |
|||
</div> |
|||
<div class="main container"> |
|||
|
|||
<div class="peek"> |
|||
<div class="ui vertical pointing secondary menu"> |
|||
<a class="active item">Standard</a> |
|||
<a class="item">Content</a> |
|||
<a class="item">Variations</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Standard</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Items</h4> |
|||
<p>A basic item list. </p> |
|||
<div class="ignored error ui message"> |
|||
<i class="info icon"></i> |
|||
Items are given an arbitrary width and height which matches up to the proportions of the content it typically displays. This means item content must not be too large for the content area. |
|||
</div> |
|||
<div class="ui items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="like ui corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item1.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
<div class="extra"> |
|||
199 votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="like ui corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="meta">5 days ago</div> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
<div class="extra"> |
|||
311 votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="like ui corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item3.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
<div class="extra"> |
|||
522 votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Variations</h2> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Stackable</h4> |
|||
<p>An item view can have its items take the full width when below a browser resolution threshold to allow for content to display properly at small sizes</p> |
|||
<div class="ui stackable items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="like ui corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item1.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
<div class="extra"> |
|||
199 votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="like ui corner label"> |
|||
<i class="like icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="meta">5 days ago</div> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
<div class="extra"> |
|||
311 votes |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Connected</h4> |
|||
<p>An item list can be automatically sized to be even height.</p> |
|||
<div class="ignored warning ui message"> |
|||
<i class="info icon"></i> |
|||
Connected item lists cannot display extra information. A connected row must also assume an arbitrary column width unless specified. |
|||
</div> |
|||
<div class="ui connected items"> |
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<img src="/images/demo/item4.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<img src="/images/demo/item5.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<img src="/images/demo/item3.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<img src="/images/demo/item1.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<img src="/images/demo/item4.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="example"> |
|||
<h4 class="ui header">Column count</h4> |
|||
<p>An item list can list how many columns should exist in a row</p> |
|||
<div class="ui four items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item4.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item5.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item3.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Happy Dog</div> |
|||
<p class="description">Happy dogs are pretty interesting if you are an unhappy person.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="another example"> |
|||
<p>A connected item list with a specified column count</p> |
|||
<div class="ui five connected items"> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item4.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Cute Dog</div> |
|||
<p class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item5.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Faithful Dog</div> |
|||
<p class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item3.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Silly Dog</div> |
|||
<p class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item2.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Happy Dog</div> |
|||
<p class="description">Happy dogs are pretty interesting if you are an unhappy person.</p> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="image"> |
|||
<a class="star ui corner label"> |
|||
<i class="star icon"></i> |
|||
</a> |
|||
<img src="/images/demo/item1.jpg"> |
|||
</div> |
|||
<div class="content"> |
|||
<div class="name">Quiet Dog</div> |
|||
<p class="description">A quiet dog is nice if you dont like a lot of upkeep for your dogs.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,308 @@ |
|||
/* ****************************** |
|||
Previews - Quirky Preview Component |
|||
Author: Jack Lukic |
|||
Notes: First Commit June 06, 2012 |
|||
|
|||
Tooltip Wrapper for loading |
|||
previews of ideations, concepts and users |
|||
|
|||
Will eventually rewrite to use own tooltip lib |
|||
|
|||
****************************** */ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.preview = function(parameters) { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.preview.settings, parameters), |
|||
// hoist arguments
|
|||
moduleArguments = arguments || false |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
|
|||
var |
|||
$module = $(this), |
|||
|
|||
namespace = settings.namespace, |
|||
instance = $module.data('module-' + settings.namespace), |
|||
module |
|||
; |
|||
|
|||
settings.className = (settings.className == 'auto') |
|||
? ( typeof $.fn.preview.settings.classNames[settings.type] !== undefined) |
|||
? $.fn.preview.settings.classNames[settings.type] |
|||
: $.fn.preview.settings.classNames.standard |
|||
: settings.className |
|||
; |
|||
|
|||
module = { |
|||
initialize: function() { |
|||
var |
|||
throbberContent = '<div class="ui throbber center"></div>' |
|||
; |
|||
$module |
|||
.data('module', 'module-' + settings.namespace) |
|||
.data('content', throbberContent) |
|||
.on('mouseenter.' + namespace, module.throttle) |
|||
.on('mouseleave.' + namespace, module.disable) |
|||
.popover(settings) |
|||
; |
|||
}, |
|||
|
|||
throttle: function() { |
|||
if(typeof module.timer !== undefined) { |
|||
clearTimeout(module.timer); |
|||
} |
|||
module.timer = setTimeout(module.prepare, settings.delay); |
|||
}, |
|||
|
|||
prepare: function() { |
|||
var |
|||
title = $module.data('title') || false, |
|||
content = $module.data('content') || false, |
|||
apiRequest = $module.data('promise') || false, |
|||
action = (settings.action) |
|||
? settings.action |
|||
: settings.type |
|||
; |
|||
// if no content lets ajax
|
|||
if(!apiRequest) { |
|||
|
|||
// make sure we're not already requesting this
|
|||
if($module.data('id') !== undefined) { |
|||
$.api({ |
|||
action : action, |
|||
handleState : settings.handleState, |
|||
dataType : 'json', |
|||
stateContext : $module, |
|||
error : function(error) { |
|||
console.log('Error thrown making request:' + error); |
|||
}, |
|||
success : function(response) { |
|||
var |
|||
popover = $module.data('popover'), |
|||
content, |
|||
data, |
|||
title |
|||
; |
|||
module.debug('Server response was successful'); |
|||
// user tooltip case
|
|||
if(typeof settings.create[settings.type] == 'function') { |
|||
module.debug('Creating html content'); |
|||
content = settings.create[settings.type](response); |
|||
|
|||
// prevents fade-in doubling
|
|||
if(popover !== undefined) { |
|||
popover.options.animation = false; |
|||
} |
|||
$module |
|||
.data('content', content) |
|||
.data('popover', popover) |
|||
.popover('show') |
|||
; |
|||
module.debug('Showing popup'); |
|||
popover.options.animation = settings.animation; |
|||
$module |
|||
.data('popover', popover) |
|||
; |
|||
} |
|||
else { |
|||
module.disable(); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
else { |
|||
$module.popover('enable'); |
|||
} |
|||
}, |
|||
disable: function() { |
|||
if(typeof module.timer !== undefined) { |
|||
clearTimeout(module.timer); |
|||
} |
|||
// they moused away before popover appeared, dont show it while their mouse is elsewhere
|
|||
$module |
|||
.popover('disable') |
|||
; |
|||
}, |
|||
|
|||
debug: function(message) { |
|||
if(settings.debug) { |
|||
console.info(settings.moduleName + ': ' + message); |
|||
} |
|||
}, |
|||
error: function(errorMessage) { |
|||
console.warn(settings.moduleName + ': ' + errorMessage); |
|||
}, |
|||
invoke: function(methodName, context, methodArguments) { |
|||
var |
|||
method |
|||
; |
|||
methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 ); |
|||
if(typeof methodName == 'string' && instance !== undefined) { |
|||
methodName = methodName.split('.'); |
|||
$.each(methodName, function(index, name) { |
|||
if( $.isPlainObject( instance[name] ) ) { |
|||
instance = instance[name]; |
|||
return true; |
|||
} |
|||
else if( $.isFunction( instance[name] ) ) { |
|||
method = instance[name]; |
|||
return true; |
|||
} |
|||
module.error(settings.errors.method); |
|||
return false; |
|||
}); |
|||
} |
|||
if ( $.isFunction( method ) ) { |
|||
return method.apply(context, methodArguments); |
|||
} |
|||
// return retrieved variable or chain
|
|||
return method; |
|||
} |
|||
|
|||
}; |
|||
|
|||
if(instance !== undefined && moduleArguments) { |
|||
// simpler than invoke realizing to invoke itself (and losing scope due prototype.call()
|
|||
if(moduleArguments[0] == 'invoke') { |
|||
moduleArguments = Array.prototype.slice.call( moduleArguments, 1 ); |
|||
} |
|||
return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) ); |
|||
} |
|||
// initializing
|
|||
module.initialize(); |
|||
}) |
|||
; |
|||
return this; |
|||
}; |
|||
|
|||
$.fn.preview.settings = { |
|||
|
|||
moduleName : 'Preview Popup', |
|||
debug : true, |
|||
namespace : 'preview', |
|||
|
|||
type : 'idea', |
|||
action : false, |
|||
handleState : 'true', |
|||
|
|||
className : 'auto', |
|||
|
|||
classNames: { |
|||
standard : 'summary', |
|||
idea : 'pictoral idea', |
|||
user : 'user summary', |
|||
|
|||
product : 'product', |
|||
productSummary : 'product summary' |
|||
}, |
|||
placement : 'top', |
|||
|
|||
animation : true, |
|||
delay : 400 |
|||
}; |
|||
|
|||
// creates tooltip from server response
|
|||
$.fn.preview.settings.create = { |
|||
user: function(response) { |
|||
var |
|||
user = response.user, |
|||
content = '' |
|||
; |
|||
content += '' |
|||
+ "<div class='image'>" |
|||
+ " <img src='" + user.avatar +"'>" |
|||
+ "</div>" |
|||
+ "<h2>" + user.name +"</h2>" |
|||
; |
|||
if(user.location) { |
|||
content += "<h3>" + user.location + "</h3>"; |
|||
} |
|||
content += "" |
|||
+ "<table>" |
|||
+ " <tr class='odd'><td class='label'>Member Since:</td><td>" + user.createdAt +"</td></tr>" |
|||
+ " <tr><td class='label'>Ideas Submitted:</td><td>" + user.ideas + "</td></tr>" |
|||
+ " <tr class='odd'><td class='label'>Total Influence:</td><td>" + user.totalInfluence +"</td></tr>" |
|||
+ "</table>" |
|||
; |
|||
if(user.admin) { |
|||
content += "<div class='ui flag team'>"; |
|||
} |
|||
else if(user.pro) { |
|||
content += "<div class='ui flag pro'>"; |
|||
} |
|||
return content; |
|||
}, |
|||
// flat json
|
|||
productSummary: function(response) { |
|||
var |
|||
product = response.product, |
|||
content = '', |
|||
stateName |
|||
; |
|||
// pretty names for states
|
|||
switch(product.state) { |
|||
case 'presales': |
|||
stateName = 'Presales'; |
|||
break; |
|||
case 'sales': |
|||
stateName = 'On Sale Now'; |
|||
break; |
|||
case 'development': |
|||
stateName = "We're working on it"; |
|||
break; |
|||
case 'hoed': |
|||
stateName = "We're working on it"; |
|||
break; |
|||
case 'tooling': |
|||
stateName = "We're making it"; |
|||
break; |
|||
case 'quote': |
|||
stateName = "We're making it"; |
|||
break; |
|||
case 'in_production': |
|||
stateName = "We're making it"; |
|||
break; |
|||
} |
|||
if(product.state == 'development') { |
|||
content += '' |
|||
+ "<hgroup>" |
|||
+ " <div class='image'></div>" |
|||
+ " <h2>" + product.name +"</h2>" |
|||
+ " <h4>" + stateName + "</h4>" |
|||
+ "</hgroup>" |
|||
; |
|||
} |
|||
else { |
|||
content += '' |
|||
+ "<hgroup>" |
|||
+ " <div class='image'>" |
|||
; |
|||
if(product.images.icon !== undefined && product.images.icon !== '') { |
|||
content += " <img src='" + product.images.icon +"'>"; |
|||
} |
|||
content += '' |
|||
+ " </div>" |
|||
+ " <h2>" + product.name +"</h2>" |
|||
; |
|||
if(product.tagline !== undefined) { |
|||
content += "<h3>" + product.tagline +"</h3>"; |
|||
} |
|||
if(stateName !== undefined) { |
|||
content += "<h4>" + stateName + "</h4>"; |
|||
} |
|||
content += "" |
|||
+ "</hgroup>" |
|||
; |
|||
if(product.description.summary !== undefined) { |
|||
content += "<p class='description'>" + product.description.summary + "</p>"; |
|||
} |
|||
} |
|||
return content; |
|||
} |
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue