j1_template_mde 2018.4.10

data/lib/starter_web/pages/legal/en/500_support.adoc

@@ -0,0 +1,13 @@
+---
+title:                                  Support
+tagline:                                Where to get help
+description:                            Where to get help and support
+
+tags:                                   [ Support ]
+permalink:                              /pages/legal/de/support/
+regenerate:                             false
+---
+
+== Support
+
+=== Support for ...

data/lib/starter_web/pages/panel/100_intro_panel.adoc

@@ -0,0 +1,151 @@
+---
+title:                                  J1 Template
+tagline:                                Responsive Webs using J1 Template
+description:                            Responsive Webs using J1 Template
+author:                                 J1 Team
+
+category:                               manuals
+tags:                                   [ Jekyll, Template, Responsive, Web ]
+index:                                  []
+
+resources:                              [ lightbox, carousel ]
+permalink:                              /pages/panel/intro_panel/
+regenerate:                             false
+
+resource_options:
+  - toccer:
+      collapseDepth:                    2
+---
+
+
+[[responsive-design]]
+== Full Responsive
+
+A good user experience browsing a Web is one of the most important features
+a site has to offer as a must - beside excellent content. Presenting content
+at it's best on all devices, for all window sizes makes an excellent Web
+brilliant. J1 Template support your Web for full responsiveness, for the
+best user experience on all modern devices.
+
+=== Bootstrap 4 Integration
+
+To not confuse your audience by irritating user interface (UI) components,
+J1 Template is based on Bootstrap, one of the  most popular HTML, CSS, and JS
+framework used today. J1 is using Bootstrap V4, the last current version to
+support your readers by common elements for navigation, data input, tables
+and many more.
+
+For you development projects, Bootstrap simplifies HTML programming a lot,
+offer excellent JS support for interactive components like navigation elements,
+cards, forms etc.
+
+[[current-technology]]
+== HTML5 · CSS3 · JS
+
+The Internet is a rapid changing world. Like the fashion industries, new trends
+are set every year. J1 Template combines modern technologies for the world
+of static Webs to make a Site uniqe using current standards in terms of Web
+Development, languages and tools.
+
+
+=== HTML5 + CSS3
+
+J1 is using HTML5 for structuring and presenting content on the World Wide Web.
+The fifth and current major version of the HTML standard offer a lot of new
+features including detailed processing models to encourage more interoperable
+implementations. It extends, improves and rationalizes the markup available for
+documents and introduces markup and application programming interfaces (APIs)
+for complex web applications. For same reasons, HTML5 is also a good choice for
+modern cross-platform mobile applications, because it includes features
+designed with low-powered devices in mind.
+
+Many new syntactic features are included with HTML5. To natively include and
+handle multimedia and graphical content, the new `<video>`, `<audio>` and
+`<canvas>` elements were added. Support for scalable vector graphics (SVG)
+content and MathML for mathematical formulas.
+
+To enrich the *semantic* content of documents, new page structure elements
+such as `<main>`, `<section>`, `<article>`,`<header>` or `<footer>` (and many
+more) are added. Better structured HTML code can help people having disabilities
+to read the pages presented.
+
+CSS is designed to enable the separation of presentation and content, including
+layout, colors, and fonts for example. This separation improves content
+accessibility, provide more flexibility and control in the presentation, enable
+multiple web pages to share formatting by specifying the relevant CSS in
+separate files and reduce complexity and repetition in the structural content.
+
+Separation of formatting and content also makes it feasible to present the
+same markup page in different styles for different rendering methods, such
+as on-screen, in print, by voice (via speech-based browser or screen reader),
+and on Braille-based tactile devices. CSS also has rules for alternate
+formatting if the content is accessed on a mobile device.
+
+CSS3 is divided into several separate documents called "modules". Each module
+adds new capabilities or extends features defined in formaer CSS 2, preserving
+backward compatibility.
+
+HTML5 in combination with CSS3 allows to create modern, modular code for Web
+pages that can be viewed on all modern devices like Mobiles, Tablets or the
+classic Desktop PC. The new HTML5 elements plus CSS3 modules can be used as a
+replacement for e.g. Adobe Flash to build modern Web pages based on open
+standards.
+
+=== Javascript
+
+HTML5 and CSS3 can do a lot. Content placement and basic methods for the
+dynamic of elements can be done using pure HTML5 and CSS3 methods. For more
+complex solutions like Apps and Modules the support of Javascript is needed.
+
+J1 Template has build-in a wide range of JS powered Apps and Modules to
+support a Web site for e.g. the navigation, for presenting image data in
+galeries, lightboxes and so on.
+
+
+[[launch-ready]]
+== Start in No Time
+
+The base idea of J1 Template is to give all people a tool set at their hands
+to create a Web with no need to start by Web Development or Web Design from
+the beginning.
+
+A Site based on J1 is structured by the underlying template methods and engines.
+Using J1, you can instantly start a Web project by creating you content, not by
+digging in the deep of Web development.
+
+=== Create your Web
+
+J1 is highly customizeable. Based on pure configuration, a unique Web can be
+created. J1 creates static Webs using Jekyll as the base engine. Static Webs
+are fast, secure but simple to manage. No complex database systems are needed.
+
+To present a static Web, only a Web server environment is needed. To publish a
+Web on the Internet, many possible platforms can be used like e.g. at Github -
+for free!
+
+The Internet is not a peaceful place. Every Site published to the public is
+attacked from the first second if published. Static Webs are robust, fast and
+that's import: *not* hackable. No offender attacking your Web is able to break
+your Site. Because it's static or in other words: unchangeable, unbreakable
+from outside.
+
+This makes a static Web for the better.
+
+=== Modules and Apps
+
+It's predictable what base components are needed for a modern Web. For Content
+Management Systems (CMS) like Joomla, Wordpress or Drupal a huge number of
+modules are available to extend a Web by e.g. Apps like image galleries, video
+players, calendars etc.
+
+This is a bit different for static Webs as they don't have a central
+Management System as CMS offer to integrate external code. There no ecosystem,
+no marketplace to get Apps and Modules from. It is not that complex to integrate
+external components into the world of Jekyll but one of the objectives of J1 is
+to give a featured toolset to all people without the need to install, to
+integrate components that are to be expected as a need.
+
+A rich set Modules and Apps are included for common needs of a Web like a
+flexible navigation system, a local search, lightboxes to present pictures,
+little helpers for scrolling or to create TOCs (table of contents) for a
+page.

