--- title: Skeleton tagline: simple document date: 2021-01-01 00:00:00 description: > Simple documents are used quite often. If the number of chapters is about or less than three and the document is small in size. This document type does not use any (local) Asciidoc include files or attributes. categories: [ Asciidoc, Skeleton ] tags: [ Knowledge, Skeleton, Document ] permalink: /pages/public/skeleton/simple/ regenerate: false resources: [] resource_options: - toccer: collapseDepth: 4 - attic: padding_top: 400 padding_bottom: 50 opacity: 0.5 slides: - url: /assets/images/pages/skeleton/antonino-visalli-1920x1280.jpg alt: Photo by Antonino Visalli on Unsplash alignY: top badge: type: unsplash author: Antonino Visalli href: https://unsplash.com/@_visalli --- // Page Initializer // ============================================================================= // Enable the Liquid Preprocessor :page-liquid: // Set (local) page attributes here // ----------------------------------------------------------------------------- // :page--attr: :url-fontawesome--home: https://fontawesome.com/ :url-fontawesome--icons: https://fontawesome.com/icons?d=gallery/ :url-fontawesome--get-started: https://fontawesome.com/get-started/ :url-mdi--home: https://materialdesignicons.com/ :url-mdi-icons--cheatsheet: https://cdn.materialdesignicons.com/3.3.92/ :url-iconify--home: https://iconify.design/ :url-iconify--icon-sets: https://iconify.design/icon-sets/ :url-iconify--medical-icons: https://iconify.design/icon-sets/medical-icon/ :url-iconify--brand-icons: https://iconify.design/icon-sets/logos/ :url-roundtrip--mdi-icons: /pages/public/learn/roundtrip/mdi_icon_font/#material-design-icons :url-roundtrip--fontawesome-icons: /pages/public/learn/roundtrip/mdi_icon_font/#fontawesome-icons :url-roundtrip--iconify-icons: /pages/public/learn/roundtrip/mdi_icon_font/#iconify-icons :url-roundtrip--asciidoc-extensions: /pages/public/learn/roundtrip/asciidoc_extensions/ // Load Liquid procedures // ----------------------------------------------------------------------------- {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%} // Load page attributes // ----------------------------------------------------------------------------- {% include {{load_attributes}} scope="global" %} // Page content // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The Asciidoc *skeleton simple-document* a helper for setting up a base file and folder structure for simple-document AsciiDoc pages based on _Jekyll_ and _J1 Template_. You need *both* to use this skeleton creating AsciiDoc documents from it. Simple documents are used quite often for documents of a website. If the number of chapters is about or less than three and the document is small in size, simple documents should fit. This document type is based on a *single* Asciidoc document and does *not* use any (local) Asciidoc include files or attributes. [NOTE] ==== .Moving documents based on a J1 Skeleton All J1 Asciidoc Skeletons are fully *relocateable* and can be placed in any subfolder of your Jekyll site. ==== [role="mb-5"] *Happy Jekylling!* == Chapter J1 Template support popular icons font sets out-of-the-box: * link:{url-mdi--home}[Material Design Icons, {browser-window--new}] (MDI) * link:{url-fontawesome--home}[FontAwesome Icons V5, {browser-window--new}] (FA) * link:{url-iconify--home}[Iconify Icons, {browser-window--new}] (II) The icon sets MDI and FA are very good in design and have a rich set of different icons for many categories used for the Web. See below some details for link:{url-roundtrip--mdi-icons}[Material Design Icons, {browser-window--new}] and link:{url-roundtrip--fontawesome-icons}[FontAwesome Icons, {browser-window--new}]. Iconify icons is not a locally stored icon-set like MDI or FA. All icons are loaded over the Internet using the so-called *Unified OpenSource Icon Framework*. See section link:{url-roundtrip--iconify-icons}[Iconify Icons, {browser-window--new}] for more information. === Section The primary icon-set for J1 Template is link:{url-mdi--home}[Material Design Icons, {browser-window--new}], because it is extremely rich set providing more than 5900+ icons for the current version (v5.9.55). From a design perspective, _MDI_ has an excellen *Material Design* support an comes with the original icon set created by _Google_ build-in. _Material Design Icons_ (MDI) is a beneficial design resource for Web Design that is based on _Google_'s Material Design. _MDI_ is a community-driven project to create an increased number of icons based on _Google_'s official repository and MD style specification. ==== Subsection _MDI_ is a growing collection to allow designers and developers targeting various platforms to download icons in the format, color and size they need for any project. The repo contains today 2100+ icons plus converted icons from the official set created by _Google_. .Material Design Icons [cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"] |=============================================================================== |Size |Modifier |Markup |Render |1x |no modifier set |All `icon_name` can be found on the Preview page for MDI Icon Previewer + [source, adoc, role="noclip"] ---- mdi:account[1x] ---- |mdi:account[1x] |3x |no modifier set |All `icon_name` can be found on the Preview page for MDI Icon Previewer + [source, adoc, role="noclip"] ---- mdi:account[3x] ---- |mdi:account[3x] |5x |no modifier set |All `icon_name` can be found on the Preview page for MDI Icon Previewer [source, adoc, role="noclip"] ---- mdi:account[5x] ---- |mdi:account[5x] |5x |`mdi-rotate-45` |Rotate 45 degrees [source, adoc, role="noclip"] ---- mdi:account[5x mdi-rotate-45] ---- |mdi:account[5x mdi-rotate-45] |5x |`mdi-rotate-315` |Rotate 315 degrees [source, adoc, role="noclip"] ---- mdi:account[5x mdi-rotate-315] ---- |mdi:account[5x mdi-rotate-315] |5x |`mdi-light` + `mdi-flip-v` |Colour set to MDI Light (Grey) and flipped vertical [source, adoc, role="noclip"] ---- mdi:alert[5x mdi-light mdi-flip-v] ---- |mdi:alert[5x mdi-light mdi-flip-v] |5x |`md-indigo` |Colour set to MDI Indigo [source, adoc, role="noclip"] ---- mdi:alert[5x md-indigo] ---- |mdi:account[5x md-indigo] |5x |`md-pink` |Colour set to MDI Pink [source, adoc, role="noclip"] ---- mdi:alert[5x md-pink] ---- |mdi:account[5x md-pink] |5x |`mdi-spin` |Added animation of type Rotate (Spin) [source, adoc, role="noclip"] ---- mdi:loading[5x mdi-spin] ---- |mdi:loading[5x mdi-spin] |5x |`md-red-900` + `mdi-pulsed` |Colour set to MDI Dark Red and added animation of type Pulsed [source, adoc, role="noclip"] ---- mdi:heart[5x md-red-900 mdi-pulsed] ---- |mdi:heart[5x md-red-900 mdi-pulsed] |=============================================================================== NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline macro `mdi:` is available to place icons where ever you want. See more about this in section link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions, {browser-window--new}] _J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The icon set is fully integrated and can be used out-of-the-box.