@collabui/core

Version:

Cisco Collab UI CSS Framework

1 lines • 370 kB

JSON

{"overview":{"name":"Overview","category":"overview","description":"Build consistent, responsive, mobile-first, HTML5/CSS3 interfaces for your Cisco CTG web applications and sites.","children":[{}]},"develop":{"name":"Develop","category":"develop","description":"","children":[{"name":"Changelog","component":"changelog","description":"All notable changes to this project will be documented here, using Semantic Versioning."},{"name":"Contributing","component":"contributing","description":"We would love for you to contribute to Collab UI and help make it ever better! "},{"name":"Getting Started","component":"getting-started","description":"Get started building responsive, mobile-first applications and sites."},{"name":"Roadmap","component":"roadmap","description":"The Roadmap aims to expose what current is and what future work will be tackled in Collab UI. Explore the items below and follow them on to Github for more details and to join the conversation to promote or explore these or other items."}]},"styles":{"name":"Styles","category":"styles","description":"","children":[{"name":"Colors","component":"colors","description":"SCSS variables for the colors in the design system"},{"name":"Icons","component":"icon","description":"Icons are visual signs that help us make sense of the world around us."},{"name":"Typography","component":"typography","description":"Convey the importance of your words with the correct hierarchy.","sections":[{"name":"Headings","section":"default","description":"All HTML headings, <code><h1></code> through <code><h6></code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.","category":"styles","component":"typography","variations":{"html":[{"example":" <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>TITLE</strong>\n <div>\n 62pt, Line 80 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1 class=\"title-heading\">CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H1</strong>\n <div>\n 48pt, Line 64 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1>CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H2</strong>\n <div>\n 36pt, Line 48 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h2>CiscoSans Light</h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H3</strong>\n <div>\n 26pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h3>CiscoSans Light</h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H4</strong>\n <div>\n 20pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h4>CiscoSans Light</h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H5</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H6</strong>\n <div>\n 14pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h6>CiscoSans Light</h6>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALL</strong>\n <div>\n 12pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-small\">CiscoSans Regular</p>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALLEST</strong>\n <div>\n 10pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-smallest\">CiscoSans Regular</p>\n </div>\n </div>","escaped":" <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>TITLE</strong>\n <div>\n 62pt, Line 80 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1 class=\"title-heading\">CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H1</strong>\n <div>\n 48pt, Line 64 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1>CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H2</strong>\n <div>\n 36pt, Line 48 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h2>CiscoSans Light</h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H3</strong>\n <div>\n 26pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h3>CiscoSans Light</h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H4</strong>\n <div>\n 20pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h4>CiscoSans Light</h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H5</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H6</strong>\n <div>\n 14pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h6>CiscoSans Light</h6>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALL</strong>\n <div>\n 12pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-small\">CiscoSans Regular</p>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALLEST</strong>\n <div>\n 10pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-smallest\">CiscoSans Regular</p>\n </div>\n </div>"}]},"examples":{"html":[{"example":" <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>TITLE</strong>\n <div>\n 62pt, Line 80 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1 class=\"title-heading\">CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H1</strong>\n <div>\n 48pt, Line 64 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1>CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H2</strong>\n <div>\n 36pt, Line 48 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h2>CiscoSans Light</h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H3</strong>\n <div>\n 26pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h3>CiscoSans Light</h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H4</strong>\n <div>\n 20pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h4>CiscoSans Light</h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H5</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H6</strong>\n <div>\n 14pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h6>CiscoSans Light</h6>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALL</strong>\n <div>\n 12pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-small\">CiscoSans Regular</p>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALLEST</strong>\n <div>\n 10pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-smallest\">CiscoSans Regular</p>\n </div>\n </div>","escaped":" <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>TITLE</strong>\n <div>\n 62pt, Line 80 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1 class=\"title-heading\">CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H1</strong>\n <div>\n 48pt, Line 64 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h1>CiscoSans Thin</h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H2</strong>\n <div>\n 36pt, Line 48 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h2>CiscoSans Light</h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H3</strong>\n <div>\n 26pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h3>CiscoSans Light</h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H4</strong>\n <div>\n 20pt, Line 32 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h4>CiscoSans Light</h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H5</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>H6</strong>\n <div>\n 14pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h6>CiscoSans Light</h6>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY</strong>\n <div>\n 16pt, Line 24 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <h5>CiscoSans Light</h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALL</strong>\n <div>\n 12pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-small\">CiscoSans Regular</p>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4 p\">\n <strong>BODY-SMALLEST</strong>\n <div>\n 10pt, Line 16 <br>\n #333333\n </div>\n </div>\n <div class=\"columns medium-8\">\n <p class=\"body-smallest\">CiscoSans Regular</p>\n </div>\n </div>"}]},"core":true},{"name":"Headings Secondary Text","section":"headings-secondary-text","description":"Create lighter, secondary text in any heading with a generic<code><small></code> tag or the <code>.small</code> class.","category":"styles","component":"typography","variations":{"html":[{"example":" <div class=\"row\">\n <div class=\"columns medium-12\">\n <h1 class=\"__web-inspector-hide-shortcut__\">h1. Example heading <small>Secondary text</small></h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h2>h2. Example heading <small>Secondary text</small></h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h3>h3. Example heading <small>Secondary text</small></h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h4>h4. Example heading <small>Secondary text</small></h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h5>h5. Example heading <small>Secondary text</small></h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h6>h6. Example heading <small>Secondary text</small></h6>\n </div>\n </div>","escaped":" <div class=\"row\">\n <div class=\"columns medium-12\">\n <h1 class=\"__web-inspector-hide-shortcut__\">h1. Example heading <small>Secondary text</small></h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h2>h2. Example heading <small>Secondary text</small></h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h3>h3. Example heading <small>Secondary text</small></h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h4>h4. Example heading <small>Secondary text</small></h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h5>h5. Example heading <small>Secondary text</small></h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h6>h6. Example heading <small>Secondary text</small></h6>\n </div>\n </div>"}]},"examples":{"html":[{"example":" <div class=\"row\">\n <div class=\"columns medium-12\">\n <h1 class=\"__web-inspector-hide-shortcut__\">h1. Example heading <small>Secondary text</small></h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h2>h2. Example heading <small>Secondary text</small></h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h3>h3. Example heading <small>Secondary text</small></h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h4>h4. Example heading <small>Secondary text</small></h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h5>h5. Example heading <small>Secondary text</small></h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h6>h6. Example heading <small>Secondary text</small></h6>\n </div>\n </div>","escaped":" <div class=\"row\">\n <div class=\"columns medium-12\">\n <h1 class=\"__web-inspector-hide-shortcut__\">h1. Example heading <small>Secondary text</small></h1>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h2>h2. Example heading <small>Secondary text</small></h2>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h3>h3. Example heading <small>Secondary text</small></h3>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h4>h4. Example heading <small>Secondary text</small></h4>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h5>h5. Example heading <small>Secondary text</small></h5>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-12\">\n <h6>h6. Example heading <small>Secondary text</small></h6>\n </div>\n </div>"}]},"core":true},{"name":"Body Copy","section":"body","description":"Collab UI's global default font-size is 16px (1rem), with a line-height of 1.4. Paragraphs default font-size is 14px (0.875rem). In addition, <p> (paragraphs) receive a bottom margin of 16px (1rem by default).","category":"styles","component":"typography","variations":{"html":[{"example":" <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>\n <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>\n <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>","escaped":" <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>\n <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>\n <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>"}]},"examples":{"html":[{"example":" <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>\n <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>\n <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>","escaped":" <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>\n <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donecull amcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>\n <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>"}]},"core":true},{"name":"Lead Copy","section":"lead-body","description":"Make a paragraph stand out by adding <code>.lead</code>.","category":"styles","component":"typography","variations":{"html":[{"example":" <p class=\"lead\">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>","escaped":" <p class=\"lead\">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>"}]},"examples":{"html":[{"example":" <p class=\"lead\">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>","escaped":" <p class=\"lead\">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>"}]},"core":true},{"name":"Small text","section":"small-text","description":"For de-emphasizing inline or blocks of text, use the <code><small></code> tag to set text at 85% the size of the parent. Heading elements receive their own <code>font-size</code> for nested <code><small></code> elements.<br><br>You may alternatively use an inline element with <code>.small</code> in place of any <code><small></code>.","category":"styles","component":"typography","variations":{"html":[{"example":" <small>This line of text is meant to be treated as fine print.</small>","escaped":" <small>This line of text is meant to be treated as fine print.</small>"}]},"examples":{"html":[{"example":" <small>This line of text is meant to be treated as fine print.</small>","escaped":" <small>This line of text is meant to be treated as fine print.</small>"}]},"core":true},{"name":"Bold","section":"bold","description":"For emphasizing a snippet of text with a heavier font-weight by using the <code><strong></code> html tag.","category":"styles","component":"typography","variations":{"html":[{"example":" <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>","escaped":" <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>"}]},"examples":{"html":[{"example":" <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>","escaped":" <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>"}]},"core":true},{"name":"Italics","section":"italics","description":"For emphasizing a snippet of text with italics by using the <code><em></code> html tag.","category":"styles","component":"typography","variations":{"html":[{"example":" <p>The following snippet of text is <em>rendered as italicized text</em>.</p>","escaped":" <p>The following snippet of text is <em>rendered as italicized text</em>.</p>"}]},"examples":{"html":[{"example":" <p>The following snippet of text is <em>rendered as italicized text</em>.</p>","escaped":" <p>The following snippet of text is <em>rendered as italicized text</em>.</p>"}]},"core":true},{"name":"Alignment classes","section":"alignment-classes","description":"Easily realign text to components with text alignment classes.","category":"styles","component":"typography","variations":{"html":[{"example":" <p class=\"text-left\">Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-center\">Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-right\">Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-justify\">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>","escaped":" <p class=\"text-left\">Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-center\">Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-right\">Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-justify\">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"}]},"examples":{"html":[{"example":" <p class=\"text-left\">Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-center\">Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-right\">Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-justify\">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>","escaped":" <p class=\"text-left\">Left aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-center\">Center aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-right\">Right aligned text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p class=\"text-justify\">Justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"}]},"core":true},{"name":"Links","section":"links","description":"Links are very standard, and the color is preset to the Collab UI primary color. To make links screen reader-friendly, avoid using vague words like \"here\" or \"read more\" within link text. The text of the link itself should adequately describe where the link goes.","category":"styles","component":"typography","variations":{"html":[{"example":" <p><a href=\"/styles/colors\">Learn more about Collab UI's global colors.</a></p>","escaped":" <p><a href=\"/styles/colors\">Learn more about Collab UI's global colors.</a></p>"}]},"examples":{"html":[{"example":" <p><a href=\"/styles/colors\">Learn more about Collab UI's global colors.</a></p>","escaped":" <p><a href=\"/styles/colors\">Learn more about Collab UI's global colors.</a></p>"}]},"core":true}]},{"name":"Sass","component":"sass","description":"Behind the scenes, Collab UI is powered by a set of utility Sass functions that help us work with colors, units, selectors, and more.","sections":[{"name":"Sass Variables","section":"variables","description":"Use the Collab UI Variables throughout your application Sass files to create consistent, good lookiing apps.","category":"styles","component":"sass","variations":{},"examples":{},"core":true},{"name":"Sass Mixins","section":"mixins","description":"Collab UI uses these mixins to build the final CSS output of each component. You can use the mixins yourself to build your own class structure out of our components."},{"name":"Sass Functions","section":"functions","description":"Use the Collab UI functions throughout your application Sass files to create consistent, good lookiing apps."}]}]},"layout":{"name":"Layout","category":"layout","description":"","children":[{"name":"Accordion","component":"accordion","description":"Accordion enables users to expand and collapse sections of content.","sections":[{"name":"Accordion","section":"multi-open","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Multiple Open","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Pre Selected Open","section":"pre-selected-open","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Collapse","component":"collapse","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Collapse","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Data Grids","component":"data-grid","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","sections":[{"name":"Tables","section":"default","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Striped Rows","section":"striped-rows","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Bordered","section":"bordered","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Hover Rows","section":"hover-rows","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"name":"Condensed","section":"condensed","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."}]},{"name":"Footer","component":"footer","description":"footer component","sections":[{"name":"Footer","section":"default","description":"footer component description"}]},{"name":"Layout Grid","component":"layout-grid","description":"Create powerful multi-device layouts quickly and easily with the default 12-column, nestable grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.","sections":[{"name":"Basic Grid","section":"default","description":"Start by adding an element with a class of <code>row</code>. This will create a horizontal block to contain vertical columns. Then add divs with a <code>column</code> class within that row. You can use <code>column</code> or <code>columns</code> - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.<br>Collab UI is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.","category":"layout","component":"layout-grid","variations":{"html":[{"example":" <div class=\"row\">\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-8\">.medium-8</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-6\">.medium-6</div>\n <div class=\"columns medium-6\">.medium-6</div>\n </div>","escaped":" <div class=\"row\">\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-8\">.medium-8</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-6\">.medium-6</div>\n <div class=\"columns medium-6\">.medium-6</div>\n </div>"}]},"examples":{"html":[{"example":" <div class=\"row\">\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-8\">.medium-8</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-6\">.medium-6</div>\n <div class=\"columns medium-6\">.medium-6</div>\n </div>","escaped":" <div class=\"row\">\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n <div class=\"columns medium-1\">.medium-1</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-8\">.medium-8</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n <div class=\"columns medium-4\">.medium-4</div>\n </div>\n <div class=\"row\">\n <div class=\"columns medium-6\">.medium-6</div>\n <div class=\"columns medium-6\">.medium-6</div>\n </div>"}]},"core":true},{"name":"Small Grid","section":"small","description":"Small grids expand to large screens easier than large grids cram into small screens.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"<div class=\"row\">\n <div class=\"small-2 columns\">2 columns</div>\n <div class=\"small-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"small-3 columns\">3 columns</div>\n <div class=\"small-9 columns\">9 columns</div>\n</div>","escaped":"<div class=\"row\">\n <div class=\"small-2 columns\">2 columns</div>\n <div class=\"small-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"small-3 columns\">3 columns</div>\n <div class=\"small-9 columns\">9 columns</div>\n</div>"}]},"examples":{"html":[{"example":"<div class=\"row\">\n <div class=\"small-2 columns\">2 columns</div>\n <div class=\"small-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"small-3 columns\">3 columns</div>\n <div class=\"small-9 columns\">9 columns</div>\n</div>","escaped":"<div class=\"row\">\n <div class=\"small-2 columns\">2 columns</div>\n <div class=\"small-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"small-3 columns\">3 columns</div>\n <div class=\"small-9 columns\">9 columns</div>\n</div>"}]},"core":true},{"name":"Medium Grid","section":"medium","description":"Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"<div class=\"row\">\n <div class=\"medium-2 columns\">2 columns</div>\n <div class=\"medium-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"medium-3 columns\">3 columns</div>\n <div class=\"medium-9 columns\">9 columns</div>\n</div>","escaped":"<div class=\"row\">\n <div class=\"medium-2 columns\">2 columns</div>\n <div class=\"medium-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"medium-3 columns\">3 columns</div>\n <div class=\"medium-9 columns\">9 columns</div>\n</div>"}]},"examples":{"html":[{"example":"<div class=\"row\">\n <div class=\"medium-2 columns\">2 columns</div>\n <div class=\"medium-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"medium-3 columns\">3 columns</div>\n <div class=\"medium-9 columns\">9 columns</div>\n</div>","escaped":"<div class=\"row\">\n <div class=\"medium-2 columns\">2 columns</div>\n <div class=\"medium-10 columns\">10 columns</div>\n</div>\n<div class=\"row\">\n <div class=\"medium-3 columns\">3 columns</div>\n <div class=\"medium-9 columns\">9 columns</div>\n</div>"}]},"core":true},{"name":"Advanced","section":"advanced","description":"You can nest the grids indefinitely, though at a certain point it will get absurd.","category":"layout","component":"layout-grid","variations":{"html":[{"example":"<div class=\"row\">\n <div class=\"small-8 columns\">8\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested Again</div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n</div>","escaped":"<div class=\"row\">\n <div class=\"small-8 columns\">8\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested Again</div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n</div>"}]},"examples":{"html":[{"example":"<div class=\"row\">\n <div class=\"small-8 columns\">8\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested Again</div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n</div>","escaped":"<div class=\"row\">\n <div class=\"small-8 columns\">8\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested\n <div class=\"row\">\n <div class=\"small-8 columns\">8 Nested Again</div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n </div>\n </div>\n <div class=\"small-4 columns\">4</div>\n</div>"}]},"core":true},{"name":"Offsets","section":"offset","description":"Move blocks up to 11 columns to the right by using classes like <code>.large-offset-1</code> and <code>.small-offset-3.</code>","category":"layout","component":"layout-grid","variations":{"html":[{"example":"<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-11 columns\">11</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-10 large-offset-1 columns\">10, offset 1</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-9 large-offset-2 columns\">9, offset 2</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-8 large-offset-3 columns\">8, offset 3</div>\n</div>","escaped":"<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-11 columns\">11</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-10 large-offset-1 columns\">10, offset 1</div>\n</div>\n<div class=\"row\">\n <div class=\"large-1 columns\">1</div>\n <div class=\"large-9 large-offset-2 columns\">9, offset 2</div>\n</div>\n&l