mark the {@code } and {@code } tags in your source with
- * {@code class=prettyprint.}
- * You can also use the (html deprecated) {@code <![CDATA[} tag, but the pretty
- * printer needs to do more substantial DOM manipulations to support that, so
- * some css styles may not be preserved.
- * </ol>
- * That's it. I wanted to keep the API as simple as possible, so there's no
- * need to specify which language the code is in, but if you wish, you can add
- * another class to the {@code <pre>} or {@code <code>} element to specify the
- * language, as in {@code <pre class="prettyprint lang-java">}. Any class that
- * starts with "lang-" followed by a file extension, specifies the file type.
- * See the "lang-*.js" files in this directory for code that implements
- * per-language file handlers.
- * <p>
- * Change log:<br>
- * cbeust, 2006/08/22
- * <blockquote>
- * Java annotations (start with "@") are now captured as literals ("lit")
- * </blockquote>
- * @requires console
- */
-
-// JSLint declarations
-/*global console, document, navigator, setTimeout, window */
-
-/**
- * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
- * UI events.
- * If set to {@code false}, {@code prettyPrint()} is synchronous.
- */
-window['PR_SHOULD_USE_CONTINUATION'] = true;
-
-(function () {
- // Keyword lists for various languages.
- // We use things that coerce to strings to make them compact when minified
- // and to defeat aggressive optimizers that fold large string constants.
- var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
- var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," +
- "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
- "static,struct,switch,typedef,union,unsigned,void,volatile"];
- var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
- "new,operator,private,protected,public,this,throw,true,try,typeof"];
- var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
- "concept,concept_map,const_cast,constexpr,decltype," +
- "dynamic_cast,explicit,export,friend,inline,late_check," +
- "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
- "template,typeid,typename,using,virtual,where"];
- var JAVA_KEYWORDS = [COMMON_KEYWORDS,
- "abstract,boolean,byte,extends,final,finally,implements,import," +
- "instanceof,null,native,package,strictfp,super,synchronized,throws," +
- "transient"];
- var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
- "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
- "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
- "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
- "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
- var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
- "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
- "true,try,unless,until,when,while,yes";
- var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
- "debugger,eval,export,function,get,null,set,undefined,var,with," +
- "Infinity,NaN"];
- var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
- "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
- "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
- var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
- "elif,except,exec,finally,from,global,import,in,is,lambda," +
- "nonlocal,not,or,pass,print,raise,try,with,yield," +
- "False,True,None"];
- var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
- "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
- "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
- "BEGIN,END"];
- var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
- "function,in,local,set,then,until"];
- var ALL_KEYWORDS = [
- CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
- PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
- var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
-
- // token style names. correspond to css classes
- /**
- * token style for a string literal
- * @const
- */
- var PR_STRING = 'str';
- /**
- * token style for a keyword
- * @const
- */
- var PR_KEYWORD = 'kwd';
- /**
- * token style for a comment
- * @const
- */
- var PR_COMMENT = 'com';
- /**
- * token style for a type
- * @const
- */
- var PR_TYPE = 'typ';
- /**
- * token style for a literal value. e.g. 1, null, true.
- * @const
- */
- var PR_LITERAL = 'lit';
- /**
- * token style for a punctuation string.
- * @const
- */
- var PR_PUNCTUATION = 'pun';
- /**
- * token style for a punctuation string.
- * @const
- */
- var PR_PLAIN = 'pln';
-
- /**
- * token style for an sgml tag.
- * @const
- */
- var PR_TAG = 'tag';
- /**
- * token style for a markup declaration such as a DOCTYPE.
- * @const
- */
- var PR_DECLARATION = 'dec';
- /**
- * token style for embedded source.
- * @const
- */
- var PR_SOURCE = 'src';
- /**
- * token style for an sgml attribute name.
- * @const
- */
- var PR_ATTRIB_NAME = 'atn';
- /**
- * token style for an sgml attribute value.
- * @const
- */
- var PR_ATTRIB_VALUE = 'atv';
-
- /**
- * A class that indicates a section of markup that is not code, e.g. to allow
- * embedding of line numbers within code listings.
- * @const
- */
- var PR_NOCODE = 'nocode';
-
-
-
-/**
- * A set of tokens that can precede a regular expression literal in
- * javascript
- * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
- * has the full list, but I've removed ones that might be problematic when
- * seen in languages that don't support regular expression literals.
- *
- * <p>Specifically, I've removed any keywords that can't precede a regexp
- * literal in a syntactically legal javascript program, and I've removed the
- * "in" keyword since it's not a keyword in many languages, and might be used
- * as a count of inches.
- *
- * <p>The link a above does not accurately describe EcmaScript rules since
- * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
- * very well in practice.
- *
- * @private
- * @const
- */
-var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
-
-// CAVEAT: this does not properly handle the case where a regular
-// expression immediately follows another since a regular expression may
-// have flags for case-sensitivity and the like. Having regexp tokens
-// adjacent is not valid in any language I'm aware of, so I'm punting.
-// TODO: maybe style special characters inside a regexp as punctuation.
-
-
- /**
- * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
- * matches the union of the sets of strings matched by the input RegExp.
- * Since it matches globally, if the input strings have a start-of-input
- * anchor (/^.../), it is ignored for the purposes of unioning.
- * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
- * @return {RegExp} a global regex.
- */
- function combinePrefixPatterns(regexs) {
- var capturedGroupIndex = 0;
-
- var needToFoldCase = false;
- var ignoreCase = false;
- for (var i = 0, n = regexs.length; i < n; ++i) {
- var regex = regexs[i];
- if (regex.ignoreCase) {
- ignoreCase = true;
- } else if (/[a-z]/i.test(regex.source.replace(
- /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
- needToFoldCase = true;
- ignoreCase = false;
- break;
- }
- }
-
- var escapeCharToCodeUnit = {
- 'b': 8,
- 't': 9,
- 'n': 0xa,
- 'v': 0xb,
- 'f': 0xc,
- 'r': 0xd
- };
-
- function decodeEscape(charsetPart) {
- var cc0 = charsetPart.charCodeAt(0);
- if (cc0 !== 92 /* \\ */) {
- return cc0;
- }
- var c1 = charsetPart.charAt(1);
- cc0 = escapeCharToCodeUnit[c1];
- if (cc0) {
- return cc0;
- } else if ('0' <= c1 && c1 <= '7') {
- return parseInt(charsetPart.substring(1), 8);
- } else if (c1 === 'u' || c1 === 'x') {
- return parseInt(charsetPart.substring(2), 16);
- } else {
- return charsetPart.charCodeAt(1);
- }
- }
-
- function encodeEscape(charCode) {
- if (charCode < 0x20) {
- return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
- }
- var ch = String.fromCharCode(charCode);
- if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
- ch = '\\' + ch;
- }
- return ch;
- }
-
- function caseFoldCharset(charSet) {
- var charsetParts = charSet.substring(1, charSet.length - 1).match(
- new RegExp(
- '\\\\u[0-9A-Fa-f]{4}'
- + '|\\\\x[0-9A-Fa-f]{2}'
- + '|\\\\[0-3][0-7]{0,2}'
- + '|\\\\[0-7]{1,2}'
- + '|\\\\[\\s\\S]'
- + '|-'
- + '|[^-\\\\]',
- 'g'));
- var groups = [];
- var ranges = [];
- var inverse = charsetParts[0] === '^';
- for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
- var p = charsetParts[i];
- if (/\\[bdsw]/i.test(p)) { // Don't muck with named groups.
- groups.push(p);
- } else {
- var start = decodeEscape(p);
- var end;
- if (i + 2 < n && '-' === charsetParts[i + 1]) {
- end = decodeEscape(charsetParts[i + 2]);
- i += 2;
- } else {
- end = start;
- }
- ranges.push([start, end]);
- // If the range might intersect letters, then expand it.
- // This case handling is too simplistic.
- // It does not deal with non-latin case folding.
- // It works for latin source code identifiers though.
- if (!(end < 65 || start > 122)) {
- if (!(end < 65 || start > 90)) {
- ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
- }
- if (!(end < 97 || start > 122)) {
- ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
- }
- }
- }
- }
-
- // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
- // -> [[1, 12], [14, 14], [16, 17]]
- ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });
- var consolidatedRanges = [];
- var lastRange = [NaN, NaN];
- for (var i = 0; i < ranges.length; ++i) {
- var range = ranges[i];
- if (range[0] <= lastRange[1] + 1) {
- lastRange[1] = Math.max(lastRange[1], range[1]);
- } else {
- consolidatedRanges.push(lastRange = range);
- }
- }
-
- var out = ['['];
- if (inverse) { out.push('^'); }
- out.push.apply(out, groups);
- for (var i = 0; i < consolidatedRanges.length; ++i) {
- var range = consolidatedRanges[i];
- out.push(encodeEscape(range[0]));
- if (range[1] > range[0]) {
- if (range[1] + 1 > range[0]) { out.push('-'); }
- out.push(encodeEscape(range[1]));
- }
- }
- out.push(']');
- return out.join('');
- }
-
- function allowAnywhereFoldCaseAndRenumberGroups(regex) {
- // Split into character sets, escape sequences, punctuation strings
- // like ('(', '(?:', ')', '^'), and runs of characters that do not
- // include any of the above.
- var parts = regex.source.match(
- new RegExp(
- '(?:'
- + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set
- + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape
- + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape
- + '|\\\\[0-9]+' // a back-reference or octal escape
- + '|\\\\[^ux0-9]' // other escape sequence
- + '|\\(\\?[:!=]' // start of a non-capturing group
- + '|[\\(\\)\\^]' // start/emd of a group, or line start
- + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters
- + ')',
- 'g'));
- var n = parts.length;
-
- // Maps captured group numbers to the number they will occupy in
- // the output or to -1 if that has not been determined, or to
- // undefined if they need not be capturing in the output.
- var capturedGroups = [];
-
- // Walk over and identify back references to build the capturedGroups
- // mapping.
- for (var i = 0, groupIndex = 0; i < n; ++i) {
- var p = parts[i];
- if (p === '(') {
- // groups are 1-indexed, so max group index is count of '('
- ++groupIndex;
- } else if ('\\' === p.charAt(0)) {
- var decimalValue = +p.substring(1);
- if (decimalValue && decimalValue <= groupIndex) {
- capturedGroups[decimalValue] = -1;
- }
- }
- }
-
- // Renumber groups and reduce capturing groups to non-capturing groups
- // where possible.
- for (var i = 1; i < capturedGroups.length; ++i) {
- if (-1 === capturedGroups[i]) {
- capturedGroups[i] = ++capturedGroupIndex;
- }
- }
- for (var i = 0, groupIndex = 0; i < n; ++i) {
- var p = parts[i];
- if (p === '(') {
- ++groupIndex;
- if (capturedGroups[groupIndex] === undefined) {
- parts[i] = '(?:';
- }
- } else if ('\\' === p.charAt(0)) {
- var decimalValue = +p.substring(1);
- if (decimalValue && decimalValue <= groupIndex) {
- parts[i] = '\\' + capturedGroups[groupIndex];
- }
- }
- }
-
- // Remove any prefix anchors so that the output will match anywhere.
- // ^^ really does mean an anchored match though.
- for (var i = 0, groupIndex = 0; i < n; ++i) {
- if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
- }
-
- // Expand letters to groups to handle mixing of case-sensitive and
- // case-insensitive patterns if necessary.
- if (regex.ignoreCase && needToFoldCase) {
- for (var i = 0; i < n; ++i) {
- var p = parts[i];
- var ch0 = p.charAt(0);
- if (p.length >= 2 && ch0 === '[') {
- parts[i] = caseFoldCharset(p);
- } else if (ch0 !== '\\') {
- // TODO: handle letters in numeric escapes.
- parts[i] = p.replace(
- /[a-zA-Z]/g,
- function (ch) {
- var cc = ch.charCodeAt(0);
- return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
- });
- }
- }
- }
-
- return parts.join('');
- }
-
- var rewritten = [];
- for (var i = 0, n = regexs.length; i < n; ++i) {
- var regex = regexs[i];
- if (regex.global || regex.multiline) { throw new Error('' + regex); }
- rewritten.push(
- '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
- }
-
- return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
- }
-
-
- /**
- * Split markup into a string of source code and an array mapping ranges in
- * that string to the text nodes in which they appear.
- *
- * <p>
- * The HTML DOM structure:</p>
- * <pre>
- * (Element "p"
- * (Element "b"
- * (Text "print ")) ; #1
- * (Text "'Hello '") ; #2
- * (Element "br") ; #3
- * (Text " + 'World';")) ; #4
- * </pre>
- * <p>
- * corresponds to the HTML
- * {@code <p><b>print </b>'Hello '<br> + 'World';</p>}.</p>
- *
- * <p>
- * It will produce the output:</p>
- * <pre>
- * {
- * sourceCode: "print 'Hello '\n + 'World';",
- * // 1 2
- * // 012345678901234 5678901234567
- * spans: [0, #1, 6, #2, 14, #3, 15, #4]
- * }
- * </pre>
- * <p>
- * where #1 is a reference to the {@code "print "} text node above, and so
- * on for the other text nodes.
- * </p>
- *
- * <p>
- * The {@code} spans array is an array of pairs. Even elements are the start
- * indices of substrings, and odd elements are the text nodes (or BR elements)
- * that contain the text for those substrings.
- * Substrings continue until the next index or the end of the source.
- * </p>
- *
- * @param {Node} node an HTML DOM subtree containing source-code.
- * @return {Object} source code and the text nodes in which they occur.
- */
- function extractSourceSpans(node) {
- var nocode = /(?:^|\s)nocode(?:\s|$)/;
-
- var chunks = [];
- var length = 0;
- var spans = [];
- var k = 0;
-
- var whitespace;
- if (node.currentStyle) {
- whitespace = node.currentStyle.whiteSpace;
- } else if (window.getComputedStyle) {
- whitespace = document.defaultView.getComputedStyle(node, null)
- .getPropertyValue('white-space');
- }
- var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
-
- function walk(node) {
- switch (node.nodeType) {
- case 1: // Element
- if (nocode.test(node.className)) { return; }
- for (var child = node.firstChild; child; child = child.nextSibling) {
- walk(child);
- }
- var nodeName = node.nodeName;
- if ('BR' === nodeName || 'LI' === nodeName) {
- chunks[k] = '\n';
- spans[k << 1] = length++;
- spans[(k++ << 1) | 1] = node;
- }
- break;
- case 3: case 4: // Text
- var text = node.nodeValue;
- if (text.length) {
- if (!isPreformatted) {
- text = text.replace(/[ \t\r\n]+/g, ' ');
- } else {
- text = text.replace(/\r\n?/g, '\n'); // Normalize newlines.
- }
- // TODO: handle tabs here?
- chunks[k] = text;
- spans[k << 1] = length;
- length += text.length;
- spans[(k++ << 1) | 1] = node;
- }
- break;
- }
- }
-
- walk(node);
-
- return {
- sourceCode: chunks.join('').replace(/\n$/, ''),
- spans: spans
- };
- }
-
-
- /**
- * Apply the given language handler to sourceCode and add the resulting
- * decorations to out.
- * @param {number} basePos the index of sourceCode within the chunk of source
- * whose decorations are already present on out.
- */
- function appendDecorations(basePos, sourceCode, langHandler, out) {
- if (!sourceCode) { return; }
- var job = {
- sourceCode: sourceCode,
- basePos: basePos
- };
- langHandler(job);
- out.push.apply(out, job.decorations);
- }
-
- var notWs = /\S/;
-
- /**
- * Given an element, if it contains only one child element and any text nodes
- * it contains contain only space characters, return the sole child element.
- * Otherwise returns undefined.
- * <p>
- * This is meant to return the CODE element in {@code <pre><code ...>} when
- * there is a single child element that contains all the non-space textual
- * content, but not to return anything where there are multiple child elements
- * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
- * is textual content.
- */
- function childContentWrapper(element) {
- var wrapper = undefined;
- for (var c = element.firstChild; c; c = c.nextSibling) {
- var type = c.nodeType;
- wrapper = (type === 1) // Element Node
- ? (wrapper ? element : c)
- : (type === 3) // Text Node
- ? (notWs.test(c.nodeValue) ? element : wrapper)
- : wrapper;
- }
- return wrapper === element ? undefined : wrapper;
- }
-
- /** Given triples of [style, pattern, context] returns a lexing function,
- * The lexing function interprets the patterns to find token boundaries and
- * returns a decoration list of the form
- * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
- * where index_n is an index into the sourceCode, and style_n is a style
- * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to
- * all characters in sourceCode[index_n-1:index_n].
- *
- * The stylePatterns is a list whose elements have the form
- * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
- *
- * Style is a style constant like PR_PLAIN, or can be a string of the
- * form 'lang-FOO', where FOO is a language extension describing the
- * language of the portion of the token in $1 after pattern executes.
- * E.g., if style is 'lang-lisp', and group 1 contains the text
- * '(hello (world))', then that portion of the token will be passed to the
- * registered lisp handler for formatting.
- * The text before and after group 1 will be restyled using this decorator
- * so decorators should take care that this doesn't result in infinite
- * recursion. For example, the HTML lexer rule for SCRIPT elements looks
- * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match
- * '<script>foo()<\/script>', which would cause the current decorator to
- * be called with '<script>' which would not match the same rule since
- * group 1 must not be empty, so it would be instead styled as PR_TAG by
- * the generic tag rule. The handler registered for the 'js' extension would
- * then be called with 'foo()', and finally, the current decorator would
- * be called with '<\/script>' which would not match the original rule and
- * so the generic tag rule would identify it as a tag.
- *
- * Pattern must only match prefixes, and if it matches a prefix, then that
- * match is considered a token with the same style.
- *
- * Context is applied to the last non-whitespace, non-comment token
- * recognized.
- *
- * Shortcut is an optional string of characters, any of which, if the first
- * character, gurantee that this pattern and only this pattern matches.
- *
- * @param {Array} shortcutStylePatterns patterns that always start with
- * a known character. Must have a shortcut string.
- * @param {Array} fallthroughStylePatterns patterns that will be tried in
- * order if the shortcut ones fail. May have shortcuts.
- *
- * @return {function (Object)} a
- * function that takes source code and returns a list of decorations.
- */
- function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
- var shortcuts = {};
- var tokenizer;
- (function () {
- var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
- var allRegexs = [];
- var regexKeys = {};
- for (var i = 0, n = allPatterns.length; i < n; ++i) {
- var patternParts = allPatterns[i];
- var shortcutChars = patternParts[3];
- if (shortcutChars) {
- for (var c = shortcutChars.length; --c >= 0;) {
- shortcuts[shortcutChars.charAt(c)] = patternParts;
- }
- }
- var regex = patternParts[1];
- var k = '' + regex;
- if (!regexKeys.hasOwnProperty(k)) {
- allRegexs.push(regex);
- regexKeys[k] = null;
- }
- }
- allRegexs.push(/[\0-\uffff]/);
- tokenizer = combinePrefixPatterns(allRegexs);
- })();
-
- var nPatterns = fallthroughStylePatterns.length;
-
- /**
- * Lexes job.sourceCode and produces an output array job.decorations of
- * style classes preceded by the position at which they start in
- * job.sourceCode in order.
- *
- * @param {Object} job an object like <pre>{
- * sourceCode: {string} sourceText plain text,
- * basePos: {int} position of job.sourceCode in the larger chunk of
- * sourceCode.
- * }</pre>
- */
- var decorate = function (job) {
- var sourceCode = job.sourceCode, basePos = job.basePos;
- /** Even entries are positions in source in ascending order. Odd enties
- * are style markers (e.g., PR_COMMENT) that run from that position until
- * the end.
- * @type {Array.<number|string>}
- */
- var decorations = [basePos, PR_PLAIN];
- var pos = 0; // index into sourceCode
- var tokens = sourceCode.match(tokenizer) || [];
- var styleCache = {};
-
- for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
- var token = tokens[ti];
- var style = styleCache[token];
- var match = void 0;
-
- var isEmbedded;
- if (typeof style === 'string') {
- isEmbedded = false;
- } else {
- var patternParts = shortcuts[token.charAt(0)];
- if (patternParts) {
- match = token.match(patternParts[1]);
- style = patternParts[0];
- } else {
- for (var i = 0; i < nPatterns; ++i) {
- patternParts = fallthroughStylePatterns[i];
- match = token.match(patternParts[1]);
- if (match) {
- style = patternParts[0];
- break;
- }
- }
-
- if (!match) { // make sure that we make progress
- style = PR_PLAIN;
- }
- }
-
- isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
- if (isEmbedded && !(match && typeof match[1] === 'string')) {
- isEmbedded = false;
- style = PR_SOURCE;
- }
-
- if (!isEmbedded) { styleCache[token] = style; }
- }
-
- var tokenStart = pos;
- pos += token.length;
-
- if (!isEmbedded) {
- decorations.push(basePos + tokenStart, style);
- } else { // Treat group 1 as an embedded block of source code.
- var embeddedSource = match[1];
- var embeddedSourceStart = token.indexOf(embeddedSource);
- var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
- if (match[2]) {
- // If embeddedSource can be blank, then it would match at the
- // beginning which would cause us to infinitely recurse on the
- // entire token, so we catch the right context in match[2].
- embeddedSourceEnd = token.length - match[2].length;
- embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
- }
- var lang = style.substring(5);
- // Decorate the left of the embedded source
- appendDecorations(
- basePos + tokenStart,
- token.substring(0, embeddedSourceStart),
- decorate, decorations);
- // Decorate the embedded source
- appendDecorations(
- basePos + tokenStart + embeddedSourceStart,
- embeddedSource,
- langHandlerForExtension(lang, embeddedSource),
- decorations);
- // Decorate the right of the embedded section
- appendDecorations(
- basePos + tokenStart + embeddedSourceEnd,
- token.substring(embeddedSourceEnd),
- decorate, decorations);
- }
- }
- job.decorations = decorations;
- };
- return decorate;
- }
-
- /** returns a function that produces a list of decorations from source text.
- *
- * This code treats ", ', and ` as string delimiters, and \ as a string
- * escape. It does not recognize perl's qq() style strings.
- * It has no special handling for double delimiter escapes as in basic, or
- * the tripled delimiters used in python, but should work on those regardless
- * although in those cases a single string literal may be broken up into
- * multiple adjacent string literals.
- *
- * It recognizes C, C++, and shell style comments.
- *
- * @param {Object} options a set of optional parameters.
- * @return {function (Object)} a function that examines the source code
- * in the input job and builds the decoration list.
- */
- function sourceDecorator(options) {
- var shortcutStylePatterns = [], fallthroughStylePatterns = [];
- if (options['tripleQuotedStrings']) {
- // '''multi-line-string''', 'single-line-string', and double-quoted
- shortcutStylePatterns.push(
- [PR_STRING, /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
- null, '\'"']);
- } else if (options['multiLineStrings']) {
- // 'multi-line-string', "multi-line-string"
- shortcutStylePatterns.push(
- [PR_STRING, /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
- null, '\'"`']);
- } else {
- // 'single-line-string', "single-line-string"
- shortcutStylePatterns.push(
- [PR_STRING,
- /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
- null, '"\'']);
- }
- if (options['verbatimStrings']) {
- // verbatim-string-literal production from the C# grammar. See issue 93.
- fallthroughStylePatterns.push(
- [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
- }
- var hc = options['hashComments'];
- if (hc) {
- if (options['cStyleComments']) {
- if (hc > 1) { // multiline hash comments
- shortcutStylePatterns.push(
- [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
- } else {
- // Stop C preprocessor declarations at an unclosed open comment
- shortcutStylePatterns.push(
- [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
- null, '#']);
- }
- fallthroughStylePatterns.push(
- [PR_STRING,
- /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
- null]);
- } else {
- shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
- }
- }
- if (options['cStyleComments']) {
- fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
- fallthroughStylePatterns.push(
- [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
- }
- if (options['regexLiterals']) {
- /**
- * @const
- */
- var REGEX_LITERAL = (
- // A regular expression literal starts with a slash that is
- // not followed by * or / so that it is not confused with
- // comments.
- '/(?=[^/*])'
- // and then contains any number of raw characters,
- + '(?:[^/\\x5B\\x5C]'
- // escape sequences (\x5C),
- + '|\\x5C[\\s\\S]'
- // or non-nesting character sets (\x5B\x5D);
- + '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
- // finally closed by a /.
- + '/');
- fallthroughStylePatterns.push(
- ['lang-regex',
- new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
- ]);
- }
-
- var types = options['types'];
- if (types) {
- fallthroughStylePatterns.push([PR_TYPE, types]);
- }
-
- var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
- if (keywords.length) {
- fallthroughStylePatterns.push(
- [PR_KEYWORD,
- new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
- null]);
- }
-
- shortcutStylePatterns.push([PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']);
- fallthroughStylePatterns.push(
- // TODO(mikesamuel): recognize non-latin letters and numerals in idents
- [PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
- [PR_TYPE, /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
- [PR_PLAIN, /^[a-z_$][a-z_$@0-9]*/i, null],
- [PR_LITERAL,
- new RegExp(
- '^(?:'
- // A hex number
- + '0x[a-f0-9]+'
- // or an octal or decimal number,
- + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
- // possibly in scientific notation
- + '(?:e[+\\-]?\\d+)?'
- + ')'
- // with an optional modifier like UL for unsigned long
- + '[a-z]*', 'i'),
- null, '0123456789'],
- // Don't treat escaped quotes in bash as starting strings. See issue 144.
- [PR_PLAIN, /^\\[\s\S]?/, null],
- [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
-
- return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
- }
-
- var decorateSource = sourceDecorator({
- 'keywords': ALL_KEYWORDS,
- 'hashComments': true,
- 'cStyleComments': true,
- 'multiLineStrings': true,
- 'regexLiterals': true
- });
-
- /**
- * Given a DOM subtree, wraps it in a list, and puts each line into its own
- * list item.
- *
- * @param {Node} node modified in place. Its content is pulled into an
- * HTMLOListElement, and each line is moved into a separate list item.
- * This requires cloning elements, so the input might not have unique
- * IDs after numbering.
- */
- function numberLines(node, opt_startLineNum) {
- var nocode = /(?:^|\s)nocode(?:\s|$)/;
- var lineBreak = /\r\n?|\n/;
-
- var document = node.ownerDocument;
-
- var whitespace;
- if (node.currentStyle) {
- whitespace = node.currentStyle.whiteSpace;
- } else if (window.getComputedStyle) {
- whitespace = document.defaultView.getComputedStyle(node, null)
- .getPropertyValue('white-space');
- }
- // If it's preformatted, then we need to split lines on line breaks
- // in addition to <BR>s.
- var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
-
- var li = document.createElement('LI');
- while (node.firstChild) {
- li.appendChild(node.firstChild);
- }
- // An array of lines. We split below, so this is initialized to one
- // un-split line.
- var listItems = [li];
-
- function walk(node) {
- switch (node.nodeType) {
- case 1: // Element
- if (nocode.test(node.className)) { break; }
- if ('BR' === node.nodeName) {
- breakAfter(node);
- // Discard the <BR> since it is now flush against a </LI>.
- if (node.parentNode) {
- node.parentNode.removeChild(node);
- }
- } else {
- for (var child = node.firstChild; child; child = child.nextSibling) {
- walk(child);
- }
- }
- break;
- case 3: case 4: // Text
- if (isPreformatted) {
- var text = node.nodeValue;
- var match = text.match(lineBreak);
- if (match) {
- var firstLine = text.substring(0, match.index);
- node.nodeValue = firstLine;
- var tail = text.substring(match.index + match[0].length);
- if (tail) {
- var parent = node.parentNode;
- parent.insertBefore(
- document.createTextNode(tail), node.nextSibling);
- }
- breakAfter(node);
- if (!firstLine) {
- // Don't leave blank text nodes in the DOM.
- node.parentNode.removeChild(node);
- }
- }
- }
- break;
- }
- }
-
- // Split a line after the given node.
- function breakAfter(lineEndNode) {
- // If there's nothing to the right, then we can skip ending the line
- // here, and move root-wards since splitting just before an end-tag
- // would require us to create a bunch of empty copies.
- while (!lineEndNode.nextSibling) {
- lineEndNode = lineEndNode.parentNode;
- if (!lineEndNode) { return; }
- }
-
- function breakLeftOf(limit, copy) {
- // Clone shallowly if this node needs to be on both sides of the break.
- var rightSide = copy ? limit.cloneNode(false) : limit;
- var parent = limit.parentNode;
- if (parent) {
- // We clone the parent chain.
- // This helps us resurrect important styling elements that cross lines.
- // E.g. in <i>Foo<br>Bar</i>
- // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
- var parentClone = breakLeftOf(parent, 1);
- // Move the clone and everything to the right of the original
- // onto the cloned parent.
- var next = limit.nextSibling;
- parentClone.appendChild(rightSide);
- for (var sibling = next; sibling; sibling = next) {
- next = sibling.nextSibling;
- parentClone.appendChild(sibling);
- }
- }
- return rightSide;
- }
-
- var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
-
- // Walk the parent chain until we reach an unattached LI.
- for (var parent;
- // Check nodeType since IE invents document fragments.
- (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
- copiedListItem = parent;
- }
- // Put it on the list of lines for later processing.
- listItems.push(copiedListItem);
- }
-
- // Split lines while there are lines left to split.
- for (var i = 0; // Number of lines that have been split so far.
- i < listItems.length; // length updated by breakAfter calls.
- ++i) {
- walk(listItems[i]);
- }
-
- // Make sure numeric indices show correctly.
- if (opt_startLineNum === (opt_startLineNum|0)) {
- listItems[0].setAttribute('value', opt_startLineNum);
- }
-
- var ol = document.createElement('OL');
- ol.className = 'linenums';
- var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
- for (var i = 0, n = listItems.length; i < n; ++i) {
- li = listItems[i];
- // Stick a class on the LIs so that stylesheets can
- // color odd/even rows, or any other row pattern that
- // is co-prime with 10.
- li.className = 'L' + ((i + offset) % 10);
- if (!li.firstChild) {
- li.appendChild(document.createTextNode('\xA0'));
- }
- ol.appendChild(li);
- }
-
- node.appendChild(ol);
- }
-
- /**
- * Breaks {@code job.sourceCode} around style boundaries in
- * {@code job.decorations} and modifies {@code job.sourceNode} in place.
- * @param {Object} job like <pre>{
- * sourceCode: {string} source as plain text,
- * spans: {Array.<number|Node>} alternating span start indices into source
- * and the text node or element (e.g. {@code <BR>}) corresponding to that
- * span.
- * decorations: {Array.<number|string} an array of style classes preceded
- * by the position at which they start in job.sourceCode in order
- * }</pre>
- * @private
- */
- function recombineTagsAndDecorations(job) {
- var isIE = /\bMSIE\b/.test(navigator.userAgent);
- var newlineRe = /\n/g;
-
- var source = job.sourceCode;
- var sourceLength = source.length;
- // Index into source after the last code-unit recombined.
- var sourceIndex = 0;
-
- var spans = job.spans;
- var nSpans = spans.length;
- // Index into spans after the last span which ends at or before sourceIndex.
- var spanIndex = 0;
-
- var decorations = job.decorations;
- var nDecorations = decorations.length;
- // Index into decorations after the last decoration which ends at or before
- // sourceIndex.
- var decorationIndex = 0;
-
- // Remove all zero-length decorations.
- decorations[nDecorations] = sourceLength;
- var decPos, i;
- for (i = decPos = 0; i < nDecorations;) {
- if (decorations[i] !== decorations[i + 2]) {
- decorations[decPos++] = decorations[i++];
- decorations[decPos++] = decorations[i++];
- } else {
- i += 2;
- }
- }
- nDecorations = decPos;
-
- // Simplify decorations.
- for (i = decPos = 0; i < nDecorations;) {
- var startPos = decorations[i];
- // Conflate all adjacent decorations that use the same style.
- var startDec = decorations[i + 1];
- var end = i + 2;
- while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
- end += 2;
- }
- decorations[decPos++] = startPos;
- decorations[decPos++] = startDec;
- i = end;
- }
-
- nDecorations = decorations.length = decPos;
-
- var decoration = null;
- while (spanIndex < nSpans) {
- var spanStart = spans[spanIndex];
- var spanEnd = spans[spanIndex + 2] || sourceLength;
-
- var decStart = decorations[decorationIndex];
- var decEnd = decorations[decorationIndex + 2] || sourceLength;
-
- var end = Math.min(spanEnd, decEnd);
-
- var textNode = spans[spanIndex + 1];
- var styledText;
- if (textNode.nodeType !== 1 // Don't muck with <BR>s or <LI>s
- // Don't introduce spans around empty text nodes.
- && (styledText = source.substring(sourceIndex, end))) {
- // This may seem bizarre, and it is. Emitting LF on IE causes the
- // code to display with spaces instead of line breaks.
- // Emitting Windows standard issue linebreaks (CRLF) causes a blank
- // space to appear at the beginning of every line but the first.
- // Emitting an old Mac OS 9 line separator makes everything spiffy.
- if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
- textNode.nodeValue = styledText;
- var document = textNode.ownerDocument;
- var span = document.createElement('SPAN');
- span.className = decorations[decorationIndex + 1];
- var parentNode = textNode.parentNode;
- parentNode.replaceChild(span, textNode);
- span.appendChild(textNode);
- if (sourceIndex < spanEnd) { // Split off a text node.
- spans[spanIndex + 1] = textNode
- // TODO: Possibly optimize by using '' if there's no flicker.
- = document.createTextNode(source.substring(end, spanEnd));
- parentNode.insertBefore(textNode, span.nextSibling);
- }
- }
-
- sourceIndex = end;
-
- if (sourceIndex >= spanEnd) {
- spanIndex += 2;
- }
- if (sourceIndex >= decEnd) {
- decorationIndex += 2;
- }
- }
- }
-
-
- /** Maps language-specific file extensions to handlers. */
- var langHandlerRegistry = {};
- /** Register a language handler for the given file extensions.
- * @param {function (Object)} handler a function from source code to a list
- * of decorations. Takes a single argument job which describes the
- * state of the computation. The single parameter has the form
- * {@code {
- * sourceCode: {string} as plain text.
- * decorations: {Array.<number|string>} an array of style classes
- * preceded by the position at which they start in
- * job.sourceCode in order.
- * The language handler should assigned this field.
- * basePos: {int} the position of source in the larger source chunk.
- * All positions in the output decorations array are relative
- * to the larger source chunk.
- * } }
- * @param {Array.<string>} fileExtensions
- */
- function registerLangHandler(handler, fileExtensions) {
- for (var i = fileExtensions.length; --i >= 0;) {
- var ext = fileExtensions[i];
- if (!langHandlerRegistry.hasOwnProperty(ext)) {
- langHandlerRegistry[ext] = handler;
- } else if (window['console']) {
- console['warn']('cannot override language handler %s', ext);
- }
- }
- }
- function langHandlerForExtension(extension, source) {
- if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
- // Treat it as markup if the first non whitespace character is a < and
- // the last non-whitespace character is a >.
- extension = /^\s*</.test(source)
- ? 'default-markup'
- : 'default-code';
- }
- return langHandlerRegistry[extension];
- }
- registerLangHandler(decorateSource, ['default-code']);
- registerLangHandler(
- createSimpleLexer(
- [],
- [
- [PR_PLAIN, /^[^<?]+/],
- [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
- [PR_COMMENT, /^<\!--[\s\S]*?(?:-\->|$)/],
- // Unescaped content in an unknown language
- ['lang-', /^<\?([\s\S]+?)(?:\?>|$)/],
- ['lang-', /^<%([\s\S]+?)(?:%>|$)/],
- [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
- ['lang-', /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
- // Unescaped content in javascript. (Or possibly vbscript).
- ['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
- // Contains unescaped stylesheet content
- ['lang-css', /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
- ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]
- ]),
- ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
- registerLangHandler(
- createSimpleLexer(
- [
- [PR_PLAIN, /^[\s]+/, null, ' \t\r\n'],
- [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
- ],
- [
- [PR_TAG, /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
- [PR_ATTRIB_NAME, /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
- ['lang-uq.val', /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
- [PR_PUNCTUATION, /^[=<>\/]+/],
- ['lang-js', /^on\w+\s*=\s*\"([^\"]+)\"/i],
- ['lang-js', /^on\w+\s*=\s*\'([^\']+)\'/i],
- ['lang-js', /^on\w+\s*=\s*([^\"\'>\s]+)/i],
- ['lang-css', /^style\s*=\s*\"([^\"]+)\"/i],
- ['lang-css', /^style\s*=\s*\'([^\']+)\'/i],
- ['lang-css', /^style\s*=\s*([^\"\'>\s]+)/i]
- ]),
- ['in.tag']);
- registerLangHandler(
- createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
- registerLangHandler(sourceDecorator({
- 'keywords': CPP_KEYWORDS,
- 'hashComments': true,
- 'cStyleComments': true,
- 'types': C_TYPES
- }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
- registerLangHandler(sourceDecorator({
- 'keywords': 'null,true,false'
- }), ['json']);
- registerLangHandler(sourceDecorator({
- 'keywords': CSHARP_KEYWORDS,
- 'hashComments': true,
- 'cStyleComments': true,
- 'verbatimStrings': true,
- 'types': C_TYPES
- }), ['cs']);
- registerLangHandler(sourceDecorator({
- 'keywords': JAVA_KEYWORDS,
- 'cStyleComments': true
- }), ['java']);
- registerLangHandler(sourceDecorator({
- 'keywords': SH_KEYWORDS,
- 'hashComments': true,
- 'multiLineStrings': true
- }), ['bsh', 'csh', 'sh']);
- registerLangHandler(sourceDecorator({
- 'keywords': PYTHON_KEYWORDS,
- 'hashComments': true,
- 'multiLineStrings': true,
- 'tripleQuotedStrings': true
- }), ['cv', 'py']);
- registerLangHandler(sourceDecorator({
- 'keywords': PERL_KEYWORDS,
- 'hashComments': true,
- 'multiLineStrings': true,
- 'regexLiterals': true
- }), ['perl', 'pl', 'pm']);
- registerLangHandler(sourceDecorator({
- 'keywords': RUBY_KEYWORDS,
- 'hashComments': true,
- 'multiLineStrings': true,
- 'regexLiterals': true
- }), ['rb']);
- registerLangHandler(sourceDecorator({
- 'keywords': JSCRIPT_KEYWORDS,
- 'cStyleComments': true,
- 'regexLiterals': true
- }), ['js']);
- registerLangHandler(sourceDecorator({
- 'keywords': COFFEE_KEYWORDS,
- 'hashComments': 3, // ### style block comments
- 'cStyleComments': true,
- 'multilineStrings': true,
- 'tripleQuotedStrings': true,
- 'regexLiterals': true
- }), ['coffee']);
- registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
-
- function applyDecorator(job) {
- var opt_langExtension = job.langExtension;
-
- try {
- // Extract tags, and convert the source code to plain text.
- var sourceAndSpans = extractSourceSpans(job.sourceNode);
- /** Plain text. @type {string} */
- var source = sourceAndSpans.sourceCode;
- job.sourceCode = source;
- job.spans = sourceAndSpans.spans;
- job.basePos = 0;
-
- // Apply the appropriate language handler
- langHandlerForExtension(opt_langExtension, source)(job);
-
- // Integrate the decorations and tags back into the source code,
- // modifying the sourceNode in place.
- recombineTagsAndDecorations(job);
- } catch (e) {
- if ('console' in window) {
- console['log'](e && e['stack'] ? e['stack'] : e);
- }
- }
- }
-
- /**
- * @param sourceCodeHtml {string} The HTML to pretty print.
- * @param opt_langExtension {string} The language name to use.
- * Typically, a filename extension like 'cpp' or 'java'.
- * @param opt_numberLines {number|boolean} True to number lines,
- * or the 1-indexed number of the first line in sourceCodeHtml.
- */
- function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
- var container = document.createElement('PRE');
- // This could cause images to load and onload listeners to fire.
- // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
- // We assume that the inner HTML is from a trusted source.
- container.innerHTML = sourceCodeHtml;
- if (opt_numberLines) {
- numberLines(container, opt_numberLines);
- }
-
- var job = {
- langExtension: opt_langExtension,
- numberLines: opt_numberLines,
- sourceNode: container
- };
- applyDecorator(job);
- return container.innerHTML;
- }
-
- function prettyPrint(opt_whenDone) {
- function byTagName(tn) { return document.getElementsByTagName(tn); }
- // fetch a list of nodes to rewrite
- var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
- var elements = [];
- for (var i = 0; i < codeSegments.length; ++i) {
- for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
- elements.push(codeSegments[i][j]);
- }
- }
- codeSegments = null;
-
- var clock = Date;
- if (!clock['now']) {
- clock = { 'now': function () { return +(new Date); } };
- }
-
- // The loop is broken into a series of continuations to make sure that we
- // don't make the browser unresponsive when rewriting a large page.
- var k = 0;
- var prettyPrintingJob;
-
- var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
- var prettyPrintRe = /\bprettyprint\b/;
-
- function doWork() {
- var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
- clock['now']() + 250 /* ms */ :
- Infinity);
- for (; k < elements.length && clock['now']() < endTime; k++) {
- var cs = elements[k];
- var className = cs.className;
- if (className.indexOf('prettyprint') >= 0) {
- // If the classes includes a language extensions, use it.
- // Language extensions can be specified like
- // <pre class="prettyprint lang-cpp">
- // the language extension "cpp" is used to find a language handler as
- // passed to PR.registerLangHandler.
- // HTML5 recommends that a language be specified using "language-"
- // as the prefix instead. Google Code Prettify supports both.
- // http://dev.w3.org/html5/spec-author-view/the-code-element.html
- var langExtension = className.match(langExtensionRe);
- // Support <pre class="prettyprint"><code class="language-c">
- var wrapper;
- if (!langExtension && (wrapper = childContentWrapper(cs))
- && "CODE" === wrapper.tagName) {
- langExtension = wrapper.className.match(langExtensionRe);
- }
-
- if (langExtension) {
- langExtension = langExtension[1];
- }
-
- // make sure this is not nested in an already prettified element
- var nested = false;
- for (var p = cs.parentNode; p; p = p.parentNode) {
- if ((p.tagName === 'pre' || p.tagName === 'code' ||
- p.tagName === 'xmp') &&
- p.className && p.className.indexOf('prettyprint') >= 0) {
- nested = true;
- break;
- }
- }
- if (!nested) {
- // Look for a class like linenums or linenums:<n> where <n> is the
- // 1-indexed number of the first line.
- var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
- lineNums = lineNums
- ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
- : false;
- if (lineNums) { numberLines(cs, lineNums); }
-
- // do the pretty printing
- prettyPrintingJob = {
- langExtension: langExtension,
- sourceNode: cs,
- numberLines: lineNums
- };
- applyDecorator(prettyPrintingJob);
- }
- }
- }
- if (k < elements.length) {
- // finish up in a continuation
- setTimeout(doWork, 250);
- } else if (opt_whenDone) {
- opt_whenDone();
- }
- }
-
- doWork();
- }
-
- /**
- * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
- * {@code class=prettyprint} and prettify them.
- *
- * @param {Function?} opt_whenDone if specified, called when the last entry
- * has been finished.
- */
- window['prettyPrintOne'] = prettyPrintOne;
- /**
- * Pretty print a chunk of code.
- *
- * @param {string} sourceCodeHtml code as html
- * @return {string} code as html, but prettier
- */
- window['prettyPrint'] = prettyPrint;
- /**
- * Contains functions for creating and registering new language handlers.
- * @type {Object}
- */
- window['PR'] = {
- 'createSimpleLexer': createSimpleLexer,
- 'registerLangHandler': registerLangHandler,
- 'sourceDecorator': sourceDecorator,
- 'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
- 'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
- 'PR_COMMENT': PR_COMMENT,
- 'PR_DECLARATION': PR_DECLARATION,
- 'PR_KEYWORD': PR_KEYWORD,
- 'PR_LITERAL': PR_LITERAL,
- 'PR_NOCODE': PR_NOCODE,
- 'PR_PLAIN': PR_PLAIN,
- 'PR_PUNCTUATION': PR_PUNCTUATION,
- 'PR_SOURCE': PR_SOURCE,
- 'PR_STRING': PR_STRING,
- 'PR_TAG': PR_TAG,
- 'PR_TYPE': PR_TYPE
- };
-})();
diff --git a/styleguide/kss-assets/sample-inline.png b/styleguide/kss-assets/sample-inline.png
deleted file mode 100644
index 30494c6..0000000
Binary files a/styleguide/kss-assets/sample-inline.png and /dev/null differ
diff --git a/styleguide/kss-assets/sample-inline.svg b/styleguide/kss-assets/sample-inline.svg
deleted file mode 100644
index d581ae5..0000000
--- a/styleguide/kss-assets/sample-inline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
-<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>
-</svg>
diff --git a/styleguide/kss-assets/sample.png b/styleguide/kss-assets/sample.png
deleted file mode 100644
index 56a579d..0000000
Binary files a/styleguide/kss-assets/sample.png and /dev/null differ
diff --git a/styleguide/kss-assets/sample.svg b/styleguide/kss-assets/sample.svg
deleted file mode 100644
index 878030b..0000000
--- a/styleguide/kss-assets/sample.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
-<polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>
-</svg>
diff --git a/styleguide/kss-assets/scrollspy.js b/styleguide/kss-assets/scrollspy.js
deleted file mode 100644
index 0cff71f..0000000
--- a/styleguide/kss-assets/scrollspy.js
+++ /dev/null
@@ -1,147 +0,0 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-function ScrollSpy (wrapper, opt) {
-
- this.doc = document;
- this.wrapper = (typeof wrapper === 'string') ? this.doc.querySelector(wrapper) : wrapper;
- this.nav = this.wrapper.querySelectorAll(opt.nav);
-
- this.contents = [];
- this.win = window;
-
- this.winH = this.win.innerHeight;
-
- this.className = opt.className;
-
- this.callback = opt.callback;
-
- this.init();
-}
-
-ScrollSpy.prototype.init = function () {
- this.contents = this.getContents();
- this.attachEvent();
-};
-
-ScrollSpy.prototype.getContents = function () {
- var targetList = [];
-
- for (var i = 0, max = this.nav.length; i < max; i++) {
- var href = this.nav[i].href;
-
- targetList.push(this.doc.getElementById(href.split('#')[1]));
- }
-
- return targetList;
-};
-
-ScrollSpy.prototype.attachEvent = function () {
- this.win.addEventListener('load', (function () {
- this.spy(this.callback);
- }).bind(this));
-
-
- var scrollingTimer;
-
- this.win.addEventListener('scroll', (function () {
- if (scrollingTimer) {
- clearTimeout(scrollingTimer);
- }
-
- var _this = this;
-
- scrollingTimer = setTimeout(function () {
- _this.spy(_this.callback);
- }, 10);
- }).bind(this));
-
-
- var resizingTimer;
-
- this.win.addEventListener('resize', (function () {
- if (resizingTimer) {
- clearTimeout(resizingTimer);
- }
-
- var _this = this;
-
- resizingTimer = setTimeout(function () {
- _this.spy(_this.callback);
- }, 10);
- }).bind(this));
-};
-
-ScrollSpy.prototype.spy = function (cb) {
- var elems = this.getElemsViewState();
-
- this.markNav(elems);
-
- if (typeof cb === 'function') {
- cb(elems);
- }
-};
-
-ScrollSpy.prototype.getElemsViewState = function () {
- var elemsInView = [],
- elemsOutView = [],
- viewStatusList = [];
-
- for (var i = 0, max = this.contents.length; i < max; i++) {
- var currentContent = this.contents[i],
- isInView = this.isInView(currentContent);
-
- if (isInView) {
- elemsInView.push(currentContent);
- } else {
- elemsOutView.push(currentContent);
- }
- viewStatusList.push(isInView);
- }
-
- return {
- inView: elemsInView,
- outView: elemsOutView,
- viewStatusList: viewStatusList
- };
-};
-
-ScrollSpy.prototype.isInView = function (el) {
- var winH = this.winH,
- scrollTop = this.doc.documentElement.scrollTop || this.doc.body.scrollTop,
- scrollBottom = scrollTop + winH,
- rect = el.getBoundingClientRect(),
- elTop = rect.top + scrollTop,
- elBottom = elTop + el.offsetHeight;
-
- return (elTop < scrollBottom) && (elBottom > scrollTop);
-};
-
-ScrollSpy.prototype.markNav = function (elems) {
- var navItems = this.nav,
- isAlreadyMarked = false;
-
- for (var i = 0, max = navItems.length; i < max; i++) {
- if (elems.viewStatusList[i] && !isAlreadyMarked) {
- isAlreadyMarked = true;
- navItems[i].classList.add(this.className);
- } else {
- navItems[i].classList.remove(this.className);
- }
- }
-};
-
-
-module.exports = ScrollSpy;
-
-},{}],2:[function(require,module,exports){
-(function (global){
-/**
- * ScrollSpy
- *
- */
-
-var ScrollSpy = require('./modules/scrollspy');
-
-global.ScrollSpy = module.exports = ScrollSpy;
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./modules/scrollspy":1}]},{},[2]);
diff --git a/styleguide/section-base.html b/styleguide/section-base.html
deleted file mode 100644
index 071fd7d..0000000
--- a/styleguide/section-base.html
+++ /dev/null
@@ -1,3418 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
- <meta charset="utf-8">
- <title>Hugo Zen Style Guide</title>
-
- <meta name="description" content="">
- <meta name="generator" content="kss-node">
- <meta name="viewport" content="width=device-width">
-
- <link rel="stylesheet" href="kss-assets/kss.css">
- <link rel="stylesheet" href="../static/css/styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
-
-</head>
-<body id="kss-node" >
-
-<div class="kss-sidebar kss-style">
- <header class="kss-header">
- <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
- </header>
- <nav class="kss-nav">
- <ul class="kss-nav__menu">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="./">
- <span class="kss-nav__ref">0</span
- ><span class="kss-nav__name">Overview</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html">
- <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html">
- <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
- </a>
- <ul class="kss-nav__menu-child">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-headings">
- <span class="kss-nav__ref ">2.1</span
- ><span class="kss-nav__name">Headings</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-link">
- <span class="kss-nav__ref ">2.2</span
- ><span class="kss-nav__name">Links</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping">
- <span class="kss-nav__ref ">2.3</span
- ><span class="kss-nav__name">Grouping content</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-p">
- <span class="kss-nav__ref kss-nav__ref-child">2.3.1</span
- ><span class="kss-nav__name">Body copy</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-lists">
- <span class="kss-nav__ref kss-nav__ref-child">2.3.2</span
- ><span class="kss-nav__name">Lists</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-blockquote">
- <span class="kss-nav__ref kss-nav__ref-child">2.3.3</span
- ><span class="kss-nav__name">Block quotes</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-figure">
- <span class="kss-nav__ref kss-nav__ref-child">2.3.4</span
- ><span class="kss-nav__name">Figures</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-hr">
- <span class="kss-nav__ref kss-nav__ref-child">2.3.5</span
- ><span class="kss-nav__name">Horizontal rule</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-pre">
- <span class="kss-nav__ref kss-nav__ref-child">2.3.6</span
- ><span class="kss-nav__name">Preformatted text</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-table">
- <span class="kss-nav__ref ">2.4</span
- ><span class="kss-nav__name">Tables</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text">
- <span class="kss-nav__ref ">2.5</span
- ><span class="kss-nav__name">Text-level semantics</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-b">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.1</span
- ><span class="kss-nav__name">Bold</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-i">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.2</span
- ><span class="kss-nav__name">Italics</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-abbr">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.3</span
- ><span class="kss-nav__name">Abbreviation / Acroynym</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-cite">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.4</span
- ><span class="kss-nav__name">Cite</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-code">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.5</span
- ><span class="kss-nav__name">Code</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-del">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.6</span
- ><span class="kss-nav__name">Deleted text</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-dfn">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.7</span
- ><span class="kss-nav__name">Definition</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-ins">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.8</span
- ><span class="kss-nav__name">Inserted text</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-mark">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.9</span
- ><span class="kss-nav__name">Marked text</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-q">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.10</span
- ><span class="kss-nav__name">Quote</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-s">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.11</span
- ><span class="kss-nav__name">Strikethrough text</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-small">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.12</span
- ><span class="kss-nav__name">Small text</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-sub">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.13</span
- ><span class="kss-nav__name">Superscript / Subscript</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-u">
- <span class="kss-nav__ref kss-nav__ref-child">2.5.14</span
- ><span class="kss-nav__name">Underlined text</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-embedded">
- <span class="kss-nav__ref ">2.6</span
- ><span class="kss-nav__name">Embedded content</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-embedded-img">
- <span class="kss-nav__ref kss-nav__ref-child">2.6.1</span
- ><span class="kss-nav__name">Image</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html#kssref-base-embedded-svg">
- <span class="kss-nav__ref kss-nav__ref-child">2.6.2</span
- ><span class="kss-nav__name">Scalable vector</span>
- </a>
- </li>
- </ul>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html">
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
- </a>
- </li>
- </ul>
- </nav>
-</div>
-<article role="main" class="kss-main">
-
-
- <div id="kssref-base" class="kss-section kss-section--depth-1 ">
- <div class="kss-style">
- <h1 class="kss-title kss-title--level-1">
- <a class="kss-title__permalink" href="#kssref-base">
- <span class="kss-title__ref">
- 2
- <span class="kss-title__permalink-hash">
- base
- </span>
- </span>
- Defaults
- </a>
- </h1>
-
-
- <div class="kss-description">
- <p>These are the default base styles applied to HTML elements.</p>
-<p>Component classes can override these styles, but if no class applies a style
-to an HTML element, these styles will be the ones displayed.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 17
- </div>
- </div>
- <section id="kssref-base-headings" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-base-headings">
- <span class="kss-title__ref">
- 2.1
- <span class="kss-title__permalink-hash">
- base.headings
- </span>
- </span>
- Headings
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-headings" data-kss-fullscreen="kssref-base-headings">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-headings.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-headings" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-headings" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>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.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <h1 class="">Heading Level 1 (h1)</h1>
-<p>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.</p>
-<h2 class="">Heading Level 2 (h2)</h2>
-<p>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.</p>
-<h3 class="">Heading Level 3 (h3)</h3>
-<p>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.</p>
-<h4 class="">Heading Level 4 (h4)</h4>
-<p>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.</p>
-<h5 class="">Heading Level 5 (h5)</h5>
-<p>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.</p>
-<h6 class="">Heading Level 6 (h6)</h6>
-<p>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.</p>
-
-<h1 class="">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
-<p>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.</p>
-<h2 class="">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
-<p>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.</p>
-<h3 class="">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
-<p>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.</p>
-<h4 class="">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
-<p>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.</p>
-<h5 class="">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
-<p>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.</p>
-<h6 class="">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
-<p>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.</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/headings/headings-h.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><h1 class="{{modifier_class}}">Heading Level 1 (h1)</h1>
-<p>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.</p>
-<h2 class="{{modifier_class}}">Heading Level 2 (h2)</h2>
-<p>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.</p>
-<h3 class="{{modifier_class}}">Heading Level 3 (h3)</h3>
-<p>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.</p>
-<h4 class="{{modifier_class}}">Heading Level 4 (h4)</h4>
-<p>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.</p>
-<h5 class="{{modifier_class}}">Heading Level 5 (h5)</h5>
-<p>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.</p>
-<h6 class="{{modifier_class}}">Heading Level 6 (h6)</h6>
-<p>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.</p>
-
-<h1 class="{{modifier_class}}">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
-<p>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.</p>
-<h2 class="{{modifier_class}}">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
-<p>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.</p>
-<h3 class="{{modifier_class}}">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
-<p>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.</p>
-<h4 class="{{modifier_class}}">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
-<p>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.</p>
-<h5 class="{{modifier_class}}">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
-<p>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.</p>
-<h6 class="{{modifier_class}}">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
-<p>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.</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/headings/_headings.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-base-link" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-base-link">
- <span class="kss-title__ref">
- 2.2
- <span class="kss-title__permalink-hash">
- base.link
- </span>
- </span>
- Links
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-link" data-kss-fullscreen="kssref-base-link">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-link.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-link" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-link" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Hyperlinks are used to allow the user to navigate to other resources or to
-download a resource.</p>
-<p>The order of link states are based on Eric Meyer's article:
-<a href="http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states">http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states</a></p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- This is a <a href="#" class="">link to another web page</a>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- <div class="kss-modifier__name kss-style">
- :visited
- </div>
- <div class="kss-modifier__description kss-style">
- A link that has already been visited.
- </div>
- <div class="kss-modifier__example">
- This is a <a href="#" class="pseudo-class-visited">link to another web page</a>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- <div class="kss-modifier__name kss-style">
- :hover
- </div>
- <div class="kss-modifier__description kss-style">
- A link that is being hovered over.
- </div>
- <div class="kss-modifier__example">
- This is a <a href="#" class="pseudo-class-hover">link to another web page</a>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- <div class="kss-modifier__name kss-style">
- :focus
- </div>
- <div class="kss-modifier__description kss-style">
- A link that has been given keyboard focus.
- </div>
- <div class="kss-modifier__example">
- This is a <a href="#" class="pseudo-class-focus">link to another web page</a>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- <div class="kss-modifier__name kss-style">
- :active
- </div>
- <div class="kss-modifier__description kss-style">
- A link that is being actively clicked.
- </div>
- <div class="kss-modifier__example">
- This is a <a href="#" class="pseudo-class-active">link to another web page</a>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/links/links-a.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html">This is a <a href="#" class="{{modifier_class}}">link to another web page</a>.
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/links/_links.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-base-grouping" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-base-grouping">
- <span class="kss-title__ref">
- 2.3
- <span class="kss-title__permalink-hash">
- base.grouping
- </span>
- </span>
- Grouping content
- </a>
- </h2>
-
-
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 5
- </div>
- </section>
- <section id="kssref-base-grouping-p" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-grouping-p">
- <span class="kss-title__ref">
- 2.3.1
- <span class="kss-title__permalink-hash">
- base.grouping.p
- </span>
- </span>
- Body copy
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-p" data-kss-fullscreen="kssref-base-grouping-p">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-p.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-p" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-p" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The default <code>font-size</code> and <code>line-height</code> properties are applied to the
-<code><body></code> element and all paragraphs. In addition, <code><p></code> (paragraphs) receive
-a top and bottom margin.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p class="">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
-penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
-dolor id nibh ultricies vehicula.</p>
-
-<p class="">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>
-
-<p class="">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>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-p.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p class="{{modifier_class}}">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
-penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
-dolor id nibh ultricies vehicula.</p>
-
-<p class="{{modifier_class}}">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>
-
-<p class="{{modifier_class}}">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>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 146
- </div>
- </section>
- <section id="kssref-base-grouping-lists" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-grouping-lists">
- <span class="kss-title__ref">
- 2.3.2
- <span class="kss-title__permalink-hash">
- base.grouping.lists
- </span>
- </span>
- Lists
- </a>
- </h3>
-
-
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 32
- </div>
- </section>
- <section id="kssref-base-grouping-lists-ol" class="kss-section kss-section--depth-4 ">
- <div class="kss-style">
- <h4 class="kss-title kss-title--level-4">
- <a class="kss-title__permalink" href="#kssref-base-grouping-lists-ol">
- <span class="kss-title__ref">
- 2.3.2.1
- <span class="kss-title__permalink-hash">
- base.grouping.lists.ol
- </span>
- </span>
- Ordered list
- </a>
- </h4>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-lists-ol" data-kss-fullscreen="kssref-base-grouping-lists-ol">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-lists-ol.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-lists-ol" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-lists-ol" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><ol></code> element is a list of items in which the order <em>does</em>
-explicitly matter.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ol class="">
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ol class="">
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ol>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
-</ol>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-ol.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><ol class="{{modifier_class}}">
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ol class="{{modifier_class}}">
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ol>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
-</ol>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 47
- </div>
- </section>
- <section id="kssref-base-grouping-lists-ul" class="kss-section kss-section--depth-4 ">
- <div class="kss-style">
- <h4 class="kss-title kss-title--level-4">
- <a class="kss-title__permalink" href="#kssref-base-grouping-lists-ul">
- <span class="kss-title__ref">
- 2.3.2.2
- <span class="kss-title__permalink-hash">
- base.grouping.lists.ul
- </span>
- </span>
- Unordered list
- </a>
- </h4>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-lists-ul" data-kss-fullscreen="kssref-base-grouping-lists-ul">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-lists-ul.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-lists-ul" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-lists-ul" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><ul></code> element is a list of items in which the order does <em>not</em>
-explicitly matter.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="">
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul class="">
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
-</ul>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-ul.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><ul class="{{modifier_class}}">
- <li>Lorem ipsum dolor sit amet</li>
- <li>Consectetur adipiscing elit</li>
- <li>Integer molestie lorem at massa</li>
- <li>Facilisis in pretium nisl aliquet</li>
- <li>Nulla volutpat aliquam velit
- <ul class="{{modifier_class}}">
- <li>Phasellus iaculis neque</li>
- <li>Purus sodales ultricies</li>
- <li>Vestibulum laoreet porttitor sem</li>
- <li>Ac tristique libero volutpat at</li>
- </ul>
- </li>
- <li>Faucibus porta lacus fringilla vel</li>
- <li>Aenean sit amet erat nunc</li>
- <li>Eget porttitor lorem</li>
-</ul>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 38
- </div>
- </section>
- <section id="kssref-base-grouping-lists-dl" class="kss-section kss-section--depth-4 ">
- <div class="kss-style">
- <h4 class="kss-title kss-title--level-4">
- <a class="kss-title__permalink" href="#kssref-base-grouping-lists-dl">
- <span class="kss-title__ref">
- 2.3.2.3
- <span class="kss-title__permalink-hash">
- base.grouping.lists.dl
- </span>
- </span>
- Description list
- </a>
- </h4>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-lists-dl" data-kss-fullscreen="kssref-base-grouping-lists-dl">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-lists-dl.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-lists-dl" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-lists-dl" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><dl></code> element is a list of terms with their associated descriptions.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <dl class="">
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Euismod</dt>
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
- <dt>Malesuada porta</dt>
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-</dl>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-dl.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><dl class="{{modifier_class}}">
- <dt>Description lists</dt>
- <dd>A description list is perfect for defining terms.</dd>
- <dt>Euismod</dt>
- <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
- <dd>Donec id elit non mi porta gravida at eget metus.</dd>
- <dt>Malesuada porta</dt>
- <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-</dl>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 56
- </div>
- </section>
- <section id="kssref-base-grouping-blockquote" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-grouping-blockquote">
- <span class="kss-title__ref">
- 2.3.3
- <span class="kss-title__permalink-hash">
- base.grouping.blockquote
- </span>
- </span>
- Block quotes
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-blockquote" data-kss-fullscreen="kssref-base-grouping-blockquote">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-blockquote.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-blockquote" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-blockquote" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><blockquote></code> element is for quoting blocks of content from another
-source within your document. Wrap the <code><blockquote></code> around any <abbr
-title="HyperText Markup Language">HTML</abbr> as the quote. For straight
-quotes, we recommend a <code><p></code>.</p>
-<p>Optionally, add a <code><footer></code> to identify the source of the quote, wrapping
-the name of the source work in <code><cite></code>.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <blockquote class="">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
- erat a ante.</p>
-</blockquote>
-
-<blockquote class="">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
- erat a ante.</p>
- <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
- Title</cite></footer>
-</blockquote>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-blockquote.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><blockquote class="{{modifier_class}}">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
- erat a ante.</p>
-</blockquote>
-
-<blockquote class="{{modifier_class}}">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
- erat a ante.</p>
- <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
- Title</cite></footer>
-</blockquote>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 12
- </div>
- </section>
- <section id="kssref-base-grouping-figure" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-grouping-figure">
- <span class="kss-title__ref">
- 2.3.4
- <span class="kss-title__permalink-hash">
- base.grouping.figure
- </span>
- </span>
- Figures
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-figure" data-kss-fullscreen="kssref-base-grouping-figure">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-figure.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-figure" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-figure" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><figure></code> element can be used to annotate illustrations, diagrams,
-photos, code listings, etc.</p>
-<p>Optionally, a <code><figcaption></code> element inside the <code><figure></code> represents the
-caption of the figure.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <figure class="">
- An illustration, diagram, photo, code listing, etc.
-</figure>
-
-<figure class="">
- An illustration, diagram, photo, code listing, etc.
- <figcaption>Figure 1</figcaption>
-</figure>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-figure.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><figure class="{{modifier_class}}">
- An illustration, diagram, photo, code listing, etc.
-</figure>
-
-<figure class="{{modifier_class}}">
- An illustration, diagram, photo, code listing, etc.
- <figcaption>Figure 1</figcaption>
-</figure>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 106
- </div>
- </section>
- <section id="kssref-base-grouping-hr" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-grouping-hr">
- <span class="kss-title__ref">
- 2.3.5
- <span class="kss-title__permalink-hash">
- base.grouping.hr
- </span>
- </span>
- Horizontal rule
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-hr" data-kss-fullscreen="kssref-base-grouping-hr">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-hr.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-hr" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-hr" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><hr></code> element represents a paragraph-level thematic break, e.g. a scene
-change in a story, or a transition to another topic within a section of a
-reference book.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
-penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
-dolor id nibh ultricies vehicula.</p>
-
-<hr class="">
-
-<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
-ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-hr.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
-penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
-dolor id nibh ultricies vehicula.</p>
-
-<hr class="{{modifier_class}}">
-
-<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
-ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 127
- </div>
- </section>
- <section id="kssref-base-grouping-pre" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-grouping-pre">
- <span class="kss-title__ref">
- 2.3.6
- <span class="kss-title__permalink-hash">
- base.grouping.pre
- </span>
- </span>
- Preformatted text
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-grouping-pre" data-kss-fullscreen="kssref-base-grouping-pre">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-grouping-pre.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-pre" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-grouping-pre" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><pre></code> element represents a block of preformatted text, such as
-fragments of computer code, ASCII art, etc.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- The following text is preformatted:
-<pre class="">
-(ノ゜Д゜)ノ ︵ ┻━┻
-</pre>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/grouping/grouping-pre.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html">The following text is preformatted:
-<pre class="{{modifier_class}}">
-(ノ゜Д゜)ノ ︵ ┻━┻
-</pre>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/grouping/_grouping.scss</code>, line 164
- </div>
- </section>
- <section id="kssref-base-table" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-base-table">
- <span class="kss-title__ref">
- 2.4
- <span class="kss-title__permalink-hash">
- base.table
- </span>
- </span>
- Tables
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-table" data-kss-fullscreen="kssref-base-table">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-table.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-table" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-table" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><table></code> element displays tabular data in rows, columns, and cells.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <table class="">
- <caption>Optional table caption.</caption>
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Jane</td>
- <td>Doe</td>
- <td>jdoe</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Jamie</td>
- <td>Morgan</td>
- <td>jmorgan</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Jacob</td>
- <td>Smith</td>
- <td>jsmith</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </tfoot>
-</table>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/tables/tables-table.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><table class="{{modifier_class}}">
- <caption>Optional table caption.</caption>
- <thead>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>1</td>
- <td>Jane</td>
- <td>Doe</td>
- <td>jdoe</td>
- </tr>
- <tr>
- <td>2</td>
- <td>Jamie</td>
- <td>Morgan</td>
- <td>jmorgan</td>
- </tr>
- <tr>
- <td>3</td>
- <td>Jacob</td>
- <td>Smith</td>
- <td>jsmith</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <th>#</th>
- <th>First Name</th>
- <th>Last Name</th>
- <th>Username</th>
- </tr>
- </tfoot>
-</table>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/tables/_tables.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-base-text" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-base-text">
- <span class="kss-title__ref">
- 2.5
- <span class="kss-title__permalink-hash">
- base.text
- </span>
- </span>
- Text-level semantics
- </a>
- </h2>
-
-
- <div class="kss-description">
- <p>The elements in this section give semantics to inline text.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-base-text-b" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-b">
- <span class="kss-title__ref">
- 2.5.1
- <span class="kss-title__permalink-hash">
- base.text.b
- </span>
- </span>
- Bold
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-b" data-kss-fullscreen="kssref-base-text-b">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-b.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-b" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-b" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><strong></code> element or the <code><b></code> element is for emphasizing a snippet of
-text with a heavier font-weight.</p>
-<p>Feel free to use <code><b></code> in HTML5. <code><b></code> is meant to highlight words or phrases
-without conveying additional importance.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- The following snippets of text are <strong class="">rendered</strong> as <b class="">bold
-text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
-<strong>bold</strong></em>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-b.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are <strong class="{{modifier_class}}">rendered</strong> as <b class="{{modifier_class}}">bold
-text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
-<strong>bold</strong></em>.
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 33
- </div>
- </section>
- <section id="kssref-base-text-i" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-i">
- <span class="kss-title__ref">
- 2.5.2
- <span class="kss-title__permalink-hash">
- base.text.i
- </span>
- </span>
- Italics
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-i" data-kss-fullscreen="kssref-base-text-i">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-i.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-i" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-i" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><em></code> element or the <code><i></code> element is used for emphasizing a snippet of
-text with italics.</p>
-<p>Feel free to use <code><i></code> element in HTML5. <code><i></code> is meant to convey voice,
-technical terms, etc.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- The following snippets of text are <em class="">rendered</em> as <i class="">italic text</i>.
-Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
-<em>italic</em></strong>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-i.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are <em class="{{modifier_class}}">rendered</em> as <i class="{{modifier_class}}">italic text</i>.
-Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
-<em>italic</em></strong>.
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 122
- </div>
- </section>
- <section id="kssref-base-text-abbr" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-abbr">
- <span class="kss-title__ref">
- 2.5.3
- <span class="kss-title__permalink-hash">
- base.text.abbr
- </span>
- </span>
- Abbreviation / Acroynym
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-abbr" data-kss-fullscreen="kssref-base-text-abbr">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-abbr.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-abbr" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-abbr" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><abbr></code> element makes the meanings of abbreviations and acronyms visible
-on hover.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- An abbreviation of the word attribute is <abbr class="" title="attribute">attr</abbr>.
-And <abbr class="" title="HyperText Markup Language">HTML</abbr> is an acroynm.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-abbr.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html">An abbreviation of the word attribute is <abbr class="{{modifier_class}}" title="attribute">attr</abbr>.
-And <abbr class="{{modifier_class}}" title="HyperText Markup Language">HTML</abbr> is an acroynm.
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 9
- </div>
- </section>
- <section id="kssref-base-text-cite" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-cite">
- <span class="kss-title__ref">
- 2.5.4
- <span class="kss-title__permalink-hash">
- base.text.cite
- </span>
- </span>
- Cite
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-cite" data-kss-fullscreen="kssref-base-text-cite">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-cite.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-cite" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-cite" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><cite></code> element represents a reference to a creative work.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p>Who is your favorite doctor (in <cite class="">Doctor Who</cite>)?</p>
-
-<p>Comment by <cite class=""><a href="#">Oli Walberg</a></cite></p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-cite.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p>Who is your favorite doctor (in <cite class="{{modifier_class}}">Doctor Who</cite>)?</p>
-
-<p>Comment by <cite class="{{modifier_class}}"><a href="#">Oli Walberg</a></cite></p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 62
- </div>
- </section>
- <section id="kssref-base-text-code" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-code">
- <span class="kss-title__ref">
- 2.5.5
- <span class="kss-title__permalink-hash">
- base.text.code
- </span>
- </span>
- Code
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-code" data-kss-fullscreen="kssref-base-text-code">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-code.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-code" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-code" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><code></code> element represents a fragment of computer code. The <code><var></code>
-element represents a variable. The <code><samp></code> element represents (sample)
-output from a program or computing system. The <code><kbd></code> element represents
-user input (typically keyboard input.)</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p>The <code class="">code</code> element represents a fragment of computer code.</p>
-
-<p>There are <var class="">n</var> flavors of ice cream to be available for purchase!</p>
-
-<p>The computer said <samp class="">Too much cheese in tray two</samp> but I didn't know
-what that meant.</p>
-
-<p>To make George eat an apple, select <kbd class="">File | Eat Apple…</kbd></p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-code.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p>The <code class="{{modifier_class}}">code</code> element represents a fragment of computer code.</p>
-
-<p>There are <var class="{{modifier_class}}">n</var> flavors of ice cream to be available for purchase!</p>
-
-<p>The computer said <samp class="{{modifier_class}}">Too much cheese in tray two</samp> but I didn't know
-what that meant.</p>
-
-<p>To make George eat an apple, select <kbd class="{{modifier_class}}">File | Eat Apple…</kbd></p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 74
- </div>
- </section>
- <section id="kssref-base-text-del" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-del">
- <span class="kss-title__ref">
- 2.5.6
- <span class="kss-title__permalink-hash">
- base.text.del
- </span>
- </span>
- Deleted text
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-del" data-kss-fullscreen="kssref-base-text-del">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-del.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-del" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-del" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><del></code> element indicates blocks of text that have been deleted.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <del class="">This line of text is meant to be treated as deleted text.</del>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-del.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><del class="{{modifier_class}}">This line of text is meant to be treated as deleted text.</del>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 97
- </div>
- </section>
- <section id="kssref-base-text-dfn" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-dfn">
- <span class="kss-title__ref">
- 2.5.7
- <span class="kss-title__permalink-hash">
- base.text.dfn
- </span>
- </span>
- Definition
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-dfn" data-kss-fullscreen="kssref-base-text-dfn">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-dfn.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-dfn" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-dfn" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><dfn></code> element represents the defining instance of a term.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p>The <dfn class="" id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
-device that allows off-world teams to open the iris.</p>
-
-<p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a>
-and so Hammond ordered the iris to be opened.</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-dfn.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p>The <dfn class="{{modifier_class}}" id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
-device that allows off-world teams to open the iris.</p>
-
-<p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a>
-and so Hammond ordered the iris to be opened.</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 109
- </div>
- </section>
- <section id="kssref-base-text-ins" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-ins">
- <span class="kss-title__ref">
- 2.5.8
- <span class="kss-title__permalink-hash">
- base.text.ins
- </span>
- </span>
- Inserted text
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-ins" data-kss-fullscreen="kssref-base-text-ins">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-ins.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-ins" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-ins" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><ins></code> element indicates additions to the document.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ins class="">This line of text is meant to be treated as an addition to the
-document.</ins>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-ins.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><ins class="{{modifier_class}}">This line of text is meant to be treated as an addition to the
-document.</ins>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 141
- </div>
- </section>
- <section id="kssref-base-text-mark" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-mark">
- <span class="kss-title__ref">
- 2.5.9
- <span class="kss-title__permalink-hash">
- base.text.mark
- </span>
- </span>
- Marked text
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-mark" data-kss-fullscreen="kssref-base-text-mark">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-mark.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-mark" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-mark" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><mark></code> element highlights a run of text due to its relevance in another
-context.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- You can use the mark tag to <mark>highlight</mark> text like this.
-<mark class="">New!</mark>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-mark.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html">You can use the mark tag to <mark>highlight</mark> text like this.
-<mark class="{{modifier_class}}">New!</mark>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 153
- </div>
- </section>
- <section id="kssref-base-text-q" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-q">
- <span class="kss-title__ref">
- 2.5.10
- <span class="kss-title__permalink-hash">
- base.text.q
- </span>
- </span>
- Quote
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-q" data-kss-fullscreen="kssref-base-text-q">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-q.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-q" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-q" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><q></code> element represents an inline quote from another source. Longer
-quotes should use the <code><blockquote></code> element.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <q class="" cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
-<code>q</code> element represents some phrasing content quoted from another
-source.</q>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-q.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><q class="{{modifier_class}}" cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
-<code>q</code> element represents some phrasing content quoted from another
-source.</q>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 168
- </div>
- </section>
- <section id="kssref-base-text-s" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-s">
- <span class="kss-title__ref">
- 2.5.11
- <span class="kss-title__permalink-hash">
- base.text.s
- </span>
- </span>
- Strikethrough text
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-s" data-kss-fullscreen="kssref-base-text-s">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-s.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-s" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-s" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><s></code> element indicates blocks of text that are no longer relevant.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <s class="">This line of text is meant to be treated as no longer accurate.</s>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-s.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><s class="{{modifier_class}}">This line of text is meant to be treated as no longer accurate.</s>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 181
- </div>
- </section>
- <section id="kssref-base-text-small" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-small">
- <span class="kss-title__ref">
- 2.5.12
- <span class="kss-title__permalink-hash">
- base.text.small
- </span>
- </span>
- Small text
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-small" data-kss-fullscreen="kssref-base-text-small">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-small.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-small" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-small" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>For de-emphasizing inline or blocks of text, use the <code><small></code> element to set
-text at 80% the size of the parent.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <small class="">This line of text is meant to be treated as fine print.</small>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-small.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><small class="{{modifier_class}}">This line of text is meant to be treated as fine print.</small>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 193
- </div>
- </section>
- <section id="kssref-base-text-sub" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-sub">
- <span class="kss-title__ref">
- 2.5.13
- <span class="kss-title__permalink-hash">
- base.text.sub
- </span>
- </span>
- Superscript / Subscript
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-sub" data-kss-fullscreen="kssref-base-text-sub">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-sub.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-sub" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-sub" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><sup></code> element represents a superscript and the <code><sub></code> element
-represents a subscript.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <abbr>M<sup class="">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="">4</sub>x<sup class="">n</sup></code>.
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-sub.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><abbr>M<sup class="{{modifier_class}}">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="{{modifier_class}}">4</sub>x<sup class="{{modifier_class}}">n</sup></code>.
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 207
- </div>
- </section>
- <section id="kssref-base-text-u" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-text-u">
- <span class="kss-title__ref">
- 2.5.14
- <span class="kss-title__permalink-hash">
- base.text.u
- </span>
- </span>
- Underlined text
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-text-u" data-kss-fullscreen="kssref-base-text-u">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-text-u.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-text-u" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-text-u" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>To underline text use the <code><u></code> element. Not recommended since underlines are
-used by web browsers to style hyperlinks.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <u class="">This line of text will render as underlined</u>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/text/text-u.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><u class="{{modifier_class}}">This line of text will render as underlined</u>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/text/_text.scss</code>, line 234
- </div>
- </section>
- <section id="kssref-base-embedded" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-base-embedded">
- <span class="kss-title__ref">
- 2.6
- <span class="kss-title__permalink-hash">
- base.embedded
- </span>
- </span>
- Embedded content
- </a>
- </h2>
-
-
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>base/embedded/_embedded.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-base-embedded-img" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-embedded-img">
- <span class="kss-title__ref">
- 2.6.1
- <span class="kss-title__permalink-hash">
- base.embedded.img
- </span>
- </span>
- Image
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-embedded-img" data-kss-fullscreen="kssref-base-embedded-img">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-embedded-img.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-embedded-img" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-embedded-img" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>An <code><img></code> element represents an image.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p>An image <img class="" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
-
-<figure style="width: 50%; max-width: 300px;">
- <figcaption>An image inside a figure.</figcaption>
- <img class="" src="kss-assets/sample.png">
-</figure>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/embedded/embedded-img.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p>An image <img class="{{modifier_class}}" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
-
-<figure style="width: 50%; max-width: 300px;">
- <figcaption>An image inside a figure.</figcaption>
- <img class="{{modifier_class}}" src="kss-assets/sample.png">
-</figure>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/embedded/_embedded.scss</code>, line 7
- </div>
- </section>
- <section id="kssref-base-embedded-svg" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-base-embedded-svg">
- <span class="kss-title__ref">
- 2.6.2
- <span class="kss-title__permalink-hash">
- base.embedded.svg
- </span>
- </span>
- Scalable vector
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-base-embedded-svg" data-kss-fullscreen="kssref-base-embedded-svg">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-base-embedded-svg.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-base-embedded-svg" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-base-embedded-svg" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>A <code><svg></code> element represents an image encoded as a Scalable Vector Graphic.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p>A svg image <svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>
-
-<figure style="width: 50%; max-width: 300px;">
- <figcaption>A svg inside a figure.</figcaption>
- <svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
- <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>
- </svg>
-</figure>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/embedded/embedded-svg.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p>A svg image <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>
-
-<figure style="width: 50%; max-width: 300px;">
- <figcaption>A svg inside a figure.</figcaption>
- <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
- <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>
- </svg>
-</figure>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/embedded/_embedded.scss</code>, line 30
- </div>
- </section>
- </article>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
- prettyPrint();
- var spy = new ScrollSpy('#kss-node', {
- nav: '.kss-nav__menu-child > li > a',
- className: 'is-in-viewport'
- });
- var kssFullScreen = new KssFullScreen({
- idPrefix: 'kss-fullscreen-',
- bodyClass: 'kss-fullscreen-mode',
- elementClass: 'is-fullscreen'
- });
- var kssGuides = new KssGuides({
- bodyClass: 'kss-guides-mode'
- });
- var kssMarkup = new KssMarkup({
- bodyClass: 'kss-markup-mode',
- detailsClass: 'kss-markup'
- });
-</script>
-
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/styleguide/section-components.html b/styleguide/section-components.html
deleted file mode 100644
index 228ca91..0000000
--- a/styleguide/section-components.html
+++ /dev/null
@@ -1,1689 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
- <meta charset="utf-8">
- <title>Hugo Zen Style Guide</title>
-
- <meta name="description" content="">
- <meta name="generator" content="kss-node">
- <meta name="viewport" content="width=device-width">
-
- <link rel="stylesheet" href="kss-assets/kss.css">
- <link rel="stylesheet" href="../static/css/styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
-
-</head>
-<body id="kss-node" >
-
-<div class="kss-sidebar kss-style">
- <header class="kss-header">
- <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
- </header>
- <nav class="kss-nav">
- <ul class="kss-nav__menu">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="./">
- <span class="kss-nav__ref">0</span
- ><span class="kss-nav__name">Overview</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html">
- <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html">
- <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
- </a>
- <ul class="kss-nav__menu-child">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-box">
- <span class="kss-nav__ref ">5.1</span
- ><span class="kss-nav__name">Box</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-clearfix">
- <span class="kss-nav__ref ">5.2</span
- ><span class="kss-nav__name">Clearfix</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-divider">
- <span class="kss-nav__ref ">5.3</span
- ><span class="kss-nav__name">Divider</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-header">
- <span class="kss-nav__ref ">5.4</span
- ><span class="kss-nav__name">Branding header</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-hidden">
- <span class="kss-nav__ref ">5.5</span
- ><span class="kss-nav__name">Hidden</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-highlight-mark">
- <span class="kss-nav__ref ">5.6</span
- ><span class="kss-nav__name">Highlight mark</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-links">
- <span class="kss-nav__ref ">5.7</span
- ><span class="kss-nav__name">Inline links</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-inline-sibling">
- <span class="kss-nav__ref ">5.8</span
- ><span class="kss-nav__name">Inline sibling</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-print-none">
- <span class="kss-nav__ref ">5.9</span
- ><span class="kss-nav__name">Do not print</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-responsive-video">
- <span class="kss-nav__ref ">5.10</span
- ><span class="kss-nav__name">Responsive video</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-visually-hidden">
- <span class="kss-nav__ref ">5.11</span
- ><span class="kss-nav__name">Visually hidden</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-watermark">
- <span class="kss-nav__ref ">5.12</span
- ><span class="kss-nav__name">Watermark</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html#kssref-components-wireframe">
- <span class="kss-nav__ref ">5.13</span
- ><span class="kss-nav__name">Wireframe</span>
- </a>
- </li>
- </ul>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html">
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
- </a>
- </li>
- </ul>
- </nav>
-</div>
-<article role="main" class="kss-main">
-
-
- <div id="kssref-components" class="kss-section kss-section--depth-1 ">
- <div class="kss-style">
- <h1 class="kss-title kss-title--level-1">
- <a class="kss-title__permalink" href="#kssref-components">
- <span class="kss-title__ref">
- 5
- <span class="kss-title__permalink-hash">
- components
- </span>
- </span>
- Components
- </a>
- </h1>
-
-
- <div class="kss-description">
- <p>Design components are reusable designs that can be applied using just the CSS
-class names specified in the component.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 41
- </div>
- </div>
- <section id="kssref-components-box" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-box">
- <span class="kss-title__ref">
- 5.1
- <span class="kss-title__permalink-hash">
- components.box
- </span>
- </span>
- Box
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-box" data-kss-fullscreen="kssref-components-box">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-box.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-box" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-box" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>A simple box style.</p>
-<p>A Drupal block is often styled as a box. However, this design component is
-not applied to any blocks by default; it is used as an example of how to
-build and document a CSS component.</p>
-<p>"box" is the name of our component, so we define a <code>.box</code> class that we can
-apply to any HTML element that needs the box styling. We also provide a
-<code>%box</code> placeholder selector so that we can easily extend the basic box
-component with <code>@extend %box;</code>.</p>
-<p>Take a look at the source code for this component for more information about
-building a good component.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <div class="box ">
- <h2 class="box__title">Box title</h2>
- <div class="box__content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </div>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- <div class="kss-modifier__name kss-style">
- :hover
- </div>
- <div class="kss-modifier__description kss-style">
- The hover/focus styling.
- </div>
- <div class="kss-modifier__example">
- <div class="box pseudo-class-hover">
- <h2 class="box__title">Box title</h2>
- <div class="box__content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </div>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- <div class="kss-modifier__name kss-style">
- .box--highlight
- </div>
- <div class="kss-modifier__description kss-style">
- The "highlight" box variant.
- </div>
- <div class="kss-modifier__example">
- <div class="box box--highlight">
- <h2 class="box__title">Box title</h2>
- <div class="box__content">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </div>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/box/box.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="box {{modifier_class}}">
- <h2 class="box__title">{{title}}</h2>
- <div class="box__content">
- {{content}}
- </div>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/box/_box.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-clearfix" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-clearfix">
- <span class="kss-title__ref">
- 5.2
- <span class="kss-title__permalink-hash">
- components.clearfix
- </span>
- </span>
- Clearfix
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-clearfix" data-kss-fullscreen="kssref-components-clearfix">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-clearfix.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-clearfix" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-clearfix" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Allows the bottom of an element to extend to the bottom of all floated child
-elements. See <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="clearfix">
- <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/clearfix/clearfix.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="clearfix">
- <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/clearfix/_clearfix.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-divider" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-divider">
- <span class="kss-title__ref">
- 5.3
- <span class="kss-title__permalink-hash">
- components.divider
- </span>
- </span>
- Divider
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-divider" data-kss-fullscreen="kssref-components-divider">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-divider.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-divider" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-divider" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Can be used as an <code><hr></code>, an empty <code><div></code> or as a container.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="divider "></div>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-
-<div class="divider ">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-</div>
-
-<hr class="divider ">
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/divider/divider.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="divider {{modifier_class}}"></div>
-
-<p>{{content}}</p>
-
-<div class="divider {{modifier_class}}">
- <p>{{content}}</p>
-</div>
-
-<hr class="divider {{modifier_class}}">
-
-<p>{{content}}</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/divider/_divider.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-header" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-header">
- <span class="kss-title__ref">
- 5.4
- <span class="kss-title__permalink-hash">
- components.header
- </span>
- </span>
- Branding header
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-header" data-kss-fullscreen="kssref-components-header">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-header.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-header" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-header" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <header class="header " role="banner">
- <a href="/" title="Home" rel="home" class="header__logo">
- <img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
- </a>
-
- <div class="header__name-and-slogan">
- <h1 class="header__site-name">
- <a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
- </h1>
- <div class="header__site-slogan">Slogan</div>
- </div>
-
- <nav class="header__secondary-menu" role="navigation">
- <h2 class="visually-hidden">User menu</h2>
- <ul class="links inline clearfix">
- <li class="menu-2 first"><a href="/user">My account</a></li>
- <li class="menu-15 last"><a href="/user/logout">Log out</a></li>
- </ul>
- </nav>
-
- <div class="header__region">
- [Header region]
- </div>
-</header>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/header/header.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><header class="header {{modifier_class}}" role="banner">
- <a href="/" title="Home" rel="home" class="header__logo">
- <img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
- </a>
-
- <div class="header__name-and-slogan">
- <h1 class="header__site-name">
- <a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
- </h1>
- <div class="header__site-slogan">Slogan</div>
- </div>
-
- <nav class="header__secondary-menu" role="navigation">
- <h2 class="visually-hidden">User menu</h2>
- <ul class="links inline clearfix">
- <li class="menu-2 first"><a href="/user">My account</a></li>
- <li class="menu-15 last"><a href="/user/logout">Log out</a></li>
- </ul>
- </nav>
-
- <div class="header__region">
- [Header region]
- </div>
-</header>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/header/_header.scss</code>, line 5
- </div>
- </section>
- <section id="kssref-components-hidden" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-hidden">
- <span class="kss-title__ref">
- 5.5
- <span class="kss-title__permalink-hash">
- components.hidden
- </span>
- </span>
- Hidden
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-hidden" data-kss-fullscreen="kssref-components-hidden">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-hidden.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-hidden" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-hidden" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Hide elements from all users. Compare to the visually-hidden component.</p>
-<p>Used for elements which should not be immediately displayed to any user. An
-example would be a collapsible fieldset that will be expanded with a click
-from a user.</p>
-<p>For anything you want to hide on page load when JavaScript is enabled, use
-the <code>.js-hidden</code> class.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="hidden ">
- This content is hidden.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/hidden/hidden.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="hidden {{modifier_class}}">
- This content is hidden.
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/hidden/_hidden.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-highlight-mark" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-highlight-mark">
- <span class="kss-title__ref">
- 5.6
- <span class="kss-title__permalink-hash">
- components.highlight-mark
- </span>
- </span>
- Highlight mark
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-highlight-mark" data-kss-fullscreen="kssref-components-highlight-mark">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-highlight-mark.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-highlight-mark" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-highlight-mark" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The "new" or "updated" marker. This is a very thin component. A front-end
-developer may choose to delete this component and just style the <code><mark></code>
-element directly.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <mark class="highlight-mark">New</mark>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/highlight-mark/highlight-mark.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><mark class="highlight-mark">New</mark>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/highlight-mark/_highlight-mark.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-inline-links" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-inline-links">
- <span class="kss-title__ref">
- 5.7
- <span class="kss-title__permalink-hash">
- components.inline-links
- </span>
- </span>
- Inline links
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-inline-links" data-kss-fullscreen="kssref-components-inline-links">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-inline-links.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-inline-links" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-inline-links" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>A list of links that are inline with each other.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="inline-links ">
- <li class="inline-links__item"><a href="#">Read more</a></li>
- <li class="inline-links__item"><a href="#">Comment</a></li>
-</ul>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/inline-links/inline-links.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><ul class="inline-links {{modifier_class}}">
- <li class="inline-links__item"><a href="#">Read more</a></li>
- <li class="inline-links__item"><a href="#">Comment</a></li>
-</ul>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/inline-links/_inline-links.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-inline-sibling" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-inline-sibling">
- <span class="kss-title__ref">
- 5.8
- <span class="kss-title__permalink-hash">
- components.inline-sibling
- </span>
- </span>
- Inline sibling
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-inline-sibling" data-kss-fullscreen="kssref-components-inline-sibling">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-inline-sibling.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-inline-sibling" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-inline-sibling" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>An element that needs to appear inline with the content that follows.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <h4 class="inline-sibling ">A Heading</h4>
-<p>A normal paragraph. 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.</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/inline-sibling/inline-sibling.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><h4 class="inline-sibling {{modifier_class}}">A Heading</h4>
-<p>A normal paragraph. 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.</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/inline-sibling/_inline-sibling.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-print-none" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-print-none">
- <span class="kss-title__ref">
- 5.9
- <span class="kss-title__permalink-hash">
- components.print-none
- </span>
- </span>
- Do not print
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-print-none" data-kss-fullscreen="kssref-components-print-none">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-print-none.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-print-none" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-print-none" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Removes an element from the print version of the web site.</p>
-<p>By importing these CSS rules in a file marked as media "all", we allow these
-print rules to be aggregated with other stylesheets, for improved front-end
-performance.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <p class="print-none">
- This item will not be printed.
-</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/print-none/print-none.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p class="print-none">
- This item will not be printed.
-</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/print-none/_print-none.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-responsive-video" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-responsive-video">
- <span class="kss-title__ref">
- 5.10
- <span class="kss-title__permalink-hash">
- components.responsive-video
- </span>
- </span>
- Responsive video
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-responsive-video" data-kss-fullscreen="kssref-components-responsive-video">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-responsive-video.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-responsive-video" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-responsive-video" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Using a wrapper div, embedded videos can be made responsive so that their
-intrinsic aspect ratio is preserved at any screen width. The
-<code>responsive-video__embed</code> class is optional if the embed is an <code>iframe</code>.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <div class="responsive-video ">
- <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- <div class="kss-modifier__name kss-style">
- .responsive-video--4-3
- </div>
- <div class="kss-modifier__description kss-style">
- A video with a 4:3 aspect ratio instead of the default 16:9 one.
- </div>
- <div class="kss-modifier__example">
- <div class="responsive-video responsive-video--4-3">
- <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/responsive-video/responsive-video.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="responsive-video {{modifier_class}}">
- <iframe class="responsive-video__embed" width="560" height="315" src="https://www.youtube.com/embed/8N_tupPBtWQ" frameborder="0" allowfullscreen></iframe>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/responsive-video/_responsive-video.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-visually-hidden" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-visually-hidden">
- <span class="kss-title__ref">
- 5.11
- <span class="kss-title__permalink-hash">
- components.visually-hidden
- </span>
- </span>
- Visually hidden
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-visually-hidden" data-kss-fullscreen="kssref-components-visually-hidden">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-visually-hidden.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-visually-hidden" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-visually-hidden" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Make an element visually hidden, but accessible to screen readers, etc.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <div class="visually-hidden ">
- This text will be read by screen readers, but will be visually hidden.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- <div class="kss-modifier__name kss-style">
- .visually-hidden--off
- </div>
- <div class="kss-modifier__description kss-style">
- Turns off the visually-hidden effect.
- </div>
- <div class="kss-modifier__example">
- <div class="visually-hidden visually-hidden--off">
- This text will be read by screen readers, but will be visually hidden.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- <div class="kss-modifier__name kss-style">
- .visually-hidden--focusable
- </div>
- <div class="kss-modifier__description kss-style">
- Makes an element visually hidden by default, but visible when receiving focus.
- </div>
- <div class="kss-modifier__example">
- <div class="visually-hidden visually-hidden--focusable">
- This text will be read by screen readers, but will be visually hidden.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- <div class="kss-modifier__name kss-style">
- .visually-hidden--focusable:focus
- </div>
- <div class="kss-modifier__description kss-style">
- A focused, and visible, element.
- </div>
- <div class="kss-modifier__example">
- <div class="visually-hidden visually-hidden--focusable pseudo-class-focus">
- This text will be read by screen readers, but will be visually hidden.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/visually-hidden/visually-hidden.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="visually-hidden {{modifier_class}}">
- {{content}}
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/visually-hidden/_visually-hidden.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-watermark" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-watermark">
- <span class="kss-title__ref">
- 5.12
- <span class="kss-title__permalink-hash">
- components.watermark
- </span>
- </span>
- Watermark
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-watermark" data-kss-fullscreen="kssref-components-watermark">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-watermark.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-watermark" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-watermark" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Make the element appear beneath sibling elements, like a watermark.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div>
- <mark class="watermark ">Unpublished</mark>
-
- <div>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.</div>
- </div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/watermark/watermark.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div>
- <mark class="watermark {{modifier_class}}">{{content}}</mark>
-
- {% if sibling %}
- <div>{{ sibling }}</div>
- {% endif %}
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/watermark/_watermark.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-components-wireframe" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-components-wireframe">
- <span class="kss-title__ref">
- 5.13
- <span class="kss-title__permalink-hash">
- components.wireframe
- </span>
- </span>
- Wireframe
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-components-wireframe" data-kss-fullscreen="kssref-components-wireframe">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-components-wireframe.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-components-wireframe" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-components-wireframe" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Add wireframes around main layout elements. <a href="http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain">Wireframes</a>
-are useful when prototyping a website.</p>
-<p>This design is not applied to the site unless you set the following Sass
-variable: <code>$with-wireframes: true;</code></p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="wireframe">
- An item inside a wireframe.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/wireframe/wireframe.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="wireframe">
- {{content}}
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/wireframe/_wireframe.scss</code>, line 3
- </div>
- </section>
- </article>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
- prettyPrint();
- var spy = new ScrollSpy('#kss-node', {
- nav: '.kss-nav__menu-child > li > a',
- className: 'is-in-viewport'
- });
- var kssFullScreen = new KssFullScreen({
- idPrefix: 'kss-fullscreen-',
- bodyClass: 'kss-fullscreen-mode',
- elementClass: 'is-fullscreen'
- });
- var kssGuides = new KssGuides({
- bodyClass: 'kss-guides-mode'
- });
- var kssMarkup = new KssMarkup({
- bodyClass: 'kss-markup-mode',
- detailsClass: 'kss-markup'
- });
-</script>
-
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/styleguide/section-forms.html b/styleguide/section-forms.html
deleted file mode 100644
index d403fce..0000000
--- a/styleguide/section-forms.html
+++ /dev/null
@@ -1,1492 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
- <meta charset="utf-8">
- <title>Hugo Zen Style Guide</title>
-
- <meta name="description" content="">
- <meta name="generator" content="kss-node">
- <meta name="viewport" content="width=device-width">
-
- <link rel="stylesheet" href="kss-assets/kss.css">
- <link rel="stylesheet" href="../static/css/styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
-
-</head>
-<body id="kss-node" >
-
-<div class="kss-sidebar kss-style">
- <header class="kss-header">
- <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
- </header>
- <nav class="kss-nav">
- <ul class="kss-nav__menu">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="./">
- <span class="kss-nav__ref">0</span
- ><span class="kss-nav__name">Overview</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html">
- <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html">
- <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
- </a>
- <ul class="kss-nav__menu-child">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base">
- <span class="kss-nav__ref ">3.1</span
- ><span class="kss-nav__name">Form defaults</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-fieldset">
- <span class="kss-nav__ref kss-nav__ref-child">3.1.1</span
- ><span class="kss-nav__name">Fieldsets</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input">
- <span class="kss-nav__ref kss-nav__ref-child">3.1.2</span
- ><span class="kss-nav__name">Inputs</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-checkbox">
- <span class="kss-nav__ref kss-nav__ref-child">3.1.3</span
- ><span class="kss-nav__name">Checkboxes</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-input-radio">
- <span class="kss-nav__ref kss-nav__ref-child">3.1.4</span
- ><span class="kss-nav__name">Radio buttons</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-label">
- <span class="kss-nav__ref kss-nav__ref-child">3.1.5</span
- ><span class="kss-nav__name">Labels</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-select">
- <span class="kss-nav__ref kss-nav__ref-child">3.1.6</span
- ><span class="kss-nav__name">Select list</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-base-textarea">
- <span class="kss-nav__ref kss-nav__ref-child">3.1.7</span
- ><span class="kss-nav__name">Text areas</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html#kssref-forms-button">
- <span class="kss-nav__ref ">3.2</span
- ><span class="kss-nav__name">Button</span>
- </a>
- </li>
- </ul>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html">
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
- </a>
- </li>
- </ul>
- </nav>
-</div>
-<article role="main" class="kss-main">
-
-
- <div id="kssref-forms" class="kss-section kss-section--depth-1 ">
- <div class="kss-style">
- <h1 class="kss-title kss-title--level-1">
- <a class="kss-title__permalink" href="#kssref-forms">
- <span class="kss-title__ref">
- 3
- <span class="kss-title__permalink-hash">
- forms
- </span>
- </span>
- forms
- </a>
- </h1>
-
-
-
- </div>
-
-
- </div>
- <section id="kssref-forms-base" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-forms-base">
- <span class="kss-title__ref">
- 3.1
- <span class="kss-title__permalink-hash">
- forms.base
- </span>
- </span>
- Form defaults
- </a>
- </h2>
-
-
- <div class="kss-description">
- <p>These are the default base styles applied to HTML form elements.</p>
-<p>Component classes can override these styles, but if no class applies a style
-to an HTML form element, these styles will be the ones displayed.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 3
- </div>
- </section>
- <section id="kssref-forms-base-fieldset" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-forms-base-fieldset">
- <span class="kss-title__ref">
- 3.1.1
- <span class="kss-title__permalink-hash">
- forms.base.fieldset
- </span>
- </span>
- Fieldsets
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-base-fieldset" data-kss-fullscreen="kssref-forms-base-fieldset">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-base-fieldset.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-fieldset" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-fieldset" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><fieldset></code> element groups a set of form fields, optionally under a
-common name given by the <code><legend></code> element.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <fieldset class="">
- <legend>A fieldset</legend>
- <label for="fieldsetText">Text input</label>
- <input type="text" id="fieldsetText" placeholder="Text input">
-</fieldset>
-
-<fieldset class="" disabled>
- <legend>A disabled fieldset</legend>
- <div>
- <label for="fieldsetText2">Disabled text input</label>
- <input type="text" id="fieldsetText2" placeholder="Disabled input">
- </div>
- <div>
- <label for="fieldsetSelect">Disabled select menu</label>
- <select id="fieldsetSelect">
- <option>Disabled select</option>
- </select>
- </div>
- <div>
- <label><input type="checkbox"> Can't check this</label>
- </div>
-</fieldset>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/forms/forms-fieldset.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><fieldset class="{{modifier_class}}">
- <legend>A fieldset</legend>
- <label for="fieldsetText">Text input</label>
- <input type="text" id="fieldsetText" placeholder="Text input">
-</fieldset>
-
-<fieldset class="{{modifier_class}}" disabled>
- <legend>A disabled fieldset</legend>
- <div>
- <label for="fieldsetText2">Disabled text input</label>
- <input type="text" id="fieldsetText2" placeholder="Disabled input">
- </div>
- <div>
- <label for="fieldsetSelect">Disabled select menu</label>
- <select id="fieldsetSelect">
- <option>Disabled select</option>
- </select>
- </div>
- <div>
- <label><input type="checkbox"> Can't check this</label>
- </div>
-</fieldset>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 158
- </div>
- </section>
- <section id="kssref-forms-base-input" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-forms-base-input">
- <span class="kss-title__ref">
- 3.1.2
- <span class="kss-title__permalink-hash">
- forms.base.input
- </span>
- </span>
- Inputs
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-base-input" data-kss-fullscreen="kssref-forms-base-input">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-base-input.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-input" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-input" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><input></code> element is mostly used for text-based inputs that include the
-HTML5 types: <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>password</code>, <code>date</code>,
-<code>time</code>, <code>number</code>, <code>range</code>, <code>color</code>, and <code>file</code>.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div>
- <label for="inputText">Text</label>
- <input type="text" class="" id="inputText" placeholder="Enter some text">
-</div>
-<div>
- <label for="inputSearch">Search</label>
- <input type="search" class="" id="inputSearch" placeholder="Search">
-</div>
-<div>
- <label for="inputTel">Telephone</label>
- <input type="text" class="" id="inputTel" placeholder="Enter some text">
-</div>
-<div>
- <label for="inputURL">URL</label>
- <input type="url" class="" id="inputURL" placeholder="Enter a URL">
-</div>
-<div>
- <label for="inputEmail">Email address</label>
- <input type="email" class="" id="inputEmail" placeholder="Enter email">
-</div>
-<div>
- <label for="inputPassword">Password</label>
- <input type="password" class="" id="inputPassword" placeholder="Password">
-</div>
-<div>
- <label for="inputDate">Date</label>
- <input type="date" class="" id="inputDate" placeholder="Enter a date">
-</div>
-<div>
- <label for="inputTime">Time</label>
- <input type="time" class="" id="inputTime" placeholder="Enter a time">
-</div>
-<div>
- <label for="inputNumber">Number</label>
- <input type="number" class="" id="inputNumber" placeholder="Enter a number">
-</div>
-<div>
- <label for="inputRange">Range</label>
- <input type="range" class="" id="inputRange" placeholder="Enter a range">
-</div>
-<div>
- <label for="inputColor">Color</label>
- <input type="color" class="" id="inputColor" placeholder="Enter a color">
-</div>
-<div>
- <label for="inputFile">File input</label>
- <input type="file" class="" id="inputFile">
-</div>
-
-<div>
- <label for="inputText">Disabled text</label>
- <input type="text" class="" disabled id="inputText" placeholder="Disabled text">
-</div>
-<div>
- <label for="inputSearch">Disabled search</label>
- <input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
-</div>
-<div>
- <label for="inputTel">Disabled telephone</label>
- <input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
-</div>
-<div>
- <label for="inputURL">Disabled URL</label>
- <input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
-</div>
-<div>
- <label for="inputEmail">Disabled email address</label>
- <input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
-</div>
-<div>
- <label for="inputPassword">Disabled password</label>
- <input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
-</div>
-<div>
- <label for="inputDate">Disabled date</label>
- <input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
-</div>
-<div>
- <label for="inputTime">Disabled time</label>
- <input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
-</div>
-<div>
- <label for="inputNumber">Disabled number</label>
- <input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
-</div>
-<div>
- <label for="inputRange">Disabled range</label>
- <input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
-</div>
-<div>
- <label for="inputColor">Disabled color</label>
- <input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
-</div>
-<div>
- <label for="inputFile">Disabled file input</label>
- <input type="file" class="" disabled id="inputFile">
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/forms/forms-input.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div>
- <label for="inputText">Text</label>
- <input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
-</div>
-<div>
- <label for="inputSearch">Search</label>
- <input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
-</div>
-<div>
- <label for="inputTel">Telephone</label>
- <input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
-</div>
-<div>
- <label for="inputURL">URL</label>
- <input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
-</div>
-<div>
- <label for="inputEmail">Email address</label>
- <input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
-</div>
-<div>
- <label for="inputPassword">Password</label>
- <input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
-</div>
-<div>
- <label for="inputDate">Date</label>
- <input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
-</div>
-<div>
- <label for="inputTime">Time</label>
- <input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
-</div>
-<div>
- <label for="inputNumber">Number</label>
- <input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
-</div>
-<div>
- <label for="inputRange">Range</label>
- <input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
-</div>
-<div>
- <label for="inputColor">Color</label>
- <input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
-</div>
-<div>
- <label for="inputFile">File input</label>
- <input type="file" class="{{modifier_class}}" id="inputFile">
-</div>
-
-<div>
- <label for="inputText">Disabled text</label>
- <input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
-</div>
-<div>
- <label for="inputSearch">Disabled search</label>
- <input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
-</div>
-<div>
- <label for="inputTel">Disabled telephone</label>
- <input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
-</div>
-<div>
- <label for="inputURL">Disabled URL</label>
- <input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
-</div>
-<div>
- <label for="inputEmail">Disabled email address</label>
- <input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
-</div>
-<div>
- <label for="inputPassword">Disabled password</label>
- <input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
-</div>
-<div>
- <label for="inputDate">Disabled date</label>
- <input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
-</div>
-<div>
- <label for="inputTime">Disabled time</label>
- <input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
-</div>
-<div>
- <label for="inputNumber">Disabled number</label>
- <input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
-</div>
-<div>
- <label for="inputRange">Disabled range</label>
- <input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
-</div>
-<div>
- <label for="inputColor">Disabled color</label>
- <input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
-</div>
-<div>
- <label for="inputFile">Disabled file input</label>
- <input type="file" class="{{modifier_class}}" disabled id="inputFile">
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 92
- </div>
- </section>
- <section id="kssref-forms-base-input-checkbox" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-forms-base-input-checkbox">
- <span class="kss-title__ref">
- 3.1.3
- <span class="kss-title__permalink-hash">
- forms.base.input-checkbox
- </span>
- </span>
- Checkboxes
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-base-input-checkbox" data-kss-fullscreen="kssref-forms-base-input-checkbox">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-base-input-checkbox.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-input-checkbox" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-input-checkbox" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>If an <code><input></code> element has the <code>type='checkbox'</code> attribute set, the form
-field is displayed as a checkbox.</p>
-<p>It's recommended that you don't attempt to style these elements. Firefox's
-implementation doesn't respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div>
- <label><input type="checkbox" class=""> Check me out</label>
-</div>
-
-<div>
- <label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/forms/forms-input-checkbox.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div>
- <label><input type="checkbox" class="{{modifier_class}}"> Check me out</label>
-</div>
-
-<div>
- <label><input type="checkbox" class="{{modifier_class}}" value="" disabled> Option two is disabled</label>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 126
- </div>
- </section>
- <section id="kssref-forms-base-input-radio" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-forms-base-input-radio">
- <span class="kss-title__ref">
- 3.1.4
- <span class="kss-title__permalink-hash">
- forms.base.input-radio
- </span>
- </span>
- Radio buttons
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-base-input-radio" data-kss-fullscreen="kssref-forms-base-input-radio">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-base-input-radio.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-input-radio" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-input-radio" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>If an <code><input></code> element has the <code>type='radio'</code> attribute set, the form field
-is displayed as a radio button.</p>
-<p>It's recommended that you don't attempt to style these elements. Firefox's
-implementation doesn't respect <code>box-sizing</code>, <code>padding</code>, or <code>width</code>.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div>
- <label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
-</div>
-
-<div>
- <label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
-</div>
-
-<div>
- <label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/forms/forms-input-radio.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div>
- <label><input type="radio" class="{{modifier_class}}" value="option1" name="example-radio" checked> Option one</label>
-</div>
-
-<div>
- <label><input type="radio" class="{{modifier_class}}" value="option2" name="example-radio"> Option two</label>
-</div>
-
-<div>
- <label><input type="radio" class="{{modifier_class}}" value="option3" name="example-radio" disabled> Option three is disabled</label>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 138
- </div>
- </section>
- <section id="kssref-forms-base-label" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-forms-base-label">
- <span class="kss-title__ref">
- 3.1.5
- <span class="kss-title__permalink-hash">
- forms.base.label
- </span>
- </span>
- Labels
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-base-label" data-kss-fullscreen="kssref-forms-base-label">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-base-label.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-label" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-label" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><label></code> element represents a caption of a form field. The label can be
-associated with a specific form control by using the <code>for</code> attribute or by
-putting the form control inside the label element itself.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div>
- <label class="" for="lableInputText">A label for a text input</label>
- <input type="text" id="lableInputText" placeholder="Enter some text">
-</div>
-
-<div>
- <label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/forms/forms-label.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div>
- <label class="{{modifier_class}}" for="lableInputText">A label for a text input</label>
- <input type="text" id="lableInputText" placeholder="Enter some text">
-</div>
-
-<div>
- <label class="{{modifier_class}}"><input type="checkbox"> A label wrapped around a checkbox</label>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 188
- </div>
- </section>
- <section id="kssref-forms-base-select" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-forms-base-select">
- <span class="kss-title__ref">
- 3.1.6
- <span class="kss-title__permalink-hash">
- forms.base.select
- </span>
- </span>
- Select list
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-base-select" data-kss-fullscreen="kssref-forms-base-select">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-base-select.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-select" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-select" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><select></code> element represents a form field for selecting amongst a set of
-options.</p>
-<p>Known limitation: by default, Chrome and Safari on OS X allow very limited
-styling of <code><select></code>, unless a <code>border</code> property is set.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div>
- <label for="selectDropdown">A standard drop-down</label>
- <select class="" id="selectDropdown">
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- <optgroup label="More options">
- <option>Option 4</option>
- <option>Option 5</option>
- </optgroup>
- </select>
-</div>
-
-<div>
- <label for="selectMultiItem">A multi-item select field</label>
- <select class="" id="selectMultiItem" multiple>
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- <optgroup label="More options">
- <option>Option 4</option>
- <option>Option 5</option>
- </optgroup>
- </select>
-</div>
-
-<div>
- <label for="selectDisabled">A disabled drop-down</label>
- <select class="" id="selectDisabled" disabled>
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- <optgroup label="More options">
- <option>Option 4</option>
- <option>Option 5</option>
- </optgroup>
- </select>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/forms/forms-select.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div>
- <label for="selectDropdown">A standard drop-down</label>
- <select class="{{modifier_class}}" id="selectDropdown">
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- <optgroup label="More options">
- <option>Option 4</option>
- <option>Option 5</option>
- </optgroup>
- </select>
-</div>
-
-<div>
- <label for="selectMultiItem">A multi-item select field</label>
- <select class="{{modifier_class}}" id="selectMultiItem" multiple>
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- <optgroup label="More options">
- <option>Option 4</option>
- <option>Option 5</option>
- </optgroup>
- </select>
-</div>
-
-<div>
- <label for="selectDisabled">A disabled drop-down</label>
- <select class="{{modifier_class}}" id="selectDisabled" disabled>
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- <optgroup label="More options">
- <option>Option 4</option>
- <option>Option 5</option>
- </optgroup>
- </select>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 204
- </div>
- </section>
- <section id="kssref-forms-base-textarea" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-forms-base-textarea">
- <span class="kss-title__ref">
- 3.1.7
- <span class="kss-title__permalink-hash">
- forms.base.textarea
- </span>
- </span>
- Text areas
- </a>
- </h3>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-base-textarea" data-kss-fullscreen="kssref-forms-base-textarea">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-base-textarea.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-textarea" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-base-textarea" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code><textarea></code> element represents a multi-line plain text form field.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div>
- <label for="exampleTextarea">Text area</label>
- <textarea class="" rows="3" id="exampleTextarea"></textarea>
-</div>
-<div>
- <label for="exampleTextarea">Disabled text area</label>
- <textarea class="" rows="3" id="exampleTextarea" disabled></textarea>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>base/forms/forms-textarea.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div>
- <label for="exampleTextarea">Text area</label>
- <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea"></textarea>
-</div>
-<div>
- <label for="exampleTextarea">Disabled text area</label>
- <textarea class="{{modifier_class}}" rows="3" id="exampleTextarea" disabled></textarea>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>base/forms/_forms.scss</code>, line 225
- </div>
- </section>
- <section id="kssref-forms-button" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-forms-button">
- <span class="kss-title__ref">
- 3.2
- <span class="kss-title__permalink-hash">
- forms.button
- </span>
- </span>
- Button
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-forms-button" data-kss-fullscreen="kssref-forms-button">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-forms-button.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-forms-button" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-forms-button" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>In addition to the default styling of <code><button></code> and
-<code><input type="submit|image|reset|button"></code> elements, the <code>.button</code> class and
-its variants can apply buttons styles to various elements (like an <code><a></code>
-link).</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <p>
- <button class="button " type="button">Standard button</button>
- <button class="button " type="button" disabled>Disabled button</button>
-</p>
-<p>
- <button class="button " type="submit">Submit button</button>
- <button class="button " type="submit" disabled>Disabled submit button</button>
-</p>
-<p>
- <button class="button " type="reset">Reset button</button>
- <button class="button " type="reset" disabled>Disabled reset button</button>
-</p>
-<p>
- <input class="button " type="button" value="Input button">
- <input class="button " type="button" value="Disabled input button" disabled>
-</p>
-<p>
- <input class="button " type="submit" value="Input submit button">
- <input class="button " type="submit" value="Disabled input submit button" disabled>
-</p>
-<p>
- <input class="button " type="reset" value="Input reset button">
- <input class="button " type="reset" value="Disabled input reset button" disabled>
-</p>
-<p>
- <a class="button " href="#">Link button</a>
- <a class="button " disabled href="#">Disabled link button</a>
-</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- <div class="kss-modifier__name kss-style">
- :hover
- </div>
- <div class="kss-modifier__description kss-style">
- Hover styling.
- </div>
- <div class="kss-modifier__example">
- <p>
- <button class="button pseudo-class-hover" type="button">Standard button</button>
- <button class="button pseudo-class-hover" type="button" disabled>Disabled button</button>
-</p>
-<p>
- <button class="button pseudo-class-hover" type="submit">Submit button</button>
- <button class="button pseudo-class-hover" type="submit" disabled>Disabled submit button</button>
-</p>
-<p>
- <button class="button pseudo-class-hover" type="reset">Reset button</button>
- <button class="button pseudo-class-hover" type="reset" disabled>Disabled reset button</button>
-</p>
-<p>
- <input class="button pseudo-class-hover" type="button" value="Input button">
- <input class="button pseudo-class-hover" type="button" value="Disabled input button" disabled>
-</p>
-<p>
- <input class="button pseudo-class-hover" type="submit" value="Input submit button">
- <input class="button pseudo-class-hover" type="submit" value="Disabled input submit button" disabled>
-</p>
-<p>
- <input class="button pseudo-class-hover" type="reset" value="Input reset button">
- <input class="button pseudo-class-hover" type="reset" value="Disabled input reset button" disabled>
-</p>
-<p>
- <a class="button pseudo-class-hover" href="#">Link button</a>
- <a class="button pseudo-class-hover" disabled href="#">Disabled link button</a>
-</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- <div class="kss-modifier__name kss-style">
- :active
- </div>
- <div class="kss-modifier__description kss-style">
- Depressed button styling.
- </div>
- <div class="kss-modifier__example">
- <p>
- <button class="button pseudo-class-active" type="button">Standard button</button>
- <button class="button pseudo-class-active" type="button" disabled>Disabled button</button>
-</p>
-<p>
- <button class="button pseudo-class-active" type="submit">Submit button</button>
- <button class="button pseudo-class-active" type="submit" disabled>Disabled submit button</button>
-</p>
-<p>
- <button class="button pseudo-class-active" type="reset">Reset button</button>
- <button class="button pseudo-class-active" type="reset" disabled>Disabled reset button</button>
-</p>
-<p>
- <input class="button pseudo-class-active" type="button" value="Input button">
- <input class="button pseudo-class-active" type="button" value="Disabled input button" disabled>
-</p>
-<p>
- <input class="button pseudo-class-active" type="submit" value="Input submit button">
- <input class="button pseudo-class-active" type="submit" value="Disabled input submit button" disabled>
-</p>
-<p>
- <input class="button pseudo-class-active" type="reset" value="Input reset button">
- <input class="button pseudo-class-active" type="reset" value="Disabled input reset button" disabled>
-</p>
-<p>
- <a class="button pseudo-class-active" href="#">Link button</a>
- <a class="button pseudo-class-active" disabled href="#">Disabled link button</a>
-</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>components/button/button.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p>
- <button class="button {{modifier_class}}" type="button">Standard button</button>
- <button class="button {{modifier_class}}" type="button" disabled>Disabled button</button>
-</p>
-<p>
- <button class="button {{modifier_class}}" type="submit">Submit button</button>
- <button class="button {{modifier_class}}" type="submit" disabled>Disabled submit button</button>
-</p>
-<p>
- <button class="button {{modifier_class}}" type="reset">Reset button</button>
- <button class="button {{modifier_class}}" type="reset" disabled>Disabled reset button</button>
-</p>
-<p>
- <input class="button {{modifier_class}}" type="button" value="Input button">
- <input class="button {{modifier_class}}" type="button" value="Disabled input button" disabled>
-</p>
-<p>
- <input class="button {{modifier_class}}" type="submit" value="Input submit button">
- <input class="button {{modifier_class}}" type="submit" value="Disabled input submit button" disabled>
-</p>
-<p>
- <input class="button {{modifier_class}}" type="reset" value="Input reset button">
- <input class="button {{modifier_class}}" type="reset" value="Disabled input reset button" disabled>
-</p>
-<p>
- <a class="button {{modifier_class}}" href="#">Link button</a>
- <a class="button {{modifier_class}}" disabled href="#">Disabled link button</a>
-</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>components/button/_button.scss</code>, line 1
- </div>
- </section>
- </article>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
- prettyPrint();
- var spy = new ScrollSpy('#kss-node', {
- nav: '.kss-nav__menu-child > li > a',
- className: 'is-in-viewport'
- });
- var kssFullScreen = new KssFullScreen({
- idPrefix: 'kss-fullscreen-',
- bodyClass: 'kss-fullscreen-mode',
- elementClass: 'is-fullscreen'
- });
- var kssGuides = new KssGuides({
- bodyClass: 'kss-guides-mode'
- });
- var kssMarkup = new KssMarkup({
- bodyClass: 'kss-markup-mode',
- detailsClass: 'kss-markup'
- });
-</script>
-
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/styleguide/section-layouts.html b/styleguide/section-layouts.html
deleted file mode 100644
index ab4faec..0000000
--- a/styleguide/section-layouts.html
+++ /dev/null
@@ -1,630 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
- <meta charset="utf-8">
- <title>Hugo Zen Style Guide</title>
-
- <meta name="description" content="">
- <meta name="generator" content="kss-node">
- <meta name="viewport" content="width=device-width">
-
- <link rel="stylesheet" href="kss-assets/kss.css">
- <link rel="stylesheet" href="../static/css/styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
-
-</head>
-<body id="kss-node" >
-
-<div class="kss-sidebar kss-style">
- <header class="kss-header">
- <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
- </header>
- <nav class="kss-nav">
- <ul class="kss-nav__menu">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="./">
- <span class="kss-nav__ref">0</span
- ><span class="kss-nav__name">Overview</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html">
- <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html">
- <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
- </a>
- <ul class="kss-nav__menu-child">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-center">
- <span class="kss-nav__ref ">4.1</span
- ><span class="kss-nav__name">Layout Center</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-3col">
- <span class="kss-nav__ref ">4.2</span
- ><span class="kss-nav__name">Responsive 3-column grid</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html#kssref-layouts-layout-swap">
- <span class="kss-nav__ref ">4.3</span
- ><span class="kss-nav__name">Layout swap</span>
- </a>
- </li>
- </ul>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html">
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
- </a>
- </li>
- </ul>
- </nav>
-</div>
-<article role="main" class="kss-main">
-
-
- <div id="kssref-layouts" class="kss-section kss-section--depth-1 ">
- <div class="kss-style">
- <h1 class="kss-title kss-title--level-1">
- <a class="kss-title__permalink" href="#kssref-layouts">
- <span class="kss-title__ref">
- 4
- <span class="kss-title__permalink-hash">
- layouts
- </span>
- </span>
- Layouts
- </a>
- </h1>
-
-
- <div class="kss-description">
- <p>The layout styling for major parts of the page that are included with the
-theme. Note: some Panels layouts are included in other parts of the system
-and are not documented.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 30
- </div>
- </div>
- <section id="kssref-layouts-layout-center" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-layouts-layout-center">
- <span class="kss-title__ref">
- 4.1
- <span class="kss-title__permalink-hash">
- layouts.layout-center
- </span>
- </span>
- Layout Center
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-layouts-layout-center" data-kss-fullscreen="kssref-layouts-layout-center">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-layouts-layout-center.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-layouts-layout-center" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-layouts-layout-center" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>All other layouts should be nested inside this centered layout to ensure that
-content does not get too wide on very large screens.</p>
-<p>Applying a <code>.layout-*</code> class to the same HTML element as <code>.layout-center</code>
-would cause that element's grid to mis-align with the rest of the grid on the
-page, but this component will automatically detect the other <code>.layout-*</code>
-class and automatically use the <code>.layout-center--shared-grid</code> variant
-instead.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <div class="layout-center ">
- This is layout center that has content is centered on larger screens.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- <div class="kss-modifier__name kss-style">
- .layout-center--shared-grid
- </div>
- <div class="kss-modifier__description kss-style">
- If <code>.layout-center</code> is applied to the same div as another .layout-<em> class, then this variant should be used to prevent the shared layout's grid from mis-aligning. Note: Each time a new .layout-</em> component is created, this component will need to be modified.
- </div>
- <div class="kss-modifier__example">
- <div class="layout-center layout-center--shared-grid">
- This is layout center that has content is centered on larger screens.
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>layouts/layout-center/layout-center.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="layout-center {{modifier_class}}">
- This is layout center that has content is centered on larger screens.
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>layouts/layout-center/_layout-center.scss</code>, line 5
- </div>
- </section>
- <section id="kssref-layouts-layout-3col" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-layouts-layout-3col">
- <span class="kss-title__ref">
- 4.2
- <span class="kss-title__permalink-hash">
- layouts.layout-3col
- </span>
- </span>
- Responsive 3-column grid
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-layouts-layout-3col" data-kss-fullscreen="kssref-layouts-layout-3col">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-layouts-layout-3col.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-layouts-layout-3col" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-layouts-layout-3col" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The <code>.layout-3col</code> layout is a responsive grid layout that is:</p>
-<ul>
-<li>1 column at mobile sizes</li>
-<li>2 columns at tablet sizes</li>
-<li>3 columns at desktop sizes</li>
-</ul>
-<p>The <code>.layout-3col</code> class is used on the container div for the layout. A <em>grid
-item</em> in the container can be created using one of the following classes:</p>
-<ul>
-<li><code>.layout-3col__full</code> : 3-column wide grid item; starts a new row</li>
-<li><code>.layout-3col__left-content</code> : 2-column wide grid item, spanning columns 1
-and 2; starts a new row</li>
-<li><code>.layout-3col__right-content</code> : 2-column wide grid item, spanning columns 2
-and 3; starts a new row</li>
-<li><code>.layout-3col__left-sidebar</code> : 1-column wide grid item spanning column 1;
-starts a new row on tablet screens</li>
-<li><code>.layout-3col__first-left-sidebar</code> : 1-column wide grid item spanning column 1;
-spans column 1 and starts a new row on tablet screens only</li>
-<li><code>.layout-3col__second-left-sidebar</code> : 1-column wide grid item spanning column 1;
-spans column 2 on tablet screens only</li>
-<li><code>.layout-3col__right-sidebar</code> : 1-column wide grid item spanning column 3;
-starts a new row on tablet screens</li>
-<li><code>.layout-3col__col-1</code> : 1-column wide grid item spanning column 1; starts a
-new row</li>
-<li><code>.layout-3col__col-2</code> : 1-column wide grid item spanning column 2</li>
-<li><code>.layout-3col__col-3</code> : 1-column wide grid item spanning column 3; starts a
-new row on tablet screens</li>
-<li><code>.layout-3col__col-4</code> : At tablet sizes, the <code>__col-x</code> grid items will form
-an irregular layout of 2 items in the first row and 1 item in the second
-row. The <code>__col-4</code> is a "hidden" item that does not appear on the
-large-screen 3-column grid, but is a 1-column wide grid item spanning
-column 2 on tablet screens.</li>
-<li><code>.layout-3col__col-x</code> : 1-column wide grid item spanning column 1; when
-several of these are used inside a <code>.layout-3col__grid-item-container</code> or
-<code>.layout-3col</code>, the first one is positioned like <code>__col-1</code>, the
-second like <code>__col-2</code>, etc.</li>
-</ul>
-<p>There are 2 ways to do a nested grid:</p>
-<ol>
-<li>Place a grid container div inside a grid item. Just apply the normal
-classes to the nested grid container and its grid items.</li>
-<li>The grid item's div is also the grid container for the nested grid. In
-this case, the <code>.layout3-col__grid-item-container</code> class should be added
-to the div to ensure its nested grid items align with the parent grid.</li>
-</ol>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="layout-3col ">
- <div class="layout-3col__full">
- The <code>.layout-3col__full</code> grid item.
- </div>
- <div class="layout-3col__left-content">
- The <code>.layout-3col__left-content</code> grid item.
- </div>
- <div class="layout-3col__right-sidebar">
- The <code>.layout-3col__right-sidebar</code> grid item.
- </div>
- <div class="layout-3col__right-content">
- The <code>.layout-3col__right-content</code> grid item.
- </div>
- <div class="layout-3col__left-sidebar">
- The <code>.layout-3col__left-sidebar</code> grid item.
- </div>
- <div class="layout-3col__right-content">
- The <code>.layout-3col__right-content</code> grid item.
- </div>
- <div class="layout-3col__first-left-sidebar">
- The <code>.layout-3col__first-left-sidebar</code> grid item.
- </div>
- <div class="layout-3col__second-left-sidebar">
- The <code>.layout-3col__second-left-sidebar</code> grid item.
- </div>
- <div class="layout-3col__col-1">
- The <code>.layout-3col__col-1</code> grid item.
- </div>
- <div class="layout-3col__col-2">
- The <code>.layout-3col__col-2</code> grid item.
- </div>
- <div class="layout-3col__col-3">
- The <code>.layout-3col__col-3</code> grid item. Don't forget to look for the <code>.layout-3col__col-4</code> grid item at tablet sizes.
- </div>
- <div class="layout-3col__col-4">
- The <code>.layout-3col__col-4</code> grid item.
- </div>
- <div class="layout-3col__full layout-3col__grid-item-container">
- <div class="layout-3col__col-x">
- The first <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The second <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The third <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The fourth <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The fifth <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The sixth <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- </div>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>layouts/layout-3col/layout-3col.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="layout-3col {{modifier_class}}">
- <div class="layout-3col__full">
- The <code>.layout-3col__full</code> grid item.
- </div>
- <div class="layout-3col__left-content">
- The <code>.layout-3col__left-content</code> grid item.
- </div>
- <div class="layout-3col__right-sidebar">
- The <code>.layout-3col__right-sidebar</code> grid item.
- </div>
- <div class="layout-3col__right-content">
- The <code>.layout-3col__right-content</code> grid item.
- </div>
- <div class="layout-3col__left-sidebar">
- The <code>.layout-3col__left-sidebar</code> grid item.
- </div>
- <div class="layout-3col__right-content">
- The <code>.layout-3col__right-content</code> grid item.
- </div>
- <div class="layout-3col__first-left-sidebar">
- The <code>.layout-3col__first-left-sidebar</code> grid item.
- </div>
- <div class="layout-3col__second-left-sidebar">
- The <code>.layout-3col__second-left-sidebar</code> grid item.
- </div>
- <div class="layout-3col__col-1">
- The <code>.layout-3col__col-1</code> grid item.
- </div>
- <div class="layout-3col__col-2">
- The <code>.layout-3col__col-2</code> grid item.
- </div>
- <div class="layout-3col__col-3">
- The <code>.layout-3col__col-3</code> grid item. Don't forget to look for the <code>.layout-3col__col-4</code> grid item at tablet sizes.
- </div>
- <div class="layout-3col__col-4">
- The <code>.layout-3col__col-4</code> grid item.
- </div>
- <div class="layout-3col__full layout-3col__grid-item-container">
- <div class="layout-3col__col-x">
- The first <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The second <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The third <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The fourth <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The fifth <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- <div class="layout-3col__col-x">
- The sixth <code>.layout-3col__col-x</code> grid item in this nested grid.
- </div>
- </div>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>layouts/layout-3col/_layout-3col.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-layouts-layout-swap" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-layouts-layout-swap">
- <span class="kss-title__ref">
- 4.3
- <span class="kss-title__permalink-hash">
- layouts.layout-swap
- </span>
- </span>
- Layout swap
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-layouts-layout-swap" data-kss-fullscreen="kssref-layouts-layout-swap">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-layouts-layout-swap.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-layouts-layout-swap" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-layouts-layout-swap" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Uses absolute positioning and selective padding to make 2 elements appear to
-swap places in the visual order while maintaining their original HTML source
-order.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="layout-swap">
- <div>This element comes <strong>first</strong> in the HTML source order.</div>
- <div class="layout-swap__top">This element comes <strong>second</strong> in the HTML source order.</div>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>layouts/layout-swap/layout-swap.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="layout-swap">
- <div>This element comes <strong>first</strong> in the HTML source order.</div>
- <div class="layout-swap__top">This element comes <strong>second</strong> in the HTML source order.</div>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>layouts/layout-swap/_layout-swap.scss</code>, line 4
- </div>
- </section>
- </article>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
- prettyPrint();
- var spy = new ScrollSpy('#kss-node', {
- nav: '.kss-nav__menu-child > li > a',
- className: 'is-in-viewport'
- });
- var kssFullScreen = new KssFullScreen({
- idPrefix: 'kss-fullscreen-',
- bodyClass: 'kss-fullscreen-mode',
- elementClass: 'is-fullscreen'
- });
- var kssGuides = new KssGuides({
- bodyClass: 'kss-guides-mode'
- });
- var kssMarkup = new KssMarkup({
- bodyClass: 'kss-markup-mode',
- detailsClass: 'kss-markup'
- });
-</script>
-
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/styleguide/section-navigation.html b/styleguide/section-navigation.html
deleted file mode 100644
index 9730c2d..0000000
--- a/styleguide/section-navigation.html
+++ /dev/null
@@ -1,918 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
- <meta charset="utf-8">
- <title>Hugo Zen Style Guide</title>
-
- <meta name="description" content="">
- <meta name="generator" content="kss-node">
- <meta name="viewport" content="width=device-width">
-
- <link rel="stylesheet" href="kss-assets/kss.css">
- <link rel="stylesheet" href="../static/css/styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
-
-</head>
-<body id="kss-node" >
-
-<div class="kss-sidebar kss-style">
- <header class="kss-header">
- <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
- </header>
- <nav class="kss-nav">
- <ul class="kss-nav__menu">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="./">
- <span class="kss-nav__ref">0</span
- ><span class="kss-nav__name">Overview</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html">
- <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html">
- <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html">
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
- </a>
- <ul class="kss-nav__menu-child">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-breadcrumb">
- <span class="kss-nav__ref ">6.1</span
- ><span class="kss-nav__name">Breadcrumb navigation</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-more-link">
- <span class="kss-nav__ref ">6.2</span
- ><span class="kss-nav__name">"More" link</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-nav-menu">
- <span class="kss-nav__ref ">6.3</span
- ><span class="kss-nav__name">Nav menu</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-navbar">
- <span class="kss-nav__ref ">6.4</span
- ><span class="kss-nav__name">Navbar</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-pager">
- <span class="kss-nav__ref ">6.5</span
- ><span class="kss-nav__name">Pager</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html#kssref-navigation-skip-link">
- <span class="kss-nav__ref ">6.6</span
- ><span class="kss-nav__name">Skip link</span>
- </a>
- </li>
- </ul>
- </li>
- </ul>
- </nav>
-</div>
-<article role="main" class="kss-main">
-
-
- <div id="kssref-navigation" class="kss-section kss-section--depth-1 ">
- <div class="kss-style">
- <h1 class="kss-title kss-title--level-1">
- <a class="kss-title__permalink" href="#kssref-navigation">
- <span class="kss-title__ref">
- 6
- <span class="kss-title__permalink-hash">
- navigation
- </span>
- </span>
- Navigation
- </a>
- </h1>
-
-
- <div class="kss-description">
- <p>Navigation components are specialized design components that are used for
-page navigation.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 65
- </div>
- </div>
- <section id="kssref-navigation-breadcrumb" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-navigation-breadcrumb">
- <span class="kss-title__ref">
- 6.1
- <span class="kss-title__permalink-hash">
- navigation.breadcrumb
- </span>
- </span>
- Breadcrumb navigation
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-navigation-breadcrumb" data-kss-fullscreen="kssref-navigation-breadcrumb">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-navigation-breadcrumb.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-navigation-breadcrumb" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-navigation-breadcrumb" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>The path to the current page in the form of a list of links.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <nav class="breadcrumb " role="navigation">
- <h2 class="breadcrumb__title">You are here</h2>
-
- <ol class="breadcrumb__list">
- <li class="breadcrumb__item"><a href="#">Home</a> › </li>
- <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
- <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
- <li class="breadcrumb__item">Current item</li>
- </ol>
-</nav>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>navigation/breadcrumb/breadcrumb.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><nav class="breadcrumb {{modifier_class}}" role="navigation">
- <h2 class="breadcrumb__title">You are here</h2>
-
- <ol class="breadcrumb__list">
- <li class="breadcrumb__item"><a href="#">Home</a> › </li>
- <li class="breadcrumb__item"><a href="#">Level 1</a> › </li>
- <li class="breadcrumb__item"><a href="#">Level 2</a> › </li>
- <li class="breadcrumb__item">Current item</li>
- </ol>
-</nav>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>navigation/breadcrumb/_breadcrumb.scss</code>, line 4
- </div>
- </section>
- <section id="kssref-navigation-more-link" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-navigation-more-link">
- <span class="kss-title__ref">
- 6.2
- <span class="kss-title__permalink-hash">
- navigation.more-link
- </span>
- </span>
- "More" link
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-navigation-more-link" data-kss-fullscreen="kssref-navigation-more-link">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-navigation-more-link.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-navigation-more-link" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-navigation-more-link" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Styles the "Read more…" and "Help" links common in Drupal.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <div class="more-link ">
- <a href="#">Read more…</a>
-</div>
-
-<div class="more-link ">
- <a class="more-link__help-icon" href="#">Help</a>
-</div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>navigation/more-link/more-link.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><div class="more-link {{modifier_class}}">
- <a href="#">Read more…</a>
-</div>
-
-<div class="more-link {{modifier_class}}">
- <a class="more-link__help-icon" href="#">Help</a>
-</div>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>navigation/more-link/_more-link.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-navigation-nav-menu" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-navigation-nav-menu">
- <span class="kss-title__ref">
- 6.3
- <span class="kss-title__permalink-hash">
- navigation.nav-menu
- </span>
- </span>
- Nav menu
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-navigation-nav-menu" data-kss-fullscreen="kssref-navigation-nav-menu">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-navigation-nav-menu.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-navigation-nav-menu" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-navigation-nav-menu" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>A "nav menu" is secondary, hierarchical navigation which can be displayed to the
-side or below the main content.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="nav-menu ">
- <li class="nav-menu__item">
- <a href="/" class="nav-menu__link">Home</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
- </li>
- <li class="nav-menu__item is-expanded is-active-trail">
- <a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
- <ul class="nav-menu">
- <li class="nav-menu__item">
- <a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
- </li>
- <li class="nav-menu__item is-active-trail is-active">
- <a href="#" class="nav-menu__link is-active">Decet</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Aliquip Similis</a>
- </li>
- </ul>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Ibidem Sudo</a>
- </li>
-</ul>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>navigation/nav-menu/nav-menu.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><ul class="nav-menu {{modifier_class}}">
- <li class="nav-menu__item">
- <a href="/" class="nav-menu__link">Home</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Blandit Jugis Sudo</a>
- </li>
- <li class="nav-menu__item is-expanded is-active-trail">
- <a href="#" class="nav-menu__link is-active-trail">Causa Diam Jumentum Wisi</a>
- <ul class="nav-menu">
- <li class="nav-menu__item">
- <a href="#" class="nav-menu__link">Dolor Huic Oppeto</a>
- </li>
- <li class="nav-menu__item is-active-trail is-active">
- <a href="#" class="nav-menu__link is-active">Decet</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Aliquip Similis</a>
- </li>
- </ul>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Abigo Caecus Causa Illum</a>
- </li>
- <li class="nav-menu__item is-collapsed">
- <a href="#" class="nav-menu__link">Ibidem Sudo</a>
- </li>
-</ul>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>navigation/nav-menu/_nav-menu.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-navigation-navbar" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-navigation-navbar">
- <span class="kss-title__ref">
- 6.4
- <span class="kss-title__permalink-hash">
- navigation.navbar
- </span>
- </span>
- Navbar
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-navigation-navbar" data-kss-fullscreen="kssref-navigation-navbar">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-navigation-navbar.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-navigation-navbar" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-navigation-navbar" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>A simple method to get navigation links to appear in one line.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="navbar clearfix">
- <li class="navbar__item"><a href="#">Home</a></li>
- <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
- <li class="navbar__item"><a href="#">Causa Diam</a></li>
- <li class="navbar__item"><a href="#">Abigo Caecus</a></li>
- <li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
- <li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
- <li class="navbar__item"><a href="#">Ut</a></li>
-</ul>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>navigation/navbar/navbar.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><ul class="navbar clearfix">
- <li class="navbar__item"><a href="#">Home</a></li>
- <li class="navbar__item"><a href="#">Blandit Jugis</a></li>
- <li class="navbar__item"><a href="#">Causa Diam</a></li>
- <li class="navbar__item"><a href="#">Abigo Caecus</a></li>
- <li class="navbar__item"><a href="#">Ibidem Sudo</a></li>
- <li class="navbar__item"><a href="#">Luctus Luptatum</a></li>
- <li class="navbar__item"><a href="#">Ut</a></li>
-</ul>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>navigation/navbar/_navbar.scss</code>, line 4
- </div>
- </section>
- <section id="kssref-navigation-pager" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-navigation-pager">
- <span class="kss-title__ref">
- 6.5
- <span class="kss-title__permalink-hash">
- navigation.pager
- </span>
- </span>
- Pager
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-navigation-pager" data-kss-fullscreen="kssref-navigation-pager">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-navigation-pager.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-navigation-pager" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-navigation-pager" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Paged navigation is a list of page numbers when more than 1 page of content
-is available.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- <ul class="pager ">
- <li class="pager__item">
- <a title="Go to first page" href="/admin/content">« first</a>
- </li>
- <li class="pager__item">
- <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 1" href="/admin/content">1</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 2" href="/admin/content?page=1">2</a>
- </li>
- <li class="pager__current-item">3</li>
- <li class="pager__item">
- <a title="Go to page 4" href="/admin/content?page=3">4</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 5" href="/admin/content?page=4">5</a>
- </li>
- <li class="pager__item">
- <a title="Go to next page" href="/admin/content?page=3">next ›</a>
- </li>
- <li class="pager__item">
- <a title="Go to last page" href="/admin/content?page=4">last »</a>
- </li>
-</ul>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>navigation/pager/pager.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><ul class="pager {{modifier_class}}">
- <li class="pager__item">
- <a title="Go to first page" href="/admin/content">« first</a>
- </li>
- <li class="pager__item">
- <a title="Go to previous page" href="/admin/content?page=1">‹ previous</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 1" href="/admin/content">1</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 2" href="/admin/content?page=1">2</a>
- </li>
- <li class="pager__current-item">3</li>
- <li class="pager__item">
- <a title="Go to page 4" href="/admin/content?page=3">4</a>
- </li>
- <li class="pager__item">
- <a title="Go to page 5" href="/admin/content?page=4">5</a>
- </li>
- <li class="pager__item">
- <a title="Go to next page" href="/admin/content?page=3">next ›</a>
- </li>
- <li class="pager__item">
- <a title="Go to last page" href="/admin/content?page=4">last »</a>
- </li>
-</ul>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>navigation/pager/_pager.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-navigation-skip-link" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-navigation-skip-link">
- <span class="kss-title__ref">
- 6.6
- <span class="kss-title__permalink-hash">
- navigation.skip-link
- </span>
- </span>
- Skip link
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-navigation-skip-link" data-kss-fullscreen="kssref-navigation-skip-link">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-navigation-skip-link.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-navigation-skip-link" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-navigation-skip-link" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>To make the link completely hidden until a user tabs to the link, combine it
-with the <code>visually-hidden</code> component.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Examples </div>
-
- <div class="kss-modifier__default-name kss-style">
- Default styling
- </div>
-
- <div class="kss-modifier__example">
- <p class="skip-link__wrapper">
- <a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable ">Jump to navigation</a>
-</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- <div class="kss-modifier__name kss-style">
- :focus
- </div>
- <div class="kss-modifier__description kss-style">
- Focus styling.
- </div>
- <div class="kss-modifier__example">
- <p class="skip-link__wrapper">
- <a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable pseudo-class-focus">Jump to navigation</a>
-</p>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
- </div>
- <details class="kss-markup kss-style">
- <summary>
- Markup: <code>navigation/skip-link/skip-link.twig</code>
- </summary>
- <pre class="prettyprint linenums lang-html"><code data-language="html"><p class="skip-link__wrapper">
- <a href="#main-menu" class="skip-link visually-hidden visually-hidden--focusable {{modifier_class}}">{{content}}</a>
-</p>
-</code></pre>
- </details>
-
- <div class="kss-source kss-style">
- Source: <code>navigation/skip-link/_skip-link.scss</code>, line 1
- </div>
- </section>
- </article>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
- prettyPrint();
- var spy = new ScrollSpy('#kss-node', {
- nav: '.kss-nav__menu-child > li > a',
- className: 'is-in-viewport'
- });
- var kssFullScreen = new KssFullScreen({
- idPrefix: 'kss-fullscreen-',
- bodyClass: 'kss-fullscreen-mode',
- elementClass: 'is-fullscreen'
- });
- var kssGuides = new KssGuides({
- bodyClass: 'kss-guides-mode'
- });
- var kssMarkup = new KssMarkup({
- bodyClass: 'kss-markup-mode',
- detailsClass: 'kss-markup'
- });
-</script>
-
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
diff --git a/styleguide/section-sass.html b/styleguide/section-sass.html
deleted file mode 100644
index baa5737..0000000
--- a/styleguide/section-sass.html
+++ /dev/null
@@ -1,845 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="en">
-<head>
- <meta charset="utf-8">
- <title>Hugo Zen Style Guide</title>
-
- <meta name="description" content="">
- <meta name="generator" content="kss-node">
- <meta name="viewport" content="width=device-width">
-
- <link rel="stylesheet" href="kss-assets/kss.css">
- <link rel="stylesheet" href="../static/css/styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
-<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
-
-</head>
-<body id="kss-node" >
-
-<div class="kss-sidebar kss-style">
- <header class="kss-header">
- <h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
- </header>
- <nav class="kss-nav">
- <ul class="kss-nav__menu">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="./">
- <span class="kss-nav__ref">0</span
- ><span class="kss-nav__name">Overview</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html">
- <span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
- </a>
- <ul class="kss-nav__menu-child">
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-colors">
- <span class="kss-nav__ref ">1.1</span
- ><span class="kss-nav__name">Colors</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-init">
- <span class="kss-nav__ref ">1.2</span
- ><span class="kss-nav__name">Initialization partial</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-modules">
- <span class="kss-nav__ref ">1.3</span
- ><span class="kss-nav__name">3rd party libraries</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables">
- <span class="kss-nav__ref ">1.4</span
- ><span class="kss-nav__name">Variables</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-breakpoints">
- <span class="kss-nav__ref kss-nav__ref-child">1.4.1</span
- ><span class="kss-nav__name">Breakpoints</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-support-for">
- <span class="kss-nav__ref kss-nav__ref-child">1.4.2</span
- ><span class="kss-nav__name">Browser support</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-typey">
- <span class="kss-nav__ref kss-nav__ref-child">1.4.3</span
- ><span class="kss-nav__name">Font faces, stacks and sizes.</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-zen-grids">
- <span class="kss-nav__ref kss-nav__ref-child">1.4.4</span
- ><span class="kss-nav__name">Zen grids</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-misc">
- <span class="kss-nav__ref kss-nav__ref-child">1.4.5</span
- ><span class="kss-nav__name">Miscellaneous variables</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-functions">
- <span class="kss-nav__ref ">1.5</span
- ><span class="kss-nav__name">Functions</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins">
- <span class="kss-nav__ref ">1.6</span
- ><span class="kss-nav__name">Mixins</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-clearfix">
- <span class="kss-nav__ref kss-nav__ref-child">1.6.1</span
- ><span class="kss-nav__name">clearfix()</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-image-url">
- <span class="kss-nav__ref kss-nav__ref-child">1.6.2</span
- ><span class="kss-nav__name">image-url()</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-rtl">
- <span class="kss-nav__ref kss-nav__ref-child">1.6.3</span
- ><span class="kss-nav__name">rtl()</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden">
- <span class="kss-nav__ref kss-nav__ref-child">1.6.4</span
- ><span class="kss-nav__name">visually-hidden()</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--focusable">
- <span class="kss-nav__ref kss-nav__ref-child">1.6.5</span
- ><span class="kss-nav__name">visually-hidden--focusable()</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--off">
- <span class="kss-nav__ref kss-nav__ref-child">1.6.6</span
- ><span class="kss-nav__name">visually-hidden--off()</span>
- </a>
- </li>
- </ul>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-base.html">
- <span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-forms.html">
- <span class="kss-nav__ref">3</span><span class="kss-nav__name">forms</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-layouts.html">
- <span class="kss-nav__ref">4</span><span class="kss-nav__name">Layouts</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-components.html">
- <span class="kss-nav__ref">5</span><span class="kss-nav__name">Components</span>
- </a>
- </li>
- <li class="kss-nav__menu-item">
- <a class="kss-nav__menu-link" href="section-navigation.html">
- <span class="kss-nav__ref">6</span><span class="kss-nav__name">Navigation</span>
- </a>
- </li>
- </ul>
- </nav>
-</div>
-<article role="main" class="kss-main">
-
-
- <div id="kssref-sass" class="kss-section kss-section--depth-1 ">
- <div class="kss-style">
- <h1 class="kss-title kss-title--level-1">
- <a class="kss-title__permalink" href="#kssref-sass">
- <span class="kss-title__ref">
- 1
- <span class="kss-title__permalink-hash">
- sass
- </span>
- </span>
- Colors and Sass
- </a>
- </h1>
-
-
- <div class="kss-description">
- <p>Documentation for colors and Sass mixins and variables.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>styles.scss</code>, line 8
- </div>
- </div>
- <section id="kssref-sass-colors" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-sass-colors">
- <span class="kss-title__ref">
- 1.1
- <span class="kss-title__permalink-hash">
- sass.colors
- </span>
- </span>
- Colors
- </a>
- </h2>
-
- <p class="kss-toolbar">
- <a href="#kssref-sass-colors" data-kss-fullscreen="kssref-sass-colors">
- <span class="kss-toolbar__tooltip">Toggle full screen</span>
- <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
- </svg>
- </a>
- <a href="item-sass-colors.html" target="_blank">
- <span class="kss-toolbar__tooltip">Open in new window</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect x="0" y="20" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
- <rect x="24" y="0" width="40" height="44" fill="#fff"/>
- <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
- <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
- </svg>
- </a>
- <a href="#kssref-sass-colors" data-kss-guides="true">
- <span class="kss-toolbar__tooltip">Toggle example guides</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
- <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
- <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
- </svg>
- </a>
- <a href="#kssref-sass-colors" data-kss-markup="true">
- <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
- <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
- <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
- </svg>
- </a>
- </p>
-
- <div class="kss-description">
- <p>Use the <code>color()</code> function to add colors to CSS properties. To learn more,
-<a href="http://johnalbin.github.io/chroma/">read the Chroma documentation</a>.</p>
-
- </div>
-
- </div>
-
- <div class="kss-modifier__wrapper">
- <div class="kss-modifier__heading kss-style">
- Example </div>
-
-
- <div class="kss-modifier__example">
- /*! typey | GPLv2 License | https://github.com/jptaranto/typey <!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">branding</h3><p class="chroma-kss__description">The site's main colors. Can be used to define colors in other color schemes.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span> <span class="chroma-kss__reference">This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, brand, brand-alt, brand-dark, text, link, link-visited, link-hover, border, border-dark, autocomplete, header-bg, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(nearblack)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: brand, link-hover, border-dark, header-bg, button, headings</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(grey-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: brand-dark, progress-bar-border, skip-link-bg, tab-secondary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: brand-alt, button-disabled, fieldset-summary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(grey-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(grey-extra-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: backdrop, resizable-grippie, watermark</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span> <span class="chroma-kss__reference">This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, row-stripe, skip-link, tabs-bg, tab-text-shadow</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code></span> <span class="chroma-kss__reference">This color is inherited by: autocomplete-select-bg, progress-bar</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code></span> <span class="chroma-kss__reference">This color is inherited by: link-active, form-error, mark-highlight, error, error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #43a808"></span><code class="chroma-kss__variable">color(green)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#43a808</code></span> <span class="chroma-kss__reference">This color is inherited by: status, status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(yellow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code></span> <span class="chroma-kss__reference">This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select</span></div><h3 class="chroma-kss__title">functional</h3><p class="chroma-kss__description">Colors used by functional parts of the design.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(brand)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span> <span class="chroma-kss__reference">This color is inherited by: link-hover, header-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(brand-alt)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(brand-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(text)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(text-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete-bg, tabs-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(link-visited)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(link-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (brand)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(link-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span> <span class="chroma-kss__reference">This color is inherited by: tabs-border</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(border-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(autocomplete)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(autocomplete-select-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(body-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(header-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (brand)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(backdrop)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(button)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(button-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(fieldset-summary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(form-error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(mark-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(mark-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(menu-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(preview-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(progress-bar)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(progress-bar-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(progress-bar-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(resizable-grippie)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(row-stripe)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(row-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(skip-link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(skip-link-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #43a808"></span><code class="chroma-kss__variable">color(status)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#43a808</code> (green)</span> <span class="chroma-kss__reference">This color is inherited by: status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f4feee"></span><code class="chroma-kss__variable">color(status-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f4feee</code> (status)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(status-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffce6"></span><code class="chroma-kss__variable">color(warning-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffce6</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(warning-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span> <span class="chroma-kss__reference">This color is inherited by: error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff0f0"></span><code class="chroma-kss__variable">color(error-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff0f0</code> (error)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(tabs-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (border)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tabs-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(tab)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tab-text-shadow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dddddd"></span><code class="chroma-kss__variable">color(tab-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dddddd</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(tab-secondary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(table-drag)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffdf0"></span><code class="chroma-kss__variable">color(table-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffdf0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(watermark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(headings)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span></div></div>
-
- <div class="kss-modifier__example-footer"></div>
- </div>
-
- </div>
-
- <div class="kss-source kss-style">
- Source: <code>init/_colors.scss</code>, line 3
- </div>
- </section>
- <section id="kssref-sass-init" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-sass-init">
- <span class="kss-title__ref">
- 1.2
- <span class="kss-title__permalink-hash">
- sass.init
- </span>
- </span>
- Initialization partial
- </a>
- </h2>
-
-
- <div class="kss-description">
- <p>To make it easier to use all variables and mixins in any Sass file in this
-project, each .scss file has a <code>@import 'init';</code> declaration. The _init.scss
-file is in charge of importing all the other partials needed for the
-project.</p>
-<p>The initialization partial is organized in this way:</p>
-<ul>
-<li>First we set any shared Sass variables.</li>
-<li>Next we import Sass modules.</li>
-<li>Last we define our custom mixins for this project.</li>
-</ul>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>_init.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-sass-modules" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-sass-modules">
- <span class="kss-title__ref">
- 1.3
- <span class="kss-title__permalink-hash">
- sass.modules
- </span>
- </span>
- 3rd party libraries
- </a>
- </h2>
-
-
- <div class="kss-description">
- <p>The following sass modules are shared with all .scss files:</p>
-<ul>
-<li><a href="http://breakpoint-sass.com/">Breakpoint</a></li>
-<li><a href="https://github.com/JohnAlbin/chroma">Chroma</a></li>
-<li><a href="https://github.com/JohnAlbin/support-for">Support-for</a></li>
-<li><a href="https://github.com/jptaranto/typey">Typey</a></li>
-<li><a href="http://zengrids.com/help/">Zen Grids</a></li>
-</ul>
-<p>Additional pre-built libraries can be found on the <a href="http://www.sache.in/">Sache website</a>.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>_init.scss</code>, line 27
- </div>
- </section>
- <section id="kssref-sass-variables" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-sass-variables">
- <span class="kss-title__ref">
- 1.4
- <span class="kss-title__permalink-hash">
- sass.variables
- </span>
- </span>
- Variables
- </a>
- </h2>
-
-
- <div class="kss-description">
- <p>Set variables for this site before a library sets its !default value.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/_variables.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-sass-variables-breakpoints" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-variables-breakpoints">
- <span class="kss-title__ref">
- 1.4.1
- <span class="kss-title__permalink-hash">
- sass.variables.breakpoints
- </span>
- </span>
- Breakpoints
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>Use the <code>respond-to()</code> mixin to use named breakpoints. Documentation is
-available in the <a href="https://github.com/at-import/breakpoint/wiki/Respond-To">Breakpoint wiki
-pages</a>.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/_variables.scss</code>, line 138
- </div>
- </section>
- <section id="kssref-sass-variables-support-for" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-variables-support-for">
- <span class="kss-title__ref">
- 1.4.2
- <span class="kss-title__permalink-hash">
- sass.variables.support-for
- </span>
- </span>
- Browser support
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>For older versions of browsers, some Sass relies on the <code>support-for()</code> to
-control whether extra CSS is needed to be output. The <code>support-for()</code>
-function and the <code>$support-for</code> variable are documented on the <a href="https://github.com/JohnAlbin/support-for">support-for
-homepage</a>.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/_variables.scss</code>, line 8
- </div>
- </section>
- <section id="kssref-sass-variables-typey" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-variables-typey">
- <span class="kss-title__ref">
- 1.4.3
- <span class="kss-title__permalink-hash">
- sass.variables.typey
- </span>
- </span>
- Font faces, stacks and sizes.
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>Font styling and line heights are controlled by the several variables that
-used by mixins like <code>type-layout()</code>, <code>margin-top()</code>, and <code>margin-bottom()</code>.
-These variable and mixins are documented on the <a href="https://github.com/jptaranto/typey">Typey
-homepage</a>.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/_variables.scss</code>, line 27
- </div>
- </section>
- <section id="kssref-sass-variables-zen-grids" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-variables-zen-grids">
- <span class="kss-title__ref">
- 1.4.4
- <span class="kss-title__permalink-hash">
- sass.variables.zen-grids
- </span>
- </span>
- Zen grids
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>The default grid system is built using the Zen Grids sass module. Full
-documentation is available on the <a href="http://zengrids.com/">Zen Grids website</a>.</p>
-<p>Note: if you are more comfortable using another grid system, you can easily
-remove Zen Grids and its layouts.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/_variables.scss</code>, line 160
- </div>
- </section>
- <section id="kssref-sass-variables-misc" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-variables-misc">
- <span class="kss-title__ref">
- 1.4.5
- <span class="kss-title__permalink-hash">
- sass.variables.misc
- </span>
- </span>
- Miscellaneous variables
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p><code>$indent-amount</code> controls the amount lists, blockquotes and comments are indented.</p>
-<p><code>$include-rtl</code> controls whether RTL styles are output. Rather than include a separate <code>*-rtl.css</code> file, Zen 6 uses Drupal 8's standard <code>[dir="rtl"]</code> selector for RTL language support.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/_variables.scss</code>, line 203
- </div>
- </section>
- <section id="kssref-sass-functions" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-sass-functions">
- <span class="kss-title__ref">
- 1.5
- <span class="kss-title__permalink-hash">
- sass.functions
- </span>
- </span>
- Functions
- </a>
- </h2>
-
-
- <div class="kss-description">
- <p>Custom functions used on this site.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>_init.scss</code>, line 62
- </div>
- </section>
- <section id="kssref-sass-mixins" class="kss-section kss-section--depth-2 ">
- <div class="kss-style">
- <h2 class="kss-title kss-title--level-2">
- <a class="kss-title__permalink" href="#kssref-sass-mixins">
- <span class="kss-title__ref">
- 1.6
- <span class="kss-title__permalink-hash">
- sass.mixins
- </span>
- </span>
- Mixins
- </a>
- </h2>
-
-
- <div class="kss-description">
- <p>Custom mixins used on this site.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>_init.scss</code>, line 51
- </div>
- </section>
- <section id="kssref-sass-mixins-clearfix" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-mixins-clearfix">
- <span class="kss-title__ref">
- 1.6.1
- <span class="kss-title__permalink-hash">
- sass.mixins.clearfix
- </span>
- </span>
- clearfix()
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>Allows the bottom of an element to extend to the bottom of all floated
-children elements. @see <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>
-<p>We use the micro-clearfix, optimized for use in <code>@extend</code> where fewer <code>&</code> is
-better.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/clearfix/_clearfix.scss</code>, line 1
- </div>
- </section>
- <section id="kssref-sass-mixins-image-url" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-mixins-image-url">
- <span class="kss-title__ref">
- 1.6.2
- <span class="kss-title__permalink-hash">
- sass.mixins.image-url
- </span>
- </span>
- image-url()
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>If you include your images next to your component Sass files, you need to
-specify a url() to point from the generated CSS to the Sass source like this:</p>
-<pre><code class="lang-css">content: url(../sass/components/is-quite/long.svg);
-</code></pre>
-<p>With the <code>image-url()</code> function the path to all your components is assumed to
-start with <code>../sass/components/</code> and you just need to give it the last, short
-bit of the path in your Sass code like this:</p>
-<pre><code class="lang-scss">content: image-url(is-quite/short.svg);
-</code></pre>
-<p>If you want to point at an image that is not in the components sub-directory
-of your sass directory, you can override the default $subdirectory by
-passing it in as the first parameter of <code>image-url()</code> like this:</p>
-<pre><code class="lang-scss">content: image-url(base, grouping/blockquote.svg);
-</code></pre>
-<p>which would output <code>url(../sass/base/grouping/blockquote.svg)</code>.</p>
-
- </div>
-
- <div class="kss-parameters__title">Parameters:</div>
- <ul class="kss-parameters">
- <li class="kss-parameters__item">
- <div class="kss-parameters__name"><code>$subdirectory</code></div>
- <div class="kss-parameters__description">
- Optional. The relative path from the root of your Sass source to the sub-directory where components usually lie.
- <div class="kss-parameters__default-value">
- Defaults to: <code>$image-url-subdirectory</code>
- </div>
- </div>
- </li>
- <li class="kss-parameters__item">
- <div class="kss-parameters__name"><code>$path</code></div>
- <div class="kss-parameters__description">
- Required. The path to the image relative to the <code>$subdirectory</code>.
- </div>
- </li>
- <li class="kss-parameters__item">
- <div class="kss-parameters__name"><code>$path-to-source</code></div>
- <div class="kss-parameters__description">
- Optional. The relative path from the css build directory to the sass source directory.
- <div class="kss-parameters__default-value">
- Defaults to: <code>$image-url-path-to-source</code>
- </div>
- </div>
- </li>
- </ul>
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/image-url/_image-url.scss</code>, line 6
- </div>
- </section>
- <section id="kssref-sass-mixins-rtl" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-mixins-rtl">
- <span class="kss-title__ref">
- 1.6.3
- <span class="kss-title__permalink-hash">
- sass.mixins.rtl
- </span>
- </span>
- rtl()
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>Includes Right-To-Left language support by adding a parent selector of
-<code>[dir="rtl"]</code>. Since the dir attribute is usually defined on the html element
-of a page, using this mixin on a ruleset that matches the html element won't
-work.</p>
-<p>Can be turned off globally by setting <code>$include-rtl: false;</code>.</p>
-
- </div>
-
- <div class="kss-parameters__title">Parameters:</div>
- <ul class="kss-parameters">
- <li class="kss-parameters__item">
- <div class="kss-parameters__name"><code>$selector</code></div>
- <div class="kss-parameters__description">
- The RTL parent selector.
- <div class="kss-parameters__default-value">
- Defaults to: <code>'[dir="rtl"]'</code>
- </div>
- </div>
- </li>
- </ul>
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/rtl/_rtl.scss</code>, line 3
- </div>
- </section>
- <section id="kssref-sass-mixins-visually-hidden" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden">
- <span class="kss-title__ref">
- 1.6.4
- <span class="kss-title__permalink-hash">
- sass.mixins.visually-hidden
- </span>
- </span>
- visually-hidden()
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>Make an element visually hidden, but accessible to screen readers, etc.
-@see <a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">http://snook.ca/archives/html_and_css/hiding-content-for-accessibility</a></p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 3
- </div>
- </section>
- <section id="kssref-sass-mixins-visually-hidden--focusable" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--focusable">
- <span class="kss-title__ref">
- 1.6.5
- <span class="kss-title__permalink-hash">
- sass.mixins.visually-hidden--focusable
- </span>
- </span>
- visually-hidden--focusable()
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>Makes an element visually hidden by default, but visible when receiving
-focus.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 31
- </div>
- </section>
- <section id="kssref-sass-mixins-visually-hidden--off" class="kss-section kss-section--depth-3 ">
- <div class="kss-style">
- <h3 class="kss-title kss-title--level-3">
- <a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--off">
- <span class="kss-title__ref">
- 1.6.6
- <span class="kss-title__permalink-hash">
- sass.mixins.visually-hidden--off
- </span>
- </span>
- visually-hidden--off()
- </a>
- </h3>
-
-
- <div class="kss-description">
- <p>Turns off the visually-hidden effect.</p>
-
- </div>
-
- </div>
-
-
- <div class="kss-source kss-style">
- Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 18
- </div>
- </section>
- </article>
-
-<!-- SCRIPTS -->
-<script src="kss-assets/kss.js"></script>
-<script src="kss-assets/scrollspy.js"></script>
-<script src="kss-assets/prettify.js"></script>
-<script src="kss-assets/kss-fullscreen.js"></script>
-<script src="kss-assets/kss-guides.js"></script>
-<script src="kss-assets/kss-markup.js"></script>
-<script>
- prettyPrint();
- var spy = new ScrollSpy('#kss-node', {
- nav: '.kss-nav__menu-child > li > a',
- className: 'is-in-viewport'
- });
- var kssFullScreen = new KssFullScreen({
- idPrefix: 'kss-fullscreen-',
- bodyClass: 'kss-fullscreen-mode',
- elementClass: 'is-fullscreen'
- });
- var kssGuides = new KssGuides({
- bodyClass: 'kss-guides-mode'
- });
- var kssMarkup = new KssMarkup({
- bodyClass: 'kss-markup-mode',
- detailsClass: 'kss-markup'
- });
-</script>
-
-
-
-
-<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
-</body>
-</html>
]]>
that is inline with other text.
-