2016-01-14 19:14:43 +08:00
< head >
2016-01-21 01:29:22 +08:00
< link href = '../css/cartostyles.css' type = 'text/css' rel = 'stylesheet' >
2016-01-14 19:14:43 +08:00
< / head >
{{> theme}}
{{> highlight}}
{{> jquery}}
< script >
var j = jQuery.noConflict(true);
j(function() {
2016-01-19 00:48:11 +08:00
// Click on link with subheadings
j('#styleguide-menu .submenulink').click(function(event) {
var jqCurSubmenu = j('[data-submenu="' + j(this).data('section') + '"]');
var isCurSubmenuOn = jqCurSubmenu.hasClass('on');
j('#styleguide-menu .on').removeClass('on');
if (!isCurSubmenuOn) {
jqCurSubmenu.addClass('on');
j(this).addClass('on');
2016-01-18 23:31:15 +08:00
}
2016-01-19 00:48:11 +08:00
showSection(j(this).data('section'));
});
2016-01-18 23:31:15 +08:00
2016-01-19 00:48:11 +08:00
// Click on link without subheadings
j('#styleguide-menu .sectionlink').click(function(event) {
j('#styleguide-menu .on').removeClass('on');
j(this).addClass('on');
showSection(j(this).data('section'));
});
2016-01-14 19:14:43 +08:00
2016-01-19 00:48:11 +08:00
// Show/Hide sections
function showSection(section) {
j('#styleguide .section').hide();
var jqCurSections = j('#styleguide .section[data-section="' + section + '"]');
jqCurSections.show();
}
2016-01-14 19:14:43 +08:00
2016-01-19 00:48:11 +08:00
// Show current section
var currentElement = window.location.hash.replace(/#/g, '');
if (currentElement) {
var section = currentElement.split('-')[0];
j('.submenulink[data-section="' + section + '"]').click();
} else {
// Show section in Styleguide
j('#styleguide .section[data-section="' + j('#styleguide-menu a').first().data('section') + '"]').show();
}
2016-01-14 19:14:43 +08:00
});
< / script >
2017-05-05 18:31:16 +08:00
< div class = "CDB-Text" id = "styleguide-menu" >
2016-01-14 19:14:43 +08:00
< ul >
2016-01-19 00:48:11 +08:00
< li >
< a class = "submenulink" href = "#Basics" data-section = "Basics" > Basics< / a >
< / li >
2016-01-14 19:14:43 +08:00
{{#each menu}}
< li >
{{#if headings.0.name}}
2016-01-18 23:31:15 +08:00
< a class = "submenulink" href = "#{{name}}" data-section = "{{name}}" > {{name}}< / a >
2016-01-14 19:14:43 +08:00
< ul class = "submenu" data-submenu = "{{../name}}" >
{{#each headings}}
< li > < a href = "#{{id}}" > {{name}}< / a > < / li >
{{/each}}
< / ul >
{{/if}}
{{#unless headings.0.name}}
2016-01-18 23:31:15 +08:00
< a class = "sectionlink" href = "#{{name}}" data-section = "{{name}}" > {{name}}< / a >
2016-01-14 19:14:43 +08:00
{{/unless}}
< / li >
{{/each}}
< / ul >
< / div >
< div id = "styleguide" >
2016-01-19 00:48:11 +08:00
< div class = "section" id = "Basics" data-section = "Basics" data-heading = "Basics" >
< div class = "comment" >
2017-05-05 18:31:16 +08:00
< h1 class = "CDB-Text CDB-Size-huge is-semibold" > Basics< / h1 >
< p class = "CDB-Text u-tSpace-xl" > Important notes about this styleguide< / p >
2016-01-19 00:48:11 +08:00
< / div >
< div class = "result" >
2017-05-05 18:31:16 +08:00
< p class = "CDB-Text" > This is a preliminar WIP of the new dashboard stylesheet, based on the naming conventions of < a href = "https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md" > suitcss< / a > and < a href = "https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06" > Medium’ < / a > < / p >
2016-01-20 23:58:40 +08:00
2017-05-05 18:31:16 +08:00
< p class = "CDB-Text is-semibold u-tSpace-xl" > General rules< / p >
2016-01-20 23:58:40 +08:00
2017-05-05 18:31:16 +08:00
< ul class = "styleguide-list CDB-Text u-tSpace-xl" >
< li class = "u-tSpace" > All new elements added in this repository should have included a 'CDB-' namespace.< / li >
< li class = "u-tSpace" >
< span class = "CDB-Text is-semibold" > Don't create default styles for common elements< / span > (e.g. < code > input { padding: 10px 0 }< / code > ). It will make more difficult edit styles for the future custom elements and the < code > !important< / code > use will grow.< / li >
< li class = "u-tSpace" >
< span class = "CDB-Text is-semibold" > Avoid creating new classes with only one attribute< / span > (e.g. < code > .marginRight { margin-right: 10px }< / code > ). It is impossible to manage the amount of cases we would like to cover.< / li >
2016-01-19 00:48:11 +08:00
< / ul >
< / div >
< / div >
2016-01-14 19:14:43 +08:00
{{#each sections}}
< div class = "section" id = "{{id}}" data-section = "{{section}}" data-heading = "{{heading}}" >
< div class = "comment" >
2017-05-05 18:31:16 +08:00
< h1 class = "CDB-Text CDB-Size-huge is-semibold" > {{section}}{{#if heading}}/{{heading}}{{/if}}< / h1 >
< div class = "CDB-Text u-tSpace-xl" > {{{comment}}}< / div >
2016-01-14 19:14:43 +08:00
< / div >
{{#if code}}
< div class = "result" >
{{{code}}}
< / div >
{{/if}}
{{#if markup}}
< div class = "markup hljs" >
< pre >
{{{markup}}}
< / pre >
< / div >
{{/if}}
< / div >
{{/each}}
< / div >
