diff options
4 files changed, 817 insertions, 29 deletions
| -rw-r--r-- | docs/src/contents/buttons.pug | 179 | ||||
| -rw-r--r-- | docs/src/contents/forms.pug | 626 | ||||
| -rw-r--r-- | docs/src/contents/tables.pug | 19 | ||||
| -rw-r--r-- | docs/src/contents/typography.pug | 22 |
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug index e69de29..8f8dbb1 100644 --- a/docs/src/contents/buttons.pug +++ b/docs/src/contents/buttons.pug @@ -0,0 +1,179 @@ +p Buttons include simple button styles for actions in different types and sizes. + +.columns + .column.col-12 + button.btn default button + button.btn.btn-primary primary button + button.btn.btn-link link button + +p + | Add the #[code btn] class to #{'<a>'}, #{'<input>'} or #{'<button>'} elements for a default button. + | There are classes #[code btn-primary] and #[code btn-link] for predefined primary and link buttons. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn">default button</button> + <button class="btn btn-primary">primary button</button> + <button class="btn btn-link">link button</button> + ++docs-subheading('buttons-colors', 'Button colors') + +.columns + .column.col-12 + button.btn.btn-success success button + button.btn.btn-error error button + +p + | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color. + | If you need more button colors, please use + a(href="getting-started.html#variables-buttons") button mixins + | to create your own button color variants. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn btn-success">success button</button> + <button class="btn btn-error">error button</button> + ++docs-subheading('buttons-sizes', 'Button sizes') + +.columns + .column.col-12 + button.btn.btn-primary.btn-lg + | large + i.icon.icon-arrow-down + button.btn.btn-primary.btn-lg large button + .column.col-12 + button.btn.btn-primary + | normal + i.icon.icon-arrow-down + button.btn.btn-primary normal button + .column.col-12 + button.btn.btn-primary.btn-sm + | small + i.icon.icon-arrow-down + button.btn.btn-primary.btn-sm small button + + +p + | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. + | Also, you can add the #[code btn-block] class for a full-width button. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn btn-lg">large button</button> + <button class="btn btn-sm">small button</button> + + <button class="btn btn-block">block button</button> + + <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button> + <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button> + <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button> + +p + | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB). + +.columns + .column.col-xs-12 + button.btn.btn-action.btn-primary.btn-lg + i.icon.icon-menu + button.btn.btn-action.btn-primary + i.icon.icon-menu + button.btn.btn-action.btn-primary.btn-sm + i.icon.icon-menu + .column.col-xs-12 + button.btn.btn-action.btn-primary.btn-lg.circle + i.icon.icon-arrow-up + button.btn.btn-action.btn-primary.circle + i.icon.icon-arrow-up + button.btn.btn-action.btn-primary.btn-sm.circle + i.icon.icon-arrow-up + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button> + <button class="btn btn-action circle"><i class="icon icon-arrow-left"></i></button> + ++docs-subheading('buttons-states', 'Button states') + +p + | Add the #[code active] class for active button state style. + +.columns + .column.col-12 + button.btn.active default active + button.btn.btn-primary.active primary active + button.btn.btn-link.active link active + +p + | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style. + +.columns + .column.col-12 + button.btn.disabled(tabindex="-1") default disabled + button.btn.btn-primary(disabled="" tabindex="-1") primary disabled + button.btn.btn-link(disabled="" tabindex="-1") link disabled + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- buttons with disabled state --> + <button class="btn disabled" tabindex="-1">disabled button</button> + <button class="btn" disabled tabindex="-1">disabled button</button> + +p + | A button with the #[code loading] class can show loading indicator. + +.columns + .column.col-12 + button.btn.loading default button + button.btn.btn-primary.loading primary button + button.btn.btn-link.loading link button + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- buttons with loading state --> + <button class="btn loading">button</button> + <button class="btn btn-primary loading">primary button</button> + ++docs-subheading('buttons-groups', 'Button groups') + +.columns + .column.col-md-12 + .btn-group + button.btn first button + button.btn second button + button.btn third button + .column.col-md-12 + .btn-group.btn-group-block + button.btn.btn-primary first button + button.btn.btn-primary second button + button.btn.btn-primary third button +.columns + .column.col-md-12 + .btn-group + button.btn.btn-sm.active first button + button.btn.btn-sm second button + button.btn.btn-sm third button + .column.col-md-12 + .btn-group.btn-group-block + button.btn.btn-primary.btn-sm.active first button + button.btn.btn-primary.btn-sm second button + button.btn.btn-primary.btn-sm third button + +p + | If you want to use buttons as a group, add the #[code btn-group] class to the container. + | You can add the #[code btn-group-block] class for a full-width button group. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="btn-group btn-group-block"> + <button class="btn">first button</button> + <button class="btn">second button</button> + <button class="btn">third button</button> + </div>
\ No newline at end of file diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug index e69de29..bcfde1a 100644 --- a/docs/src/contents/forms.pug +++ b/docs/src/contents/forms.pug @@ -0,0 +1,626 @@ +p + | Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch. + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-label(for="input-example-1") Name + input#input-example-1.form-input(type="text" placeholder="Name") + .form-group + label.form-label(for="input-example-2") Email + input#input-example-2.form-input(type="email" placeholder="Email") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form input control --> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> + </div> + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-label(for="input-example-3") Message + textarea#input-example-3.form-input(placeholder="Textarea" rows="3") + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form textarea control --> + <div class="form-group"> + <label class="form-label" for="input-example-3">Message</label> + <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea> + </div> + +.columns + .column.col-6.col-xs-12 + .form-group + select.form-select + option Choose an option + option Slack + option Skype + option Hipchat + .form-group + select.form-select(multiple="") + option Choose an option + option Slack + option Skype + option Hipchat + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form select control --> + <div class="form-group"> + <select class="form-select"> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + +.columns + .column.col-6.col-xs-12 + form + .form-group + label.form-label Gender + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Female + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form radio control --> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" checked> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender"> + <i class="form-icon"></i> Female + </label> + </div> + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-switch + input(type="checkbox") + i.form-icon + | Send me emails with news and tips + .form-group + label.form-switch + input(type="checkbox" checked="") + i.form-icon + | Send me emails with news and tips + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form switch control --> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox"> + <i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + +.columns + .column.col-6.col-xs-12 + .form-group + label.form-checkbox + input(type="checkbox") + i.form-icon + | Remember me + .form-group + label.form-checkbox + input(type="checkbox" checked="") + i.form-icon + | Remember me + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form checkbox control --> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox"> + <i class="form-icon"></i> Remember me + </label> + </div> + +p + | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes. + ++docs-subheading('forms-horizontal', 'Horizontal forms') + +p + | If you want to have a horizontal form, add the #[code form-horizontal] class to the #{'<form>'} container. + | And add the #[code col-<1-12>] and #[code col-xs/sm/lg/xl-<1-12>] class to the child elements for responsive form row layout. + +.columns + .column.col-9.col-sm-12 + form.form-horizontal(action="#forms") + .form-group + .col-3.col-sm-12 + label.form-label(for="input-example-4") Name + .col-9.col-sm-12 + input#input-example-4.form-input(type="text" placeholder="Name") + .form-group + .col-3.col-sm-12 + label.form-label(for="input-example-5") Email + .col-9.col-sm-12 + input#input-example-5.form-input(type="email" placeholder="Email") + .form-group + .col-3.col-sm-12 + label.form-label Gender + .col-9.col-sm-12 + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Female + .form-group + .col-3.col-sm-12 + label.form-label Source + .col-9.col-sm-12 + select.form-select(multiple="") + option Slack + option Skype + option Hipchat + .form-group + .col-9.col-sm-12.col-ml-auto + label.form-switch + input(type="checkbox") + i.form-icon + | Send me emails with news and tips + .form-group + .col-3.col-sm-12 + label.form-label(for="input-example-6") Message + .col-9.col-sm-12 + textarea#input-example-6.form-input(placeholder="Textarea" rows="3") + .form-group + .col-9.col-sm-12.col-ml-auto + label.form-checkbox + input(type="checkbox") + i.form-icon + | Remember me + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <form class="form-horizontal"> + <div class="form-group"> + <div class="col-3 col-sm-12"> + <label class="form-label" for="input-example-1">Name</label> + </div> + <div class="col-9 col-sm-12"> + <input class="form-input" type="text" id="input-example-1" placeholder="Name"> + </div> + </div> + <!-- form structure --> + </form> + ++docs-subheading('forms-sizes', 'Form sizes') + +p + | For smaller or larger input and select controls, you could add the #[code input-sm]/#[code input-lg], #[code select-sm]/#[code select-lg] and #[code label-sm]/#[code label-lg] classes to the elements. + +.columns + .column.col-4.col-xs-12 + label.form-label.label-sm Label + .column.col-4.col-xs-12 + input.form-input.input-sm(type="text" placeholder="Name") + .column.col-4.col-xs-12 + select.form-select.select-sm + option Choose an option + option Slack + option Skype + option Hipchat +.columns + .column.col-4.col-xs-12 + label.form-label.label-lg Label + .column.col-4.col-xs-12 + input.form-input.input-lg(type="text" placeholder="Name") + .column.col-4.col-xs-12 + select.form-select.select-lg + option Choose an option + option Slack + option Skype + option Hipchat + +p + | You can add the #[code input-sm]/#[code input-lg] classes to the input-checkbox, input-radio and input-switch to have different sizes. + ++docs-subheading('forms-icons', 'Form icons') + +p + | Spectre Form components has + a(href="#icons") Spectre Icons + | support. +p + | Add a wrapper with the #[code has-icon-left]/#[code has-icon-right] class to #{'<input>'} element. + | And add the icon with #[code form-icon] class next to the #{'<input>'}. + +.columns + .column.col-4.col-xs-12 + .has-icon-left + input.form-input.input-sm(type="text" placeholder="Name") + i.form-icon.icon.icon-arrow-right + .column.col-4.col-xs-12 + .has-icon-left.tooltip(data-tooltip="Lorem ipsum dolor sit amet") + input.form-input(type="text" placeholder="Name") + i.form-icon.icon.icon-arrow-right + .column.col-4.col-xs-12 + .has-icon-left + input.form-input.input-lg(type="text" placeholder="Name") + i.form-icon.icon.icon-arrow-right +.columns + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-sm(type="text" placeholder="Name") + i.form-icon.icon.icon-check + .column.col-4.col-xs-12 + .has-icon-right + input.form-input(type="text" placeholder="Name") + i.form-icon.icon.icon-check + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-lg(type="text" placeholder="Name") + i.form-icon.icon.icon-check + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form input with Spectre icon --> + <div class="has-icon-left"> + <input type="text" class="form-input" placeholder="..."> + <i class="form-icon icon icon-check"></i> + </div> + +p + | You can use the #[code loading] class for loading or posting state. + +.columns + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-sm(type="text" placeholder="Name") + i.form-icon.loading + .column.col-4.col-xs-12 + .has-icon-right + input.form-input(type="text" placeholder="Name") + i.form-icon.loading + .column.col-4.col-xs-12 + .has-icon-right + input.form-input.input-lg(type="text" placeholder="Name") + i.form-icon.loading + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- form input with loading icon --> + <div class="has-icon-right"> + <input type="text" class="form-input" placeholder="..."> + <i class="form-icon loading"></i> + </div> + ++docs-subheading('forms-input', 'Input types') + +.columns + .column.col-9.col-sm-12 + form.form-horizontal(action="#forms") + .form-group + .col-3 + label.form-label(for="input-example-8") Email + .col-9 + input#input-example-8.form-input(type="email" placeholder="Email" value="spectre@example.com" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$") + .form-group + .col-3 + label.form-label(for="input-example-9") URL + .col-9 + input#input-example-9.form-input(type="url" placeholder="URL" value="https://github.com/picturepan2/spectre") + .form-group + .col-3 + label.form-label(for="input-example-10") Search + .col-9 + input#input-example-10.form-input(type="search" placeholder="Search") + .form-group + .col-3 + label.form-label(for="input-example-11") Tel + .col-9 + input#input-example-11.form-input(type="tel" placeholder="Tel" value="1-(888)-888-8888") + .form-group + .col-3 + label.form-label(for="input-example-12") Password + .col-9 + input#input-example-12.form-input(type="password" placeholder="Password" value="123456789") + .form-group + .col-3 + label.form-label(for="input-example-13") Number + .col-9 + input#input-example-13.form-input(type="number" placeholder="00" value="66") + .form-group + .col-3 + label.form-label(for="input-example-14") Date + .col-9 + input#input-example-14.form-input(type="date" value="2016-12-31") + .form-group + .col-3 + label.form-label(for="input-example-15") Color + .col-9 + input#input-example-15.form-input(type="color" value="#5755d9") + .form-group + .col-3 + label.form-label(for="input-example-16") File + .col-9 + input#input-example-16.form-input(type="file") + ++docs-subheading('forms-input-groups', 'Input groups') + +.columns + .column.col-xs-12 + .input-group + input.form-input.input-sm(type="text" placeholder="username") + select.form-select.select-sm + option Slack + option Skype + option Hipchat + .column.col-xs-12 + .input-group + span.input-group-addon.addon-sm slack.com/ + input.form-input.input-sm(type="text" placeholder="site name") + button.btn.btn-primary.input-group-btn.btn-sm Submit +.columns + .column.col-xs-12 + .input-group + input.form-input(type="text" placeholder="username") + select.form-select + option Slack + option Skype + option Hipchat + .column.col-xs-12 + .input-group + span.input-group-addon slack.com/ + input.form-input(type="text" placeholder="site name") + button.btn.btn-primary.input-group-btn Submit +.columns + .column.col-xs-12 + .input-group + label.form-switch + input(type="checkbox") + i.form-icon + input.form-input(type="text" placeholder="name") + .column.col-xs-12 + .input-group + label.form-checkbox + input(type="checkbox") + i.form-icon + input.form-input(type="text" placeholder="name") +.columns + .column.col-xs-12 + .input-group + input.form-input.input-lg(type="text" placeholder="username") + select.form-select.select-lg + option Slack + option Skype + option Hipchat + .column.col-xs-12 + .input-group + span.input-group-addon.addon-lg slack.com/ + input.form-input.input-lg(type="text" placeholder="site name") + button.btn.btn-primary.input-group-btn.btn-lg Submit + +p + | If you want to attach text and button along with an input, add the #[code input-group] class to the input container. + | And add the #[code input-group-addon] class to the text element and #[code input-group-btn] to the button element. + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- normal input group --> + <div class="input-group"> + <span class="input-group-addon">...</span> + <input type="text" class="form-input" placeholder="..."> + </div> + + <!-- large input group --> + <div class="input-group"> + <span class="input-group-addon addon-lg">...</span> + <input type="text" class="form-input input-lg" placeholder="..."> + </div> + + <!-- normal input group with button --> + <div class="input-group"> + <span class="input-group-addon">...</span> + <input type="text" class="form-input" placeholder="..."> + <button class="btn btn-primary input-group-btn">Submit</button> + </div> + ++docs-subheading('forms-validation', 'Form validation styles') + +p + | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements. + | Use the #[code form-input-hint] class to provide form validation success and error messages. + +.columns + .column.col-9.col-sm-12 + fieldset + legend Input + .form-group + label.form-label(for="input-example-17") Name + input#input-example-17.form-input.is-success(type="text" placeholder="Name") + p.form-input-hint The name is valid. + .form-group.has-error + label.form-label(for="input-example-18") Password + input#input-example-18.form-input(type="password" placeholder="Password") + p.form-input-hint Passwords must have at least 8 characters. + .form-group + label.form-label(for="input-example-21") Email + input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$") + p.form-input-hint The Email address is unavailable. + fieldset + legend Select + .form-group + select.form-select.is-error + option Choose an option + option Slack + option Skype + option Hipchat + p.form-input-hint The option is invalid. + .form-group.has-success + select.form-select + option Choose an option + option Slack + option Skype + option Hipchat + p.form-input-hint The option is available. + fieldset + legend Checkbox, Radio and Switch (Error state only) + .form-group + label.form-checkbox.is-error + input(type="checkbox" checked="") + i.form-icon + | I'm not a robot. + .form-group.has-error + label.form-radio + input(type="radio" name="gender" checked="") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender") + i.form-icon + | Female + .form-group + label.form-switch.is-error + input(type="checkbox" checked="") + i.form-icon + | Send me emails with news and tips + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <form> + <!-- form validation class: has-success --> + <div class="form-group has-success"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input" type="text" id="input-example-1" placeholder="..."> + <p class="form-input-hint">The name is invalid.</p> + </div> + + <!-- form validation class: is-success --> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input is-success" type="text" id="input-example-1" placeholder="..."> + <p class="form-input-hint">The name is invalid.</p> + </div> + + <!-- form validation example for checkbox, radio and switch --> + <div class="form-group"> + <label class="form-checkbox is-error"> + <input type="checkbox"> + <i class="form-icon"></i> Remember me + </label> + </div> + </form> + ++docs-subheading('forms-disabled', 'Form disabled styles') + +p + | Add the #[code disabled] attribute to the element or #{'<fieldset>'} for a disabled form components style. + +.columns + .column.col-6.col-xs-12 + form(action="#forms") + fieldset(disabled="") + .form-group + label.form-label(for="input-example-19") Name + input#input-example-19.form-input(type="text" placeholder="Name") + .form-group + label.form-label Gender + label.form-radio + input(type="radio" name="gender" disabled="") + i.form-icon + | Male + label.form-radio + input(type="radio" name="gender" disabled="") + i.form-icon + | Female + .form-group + select.form-select(disabled="") + option Choose an option + option Slack + option Skype + option Hipchat + .form-group + label.form-switch + input(type="checkbox" disabled="") + i.form-icon + | Send me emails with news and tips + .form-group + label.form-label(for="input-example-20") Message + textarea#input-example-20.form-input(placeholder="Textarea" rows="3" disabled="") + .form-group + label.form-checkbox + input(type="checkbox" disabled="") + i.form-icon + | Remember me + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <form action="#forms"> + <fieldset disabled> + <div class="form-group"> + <label class="form-label" for="input-example-19">Name</label> + <input class="form-input" type="text" id="input-example-19" placeholder="Name"> + </div> + <div class="form-group"> + <label class="form-label">Gender</label> + <label class="form-radio"> + <input type="radio" name="gender" disabled> + <i class="form-icon"></i> Male + </label> + <label class="form-radio"> + <input type="radio" name="gender" disabled> + <i class="form-icon"></i> Female + </label> + </div> + <div class="form-group"> + <select class="form-select" disabled> + <option>Choose an option</option> + <option>Slack</option> + <option>Skype</option> + <option>Hipchat</option> + </select> + </div> + <div class="form-group"> + <label class="form-switch"> + <input type="checkbox" disabled> + <i class="form-icon"></i> Send me emails with news and tips + </label> + </div> + <div class="form-group"> + <label class="form-label" for="input-example-20">Message</label> + <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea> + </div> + <div class="form-group"> + <label class="form-checkbox"> + <input type="checkbox" disabled> + <i class="form-icon"></i> Remember me + </label> + </div> + </fieldset>
\ No newline at end of file diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug index a66aa34..64e4ffd 100644 --- a/docs/src/contents/tables.pug +++ b/docs/src/contents/tables.pug @@ -27,21 +27,12 @@ p Tables include default styles for tables and data sets. td 22 September 1995 p - | Add the - code table - | class to any - = '<table>' - | element. The class will add padding, border and emphasized table header. Use the - code table-striped - | class to - = '<table>' - | to add zebra striped style. For hoverable table rows, you can add the - code table-hover - | class to enable hover style. + | Add the #[code table] class to any #{'<table>'} element. + | The class will add padding, border and emphasized table header. + | Use the #[code table-striped] class to #{'<table>'} to add zebra striped style. + | For hoverable table rows, you can add the #[code table-hover] class to enable hover style. p - | Use the - code active - | class to make <tr> element highlighted. + | Use the #[code active] class to make #{'<tr>'} element highlighted. pre.code(data-lang='HTML') code diff --git a/docs/src/contents/typography.pug b/docs/src/contents/typography.pug index 47b980a..28ffc17 100644 --- a/docs/src/contents/typography.pug +++ b/docs/src/contents/typography.pug @@ -40,9 +40,8 @@ pre.code(data-lang='HTML') +docs-subheading('typography-paragraphs', 'Paragraphs') p - | Lorem ipsum dolor sit amet, consectetur - a(href='#typography') adipiscing elit. Praesent risus leo, dictum in vehicula sit amet - | , feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. + | Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit]. + | Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. p | Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs. @@ -127,7 +126,7 @@ p.h5 small(lang='zh-Hans') 你好 | , small(lang='ja') こんにちは - | , + | , small(lang='ko') 안녕하세요 p.h6 Chinese (Simplified) @@ -142,9 +141,7 @@ p.h6 Korean p(lang='ko') | 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다. p - | Use the - code lang - | attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. + | Use the #[code lang] attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support. pre.code(data-lang='HTML') code @@ -154,11 +151,7 @@ pre.code(data-lang='HTML') <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p> p - | And you can use the - code cjk - | class or the - code lang - | attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. + | And you can use the #[code cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability. p(lang='ja') u 祇園 @@ -178,9 +171,8 @@ pre.code(data-lang='HTML') +docs-subheading('typography-fonts', 'Fonts') p - | Spectre sets the most common and best - code font-family - | for each OS with fallback support in old systems. There are also fonts targeted East Asian typography. + | Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems. + | There are also fonts targeted East Asian typography. pre.code code |