<p>A grid is made up of columns of content with gutters to provide negative space between columns.</p>
<divclass="ui ignore green message"><iclass="icon heart"></i>All grid systems must assume an arbitrary amount of column rows. Semantic by default assumes <b>16 columns</b></div>
<divclass="ui grid">
<divclass="four wide column">
@ -51,9 +55,9 @@ type : 'UI Collection'
</div>
</div>
</div>
<h2class="ui dividing header">Elements</h2>
<divclass="highlighted example">
<h4class="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 flush vertically.</p>
@ -257,10 +261,10 @@ type : 'UI Collection'
<divclass="highlighted example">
<h4class="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>
<divclass="ui ignore warning message"><iclass="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>
<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>
<divclass="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>
<divclass="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>
@ -401,9 +405,9 @@ type : 'UI Collection'
</div>
<h2class="ui dividing header">Variations</h2>
<h3class="ui header">Grid</h3>
<divclass="example">
<h4class="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>
@ -411,7 +415,7 @@ type : 'UI Collection'
<divclass="ui text message info ignore">
<iclass="icon heart"></i> Semantic UI's responsive grid by default will change the page gutters to increase at 250pixel intervals.
<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>
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>
<divclass="example">
<h4class="ui header">Disabled</h4>
<p>A loader can be disabled or hidden</p>
@ -75,10 +79,10 @@ type : 'UI Element'
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>
<h2class="ui dividing header">Variations</h2>
<divclass="example">
<h4class="ui header">Inline</h4>
<p>Loaders can appear inline with content </p>
@ -87,7 +91,7 @@ type : 'UI Element'
<divclass="example">
<h4class="ui header">Size</h4>
<p>Loaders can have different sizes</p>
<divclass="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>
<divclass="ui active dimmer"><divclass="ui mini loader"></div></div>
@ -105,7 +109,7 @@ type : 'UI Element'
<divclass="ui active dimmer"><divclass="ui large loader"></div></div>
<p>Sometimes content should be formatted differently depending on whether other content exists alongside it. A useful way to do that is use the next adjacent sibling selector '+'. The content that should have the conditional formatting should always appear second because there is no previous sibling selector in css.</p>
<divclass="code"data-type="css">
@ -41,7 +41,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Not Sure the Size? Table It</h4>
<h3class="ui header">Not Sure the Size? Table It</h4>
<p>If content needs to fill a specified size exactly, but may be made up of parts with arbitary size, it can be useful to use display table and table-cell. This will make sure the parent width is always obeyed regardles of alterations to an element's width.</p>
<p>Keep in mind any table-cell element must have a parent with <code>display:table</code> to appear formatted correctly.</p>
@ -58,7 +58,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Fixing Whitespace with Inline Block</h4>
<h3class="ui header">Fixing Whitespace with Inline Block</h4>
<p>In HTML usually whitespace doesn't change a page's layouts. However, when using inline block any whitespace will create unwanted space between consecutive inline-block elements. The simple and effective fix is to make sure font-size on the parent element is 0, making all whitespace 0 pixels. Then you can reset font-size on the child element to body font size or 1 relative em.</p>
<divclass="code"data-type="css">
/* remove whitespace */
@ -71,7 +71,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">CSS :not is Awesome</h4>
<h3class="ui header">CSS :not is Awesome</h4>
<p>Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to "cancel out" of that opacity change on content inside.</p>
<p>Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules. Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.</p>
<p>It's fairly commonly known that you can set text selection colors in css for a page, but its less commonly known that you can use multiple highlight colors in a single page.</p>
<divclass="code"data-type="css">
/* text selected turns highlighted yellow */
@ -129,7 +129,7 @@ type : 'UI Guide'
</div>
<h4class="ui header">Shading Borders</h4>
<h3class="ui header">Shading Borders</h4>
<p>When you have colored content that needs a border to match its current color, try using a 1 pixel inset box shadow with an RGBA value.</p>
<divclass="code"data-type="css">
@ -147,7 +147,7 @@ type : 'UI Guide'
</div>
<h4class="ui header">Joining borders</h4>
<h3class="ui header">Joining borders</h4>
<p>Sometimes bordered content must sit next to other bordered content. If each element uses border the borders will double. Consider using either outline or a box shadow to accomplish the same effect but without overlapping borders.</p>
<divclass="code"data-type="css">
/* this might not go so well */
@ -170,7 +170,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Using transparency</h4>
<h3class="ui header">Using transparency</h4>
<p>RGBA colors in css allow you to specify colors with a transparency channel. This is very useful.</p>
<p>Consider for example, defining the text states of an element. If the elements color changes, the text might appear more complementary as a shade of black with a portion of the original color. This can be done easily with rgba</p>
<divclass="code"data-type="css">
@ -183,7 +183,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Nothing is always Fixed</h4>
<h3class="ui header">Nothing is always Fixed</h4>
<p>CSS fixed allows you to have content stick to an offset position in a page regardless of the scroll position of the page. Fixed menus will use the page as the offset parent, in all circumstances except when css transform is used on a parent element. <b>This will change the offset context to the transformed element instead of the page</b>.
<p>This behavior may seem unexpected, but using this quirk can allow you to have fixed position content relative to any element in a page.</p>
<divclass="code"data-type="css">
@ -199,7 +199,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Centering Content with Transform</h4>
<h3class="ui header">Centering Content with Transform</h4>
<p>Using percentages in CSS will give you a ratio based on the size of the parent element. For example, setting content to be left 50% will set content to start at exactly halfway across its parent.</p>
<p>If you want content to positioned relative to its own size use transform. Percentages specified inside a transform are unique in that they are based on the current element size not its parent.</p>
<divclass="code"data-type="css">
@ -232,7 +232,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Consider alternatives to floats</h4>
<h3class="ui header">Consider alternatives to floats</h4>
<p>CSS floats can create issues with the containing element not receiving the size of its children. Using overflow:hidden to clear floats means that no peice of an element can be shown outside the bounding box of the element, which limits the possibilities in an element. Clearfixes can use up one of two available pseudo class which can often be useful for styling elements.</p>
<p>Consider using another means of putting content side by side like inline-block or table-cell. These provide more freedom than floated block elements, and can add additional benefits.</p>
<p>To avoid issues with inline-block causing spacing between elements, specify no font size on the group and 1rem on the floated content</p>
@ -259,7 +259,7 @@ type : 'UI Guide'
</div>
<h4class="ui header">Onion Skinning</h4>
<h3class="ui header">Onion Skinning</h4>
<p>One technique that is useful for allowing for multiple color variations of an element, without having to completely reskin each variation and shade is to use background-image gradients to define shading and state, and background-color to define the color of an element. If done well you can add a variety of colors with very little code.</p>
<divclass="code"data-type="css">
.ui.thingy {
@ -301,7 +301,7 @@ type : 'UI Guide'
<h2class="ui dividing header">Style Guide</h2>
<h4class="ui header">Don't Hyphenate</h4>
<h3class="ui header">Don't Hyphenate</h4>
<p>All elements are designed to include their own namespace. As long as rules descend from their parent element there is no possibility of rule collision.</p>
<p>Hyphenated class names often describe the intersection of separate concepts, and can be better written to represent each concept separately.</p>
<divclass="code"data-type="css">
@ -322,7 +322,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">CSS Legibility</h4>
<h3class="ui header">CSS Legibility</h4>
<p>Adding extra formatting can help increase clarity in your code. We suggest separating css selectors on separate lines, adding a space after css properties with commas (like box-shadow) and placing a zero before any decimal value.</p>
<divclass="code"data-type="css">
@ -349,7 +349,7 @@ type : 'UI Guide'
</div>
<h4class="ui header">Keep Things Ordered</h4>
<h3class="ui header">Keep Things Ordered</h4>
<p>Although css rule order may be considered a chore, grouping related rules together can help keep css code organized.</p>
<p>An easy way to do this is to consider ordering rules from the outside in. First describing positioning rules, then border rules, margin, sizing, padding, font-size, line height and ending with vendor prefixed attributes.</p>
@ -388,7 +388,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Avoid non-semantic tags, make wrappers groups</h4>
<h3class="ui header">Avoid non-semantic tags, make wrappers groups</h4>
<p>UI elements should be designed to include the minimum footprint of an element. If extra styling is needed, consider using pseudo selectors :after and :before. This allows for the creation of two extra divs inside each div context which can almost always be enough to accomodate extra styling.</p>
<p>If there is no other option than wrapping content in a containing HTML element, consider using a singular/plural relationship by having the wrapper describe its contents instead of an arbitrary class name like <code>wrapper</code></p>
<divclass="code"data-type="css">
@ -404,7 +404,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Margins</h4>
<h3class="ui header">Margins</h4>
<p>Adding default margins to your content allow for it to have vertical rhythm in a page, but be careful about forcing margin in all circumstances. Here's a useful way to make sure content inside container elements doesn't receieve unnecessary padding.</p>
<divclass="code"data-type="css">
.ui.thingy {
@ -419,7 +419,7 @@ type : 'UI Guide'
</div>
<h4class="ui header">Grammatical order</h4>
<h3class="ui header">Grammatical order</h4>
<p>Consider using similar class syntax as if you were actually describing the element in English. Although this is by no means required it may help provide clarity in some circumstances.</p>
<divclass="code"data-type="css">
/* confusing word order */
@ -432,7 +432,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Use Border Box</h4>
<h3class="ui header">Use Border Box</h4>
<p>Border box fixes the box model, and allows padding to be included as part of width and height definitions. Using it opens up another world of possibilities for sizing content to fit fluidly</p>
<divclass="code"data-type="css">
.two.ui.thingies .ui.thingy {
@ -447,7 +447,7 @@ type : 'UI Guide'
<h2class="ui dividing header">Units and Measurements</h2>
<h4class="ui header">Unit Consistency</h4>
<h3class="ui header">Unit Consistency</h4>
<p>CSS provides a broad selection of measurements for values. It is helpful to keep unit definitions consistent across a single property definition. Including consistent units for 0 values also allows for quicker tweaking and shows greater precision in a property definition.</p>
<divclass="code"data-type="css">
@ -466,7 +466,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Inheritance is Magical</h4>
<h3class="ui header">Inheritance is Magical</h4>
<p>Many CSS properties can use the value 'inherit' to specify, quite unintuitively, to take on the value of parent element for values that do not normally inherit. For example, an element can use inherit to double whatever its parents padding size is, or to receive the same type of border as a parent without knowing what it is beforehand.</p>
<p>EMs are defined so that 1em is equal to the current font size inside of an element. Using EMs can allow you to size content inside an element in proportion to the overall size of the element. Be careful though because this will stack with nested elements.</p>
<p>Using EMs multiplicative nature can be used to your advantage. Instead of defining multiple tiers of a menu system, consider using ems to reduce each tier's sizing. As you continue to nest menu elements each nested menu will computer its values with smaller proportions.</p>
<p>Relative EMs (rems) are calculated relative to the font size of the entire page. This is needed to explain how content should be sized related to the overall size of elements on the page, and will not increase geometrically when nested like EMs.</p>
<p>Airbnb has compiled a wonderful list for a <em>mostly reasonable</em> approach to javascript. This is an excellent starting point for community consensus on javascript standards.</p>
<p>Airbnb has compiled a wonderful list for a <em>mostly reasonable</em> approach to javascript. This is an excellent starting point for community consensus on javascript standards.</p>
<p>Matching equal signs increases code legibility but may take more time. There is a great plugin for Sublime Text called <ahref="http://wbond.net/sublime_packages/alignment">Alignment</a> which can automatically manage this for you.</p>
<divclass="code"data-type="javascript">
var
@ -39,8 +39,8 @@ type : 'UI Guide'
elephant = 'A long name'
;
</div>
<h4class="ui header">Chaining</h4>
<h3class="ui header">Chaining</h4>
<p>Indent chained code to show changes in the original selector. Use the ending semicolon as you would a closing bracket to show the original indentation level of the rule</p>
<divclass="code"data-type="javascript">
$element
@ -51,8 +51,8 @@ type : 'UI Guide'
.doSomethingElse()
;
</div>
<h4class="ui header">Verbs</h4>
<h3class="ui header">Verbs</h4>
<p>When creating javascript modules consider using verbs to show behavior. This may be more intuitive than allowing a user to directly set properties or manage your internal namespace.</p>
<divclass="code"data-type="javascript">
@ -66,12 +66,12 @@ type : 'UI Guide'
.widget('activate', true)
;
</div>
<h4class="ui header">Default Values</h4>
<h3class="ui header">Default Values</h4>
<p>Using an OR value allows you to set defaults for any falsey value</p>
<divclass="code"data-type="javascript">
(function(someBoolean, name) {
var
var
// this will have issues (false will evaluate same as undefined)
<p>In order to make UI components be able to exist in most websites, the prototype version of an element should be neutrally styled using greytones and neutral colors. This will allow other elements to be more robust giving other developers freedom to make decisions about color and style when adapting your element for their website.</p>
<h4class="ui header">Namespacing</h4>
<h3class="ui header">Namespacing</h4>
<p>All css code must live inside a namespace. By default all ui elements use the class "ui". This prevents rules from altering styles of other content in the page. This also helps differentiate between UI elements and parts of an element</p>
<p>Tags inside of a ui element <b>do not</b> need to be prefixed with ui. They can simple descend from the element.</p>
<divclass="code"data-type="css">
/* incorrect */
.menu {
}
/* incorrect */
.ui.menu .ui.item {
}
/* correct */
.ui.menu {
}
.ui.menu .item {
}
</div>
<h4class="ui header">Commonality</h4>
<h3class="ui header">Commonality</h4>
<p>Try to use the most obvious names for classes. If you're not sure, prototype the element, then ask a friend or two what they would call it.<p>
<divclass="code"data-type="css">
/* hmm */
@ -66,8 +66,8 @@ type : 'UI Guide'
font-size: 1.5em;
}
</div>
<h4class="ui header">Precision</h4>
<h3class="ui header">Precision</h4>
<p>Classes should be defined in one word, if the concept cannot be reduced to a single word then consider factoring it into multiple sub classes</p>
<divclass="code"data-type="css">
.attached.ui.thingy {
@ -84,73 +84,73 @@ type : 'UI Guide'
margin-top: -0.5em
}
</div>
<h4class="ui header">Use real words</h4>
<h3class="ui header">Use real words</h4>
<p>Abbreviations are useful for taking notes, but css definitions should attempt to use consistent, common language.</p>
<divclass="code"data-type="css">
/* nope */
.ui.btn {
}
.ui.widget .cpttext {
}
/* good */
.ui.button {
}
.ui.widget .caption {
}
</div>
<h4class="ui header">Non prescriptive</h4>
<h3class="ui header">Non prescriptive</h4>
<p>Avoid requiring any specific tags in your definitions. This will allow developers to choose which tags they would like to use with an element.</p>
<p>Sometimes however it makes sense to allow for common tags to be used in place of classnames for brevity. Paragraph tags, links, labels, and tables may be useful to use in a UI element definition without classnames.</p>
<p>Be cautious though, for example, requiring a form definition to use a form tag limits a developers ability to nest form elements inside other forms. The same is true for anchor tags</p>
<divclass="code"data-type="css">
/* hey how do you know this is the third heading? */
/* and what about all the other possible sizes? */
.ui.thingy h3 {
}
/* yay the developer can choose what type of heading tag to use */
.ui.thingy .header {
}
/* wow this guy is going to have to do a lot of typing... */
.ui.table .cell {
}
/* this seems like a reasonable assumption, html is a bit strict about these things */
.ui.table td {
}
</div>
<divclass="code"data-type="css">
/* wow this guy is going to have to do a lot of typing... */
.ui.table .cell {
}
/* this seems like a reasonable assumption, html is a bit strict about these things */
<p>Multiple elements may contain similar variations that function slightly different.</p>
<p>For example it may be useful for various elements to float left or right. At first it may seem most useful to write a helper class that floats all UI element types when given a certain class name, but the way which an element may be floated might vary depending on the type of element.</p>
<divclass="code"data-type="css">
/*
/*
this element will default to floating left if any float is specified
it will receive margins on its float relative to its size
*/
@ -173,7 +173,7 @@ type : 'UI Guide'
}
</div>
<h4class="ui header">Inversion</h4>
<h3class="ui header">Inversion</h4>
<p>Elements are often inverted to stand out on dark backgrounds. Consider creating a variation of your element defines how the element can invert its colors.</p>
<p>Keep in mind you might have to increase the contrast between shades of your element when inverting colors, its much easier to detect in a design between multiple shades of a light color than a dark one.</p>
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Instead of using short-hand, or codified naming conventions, semantic uses simple, common language for parts of interface elements and familiar rules used in natural languages for describing variations in an element.</p>
<h3class="ui header">Descriptive not Prescriptive</h3>
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Instead of using short-hand, or codified naming conventions, semantic uses simple, common language for parts of interface elements and familiar rules used in natural languages for describing elements.</p>
<h3class="ui header">Tag ambivalent.</h3>
<p>While standards groups and browser developers may decide the arbitrary interpretation of html tags in the browser, front end developers have always had complete autonomy over the interpretation of class names of elements.</p>
<p>UI definitions in Semantic are given the class name <code>ui</code>. This is to help tell the difference between ui elements and parts of an element. For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name <code>ui</code>.</p>
<p>UI definitions in Semantic are given the class name <code>ui</code>. This is to help tell the difference between ui elements and parts of the definition of an element. For example a menu may have menu items inside of it. These items are contained as part of the menu definition but do not receive the class name <code>ui</code>.</p>
<p>Class names in semantic always use single english words. If a class name is an adjective it is either a <ahref="/introduction/types.html">type</a> of element or <ahref="/introduction/variation.html">variation</a> of an element. <b>CSS definitions always define adjectives in the context of a noun</b>. In this way class names cannot pollute the namespace.</p>
<p>Class names in semantic always use single english words. If a class name is an adjective it is either a <b>type</b> of element or <b>variation</b> of an element. This helps prevent naming conflicts between elements (nouns) and changes to an element (adjectives)</p>
<p>Modules define a public API using simple phrases involving a verb and an object the verb is acting on. When methods are invoked internally those phrases are matched to internal methods.</p>
<p>Modules define a public API using verbs and simple phrases. When methods are invoked internally those phrases are matched to internal methods automatically.</p>
<divclass="code"data-demo="true"data-title="Language in Javascript">
<h3class="ui header">Initializing a chat room</h3>
<p>Using chatroom requires an account with <ahref="http://www.pusher.com"target="_blank">pusher</a>, a company that provides turn-key web socket access.</p>
jlukic
11 years ago