data/lib/starter_web/pages/previewer/000_includes/attributes.asciidoc

@@ -0,0 +1,75 @@
+////
+Asciidoc includes
+////
+
+tag::urls[]
+
+:google-md-icons:                                 https://material.io/icons/
+:google-github-md-icons:                          https://github.com/google/material-design-icons
+:material-design-icons-home:                      https://materialdesignicons.com/
+:material-design-icons-github:                    https://github.com/Templarian/MaterialDesign
+:stackoverflow-i-or-span-for-font-icons:          https://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span
+
+
+:bs_themes:                                       https://themes.getbootstrap.com/
+:bs_expo:                                         https://expo.getbootstrap.com/
+
+:bs_doc_v4:                                       http://getbootstrap.com/docs/4.0/getting-started/introduction/
+:bs_doc_examples:                                 http://getbootstrap.com/docs/4.0/examples/
+
+:bs_doc_content_code:                             https://getbootstrap.com/docs/4.0/content/code/
+:bs_doc_content_figures:                          https://getbootstrap.com/docs/4.0/content/figures/
+:bs_doc_content_images:                           https://getbootstrap.com/docs/4.0/content/images/
+:bs_doc_content_typography:                       https://getbootstrap.com/docs/4.0/content/typography/
+:bs_doc_content_tables:                           https://getbootstrap.com/docs/4.0/content/tables/
+
+:bs_doc_components_alerts:                        http://getbootstrap.com/docs/4.0/components/alerts/
+:bs_doc_components_badges:                        http://getbootstrap.com/docs/4.0/components/badge/
+:bs_doc_components_breadcrumb:                    http://getbootstrap.com/docs/4.0/components/breadcrumb/
+:bs_doc_components_buttons:                       http://getbootstrap.com/docs/4.0/components/buttons/
+:bs_doc_components_button_group:                  http://getbootstrap.com/docs/4.0/components/button-group/
+:bs_doc_components_cards:                         http://getbootstrap.com/docs/4.0/components/card/
+:bs_doc_components_carousel:                      http://getbootstrap.com/docs/4.0/components/carousel/
+:bs_doc_components_collapse:                      http://getbootstrap.com/docs/4.0/components/collapse/
+:bs_doc_components_dropdowns:                     http://getbootstrap.com/docs/4.0/components/dropdowns/
+:bs_doc_components_forms:                         http://getbootstrap.com/docs/4.0/components/forms/
+:bs_doc_components_input_group:                   http://getbootstrap.com/docs/4.0/components/input-group/
+:bs_doc_components_jumbotron:                     http://getbootstrap.com/docs/4.0/components/jumbotron/
+:bs_doc_components_list_group:                    http://getbootstrap.com/docs/4.0/components/list-group/
+:bs_doc_components_modal:                         http://getbootstrap.com/docs/4.0/components/modal/
+:bs_doc_components_navs:                          http://getbootstrap.com/docs/4.0/components/navs/
+:bs_doc_components_navbar:                        http://getbootstrap.com/docs/4.0/components/navbar/
+:bs_doc_components_pagination:                    http://getbootstrap.com/docs/4.0/components/pagination/
+:bs_doc_components_popovers:                      http://getbootstrap.com/docs/4.0/components/popovers/
+:bs_doc_components_progress:                      http://getbootstrap.com/docs/4.0/components/progress/
+:bs_doc_components_tooltips:                      http://getbootstrap.com/docs/4.0/components/tooltips/
+
+:bs_doc_utils_borders:                            http://getbootstrap.com/docs/4.0/utilities/borders/
+:bs_doc_utils_clearfix:                           http://getbootstrap.com/docs/4.0/utilities/clearfix/
+:bs_doc_utils_close_icon:                         http://getbootstrap.com/docs/4.0/utilities/close-icon/
+:bs_doc_utils_colors:                             http://getbootstrap.com/docs/4.0/utilities/colors/
+:bs_doc_utils_display:                            http://getbootstrap.com/docs/4.0/utilities/display/
+:bs_doc_utils_embeds:                             http://getbootstrap.com/docs/4.0/utilities/embed/
+:bs_doc_utils_flex:                               http://getbootstrap.com/docs/4.0/utilities/flex/
+:bs_doc_utils_float:                              http://getbootstrap.com/docs/4.0/utilities/float/
+:bs_doc_utils_image_replacement:                  http://getbootstrap.com/docs/4.0/utilities/image-replacement/
+:bs_doc_utils_screenreaders:                      http://getbootstrap.com/docs/4.0/utilities/screenreaders/
+:bs_doc_utils_sizing:                             http://getbootstrap.com/docs/4.0/utilities/sizing/
+:bs_doc_utils_spacing:                            http://getbootstrap.com/docs/4.0/utilities/spacing/
+:bs_doc_utils_text:                               http://getbootstrap.com/docs/4.0/utilities/text/
+:bs_doc_utils_vertical_alignment:                 http://getbootstrap.com/docs/4.0/utilities/vertical-align/
+:bs_doc_utils_visibility:                         http://getbootstrap.com/docs/4.0/utilities/visibility/
+
+:bs_doc_migration_to_v4:                          http://getbootstrap.com/docs/4.0/migration/
+
+end::urls[]
+
+
+tag::tags[]
+
+:figure-caption:                                  Figure
+
+:lightbox-image-data-base-color-palette:          "pages/previewer/bs-color-palette.png, Bootstrap base color palette"
+:lightbox-image-data-md-color-palette:            "pages/previewer/material-design-color-palette.png, Material Design color palette"
+
+end::tags[]

