title: Skeleton tagline: simple document date: 2021-01-01 00:00:00 +100 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: [ Knowledge ] tags: [ Asciidoc, Skeleton, Document ]
sitemap: false advertising: false comments: false
robots:
index: false follow: false
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: <attr-value> :url-fontawesome–home: fontawesome.com/ :url-fontawesome–icons: fontawesome.com/icons?d=gallery/ :url-fontawesome–get-started: fontawesome.com/get-started/
:url-mdi–home: materialdesignicons.com/ :url-mdi-icons–cheatsheet: cdn.materialdesignicons.com/3.3.92/
:url-iconify–home: iconify.design/ :url-iconify–icon-sets: iconify.design/icon-sets/ :url-iconify–medical-icons: iconify.design/icon-sets/medical-icon/ :url-iconify–brand-icons: 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
SkeletonAll
J1
Asciidoc Skeletons are fully relocateable and can be placed in any subfolder of yourJekyll
site.¶ ↑
- role=“mb-5”
-
*Happy Jekylling!*
Chapter¶ ↑
J1
Template support popular icons font sets out-of-the-box:-
{url-mdi–home}[Material Design Icons, {browser-window–new}] (MDI)
-
{url-fontawesome–home}[FontAwesome Icons V5, {browser-window–new}] (FA)
-
{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 {url-roundtrip–mdi-icons}[Material Design Icons, {browser-window–new}] and {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 {url-roundtrip–iconify-icons}[Iconify Icons, {browser-window–new}] for more information.
Section¶ ↑
The primary icon-set for
J1
Template is {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”
|3x |no modifier set |All `icon_name` can be found on the Preview page for MDI Icon Previewer +
- source, adoc, role=“noclip”
|5x |no modifier set |All `icon_name` can be found on the Preview page for MDI Icon Previewer
- source, adoc, role=“noclip”
|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 {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.
-