diff options
Update the Docs completely
1 files changed, 108 insertions, 0 deletions
| -rw-r--r-- | docs/src/components/tiles.pug | 108 |
diff --git a/docs/src/components/tiles.pug b/docs/src/components/tiles.pug new file mode 100644 index 0000000..25bd042 --- /dev/null +++ b/docs/src/components/tiles.pug @@ -0,0 +1,108 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'tiles' + - var parent = 'components' + - var title = 'Tiles - Components - Spectre.css CSS Framework' + - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.' + +block docs-content + +docs-heading('tiles', 'Tiles') + include ../_layout/_ad-g.pug + + p Tiles are repeatable or embeddable information blocks. + + .docs-demo.columns + .column.col-9.col-sm-12 + .tile + .tile-icon + figure.avatar.avatar-lg + img(src="../img/avatar-3.png" alt="Avatar") + .tile-content + p.tile-title The Avengers + p.tile-subtitle.text-gray + | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle... + .tile-action + button.btn.btn-primary Join + button.btn Contact + .column.col-9.col-sm-12 + .tile + .tile-icon + figure.avatar.avatar-lg + img(src="../img/avatar-2.png" alt="Avatar") + .tile-content + p.tile-title The S.H.I.E.L.D. + p.tile-subtitle.text-gray The Strategic Homeland Intervention, Enforcement, and Logistics Division... + p + button.btn.btn-primary.btn-sm Join + button.btn.btn-sm Contact + + p + | Add a container with the #[code tile] class. + | And add child elements with the #[code tile-icon], #[code tile-content] or/and #[code tile-action] classes. + | The #[code tile-icon] and #[code tile-action] are optional. + p + | There are #[code tile-title] and #[code tile-subtitle] classes for title and subtitle text styles. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="tile"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-file centered"></i> + </div> + </div> + <div class="tile-content"> + <p class="tile-title">The Avengers</p> + <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> + </div> + <div class="tile-action"> + <button class="btn btn-primary">Join</button> + </div> + </div> + + +docs-subheading('tiles-compact', 'Compact tiles') + + p + | There is compact version of Tiles component, which is often used as contact and file info blocks. + p + | Add the #[code tile-centered] class to the container #[code tile]. + | The #[code tile-icon], #[code tile-content] and #[code tile-action] will be vertically centered. + + .docs-demo.columns + .column.col-6.col-md-9.col-xs-12 + .tile.tile-centered + .tile-icon + .example-tile-icon + i.icon.icon-mail.centered + .tile-content + .tile-title spectre-docs.pdf + .tile-subtitle.text-gray 14MB · Public · 1 Jan, 2017 + .tile-action + button.btn.btn-link.btn-action + i.icon.icon-more-vert + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <div class="tile tile-centered"> + <div class="tile-icon"> + <div class="example-tile-icon"> + <i class="icon icon-file centered"></i> + </div> + </div> + <div class="tile-content"> + <div class="tile-title">spectre-docs.pdf</div> + <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> + </div> + <div class="tile-action"> + <button class="btn btn-link"> + <i class="icon icon-more-vert"></i> + </button> + </div> + </div> + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug
\ No newline at end of file |