data/lib/starter_web/pages/previewer/000_includes/tables/mdi_icons/100_absolute_sizes.asciidoc

@@ -0,0 +1,39 @@
+
+
+[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+|===============================================================================
+|Class |Result |Code
+
+|`mdi-18px`
+|pass:[<i class="mdi mdi-18px mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-18px mdi-account"></i>
+----
+
+|`mdi-24px`
+|pass:[<i class="mdi mdi-24px mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-24px mdi-account"></i>
+----
+
+|`mdi-36`
+|pass:[<i class="mdi mdi-36px mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-36px mdi-account"></i>
+----
+
+|`mdi-48px`
+|pass:[<i class="mdi mdi-48px mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-48px mdi-account"></i>
+----
+
+|===============================================================================

data/lib/starter_web/pages/previewer/000_includes/tables/mdi_icons/110_bs_grid_sizes.asciidoc

@@ -0,0 +1,47 @@
+
+
+[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+|===============================================================================
+|Class |Result |Code
+
+|`mdi-xs`
+|pass:[<i class="mdi mdi-xs mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-xs mdi-account"></i>
+----
+
+|`mdi-sm`
+|pass:[<i class="mdi mdi-sm mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-sm mdi-account"></i>
+----
+
+|`mdi-md`
+|pass:[<i class="mdi mdi-md mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-md mdi-account"></i>
+----
+
+|`mdi-lg`
+|pass:[<i class="mdi mdi-lg mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-lg mdi-account"></i>
+----
+
+|`mdi-xl`
+|pass:[<i class="mdi mdi-xl mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-xl mdi-account"></i>
+----
+
+|===============================================================================

data/lib/starter_web/pages/previewer/000_includes/tables/mdi_icons/120_relative_sizes.asciidoc

@@ -0,0 +1,87 @@
+
+
+[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+|===============================================================================
+|Class |Result |Code
+
+|`mdi-1x`
+|pass:[<i class="mdi mdi-1x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-1x mdi-account"></i>
+----
+
+|`mdi-2x`
+|pass:[<i class="mdi mdi-2x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-2x mdi-account"></i>
+----
+
+|`mdi-3x`
+|pass:[<i class="mdi mdi-3x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account"></i>
+----
+
+|`mdi-4x`
+|pass:[<i class="mdi mdi-4x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-4x mdi-account"></i>
+----
+
+|`mdi-5x`
+|pass:[<i class="mdi mdi-5x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-5x mdi-account"></i>
+----
+
+|`mdi-6x`
+|pass:[<i class="mdi mdi-6x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-6x mdi-account"></i>
+----
+
+|`mdi-7x`
+|pass:[<i class="mdi mdi-7x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-7x mdi-account"></i>
+----
+
+|`mdi-8x`
+|pass:[<i class="mdi mdi-8x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-1x mdi-account"></i>
+----
+
+|`mdi-9x`
+|pass:[<i class="mdi mdi-9x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-9x mdi-account"></i>
+----
+
+|`mdi-10x`
+|pass:[<i class="mdi mdi-10x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-10x mdi-account"></i>
+----
+
+|===============================================================================

data/lib/starter_web/pages/previewer/000_includes/tables/mdi_icons/200_rotate.asciidoc

@@ -0,0 +1,71 @@
+
+
+[cols="2,1,9a", options="header", role="table-responsive mb-5"]
+|===============================================================================
+|Class |Result |Code
+
+|no
+|pass:[<i class="mdi mdi-3x mdi-account"></i>]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account"></i>
+----
+
+|`mdi-rotate-45`
+|pass:[<i class="mdi mdi-3x mdi-account mdi-rotate-45">]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account mdi-rotate-45">
+----
+
+|`mdi-rotate-90`
+|pass:[<i class="mdi mdi-3x mdi-account mdi-rotate-90">]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account mdi-rotate-90">
+----
+
+|`mdi-rotate-135`
+|pass:[<i class="mdi mdi-3x mdi-account mdi-rotate-135">]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account mdi-rotate-135">
+----
+
+|`mdi-rotate-180`
+|pass:[<i class="mdi mdi-3x mdi-account mdi-rotate-180">]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account mdi-rotate-45">
+----
+
+|`mdi-rotate-225`
+|pass:[<i class="mdi mdi-3x mdi-account mdi-rotate-225">]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account mdi-rotate-225">
+----
+
+|`mdi-rotate-270`
+|pass:[<i class="mdi mdi-3x mdi-account mdi-rotate-270">]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account mdi-rotate-270">
+----
+
+|`mdi-rotate-315`
+|pass:[<i class="mdi mdi-3x mdi-account mdi-rotate-315">]
+|
+[source, html]
+----
+<i class="mdi mdi-3x mdi-account mdi-rotate-315">
+----
+
+|===============================================================================