# ------------------------------------------------------------------------------ # ~/_data/components/j1_panel.yml # Template specific configuration data to configure panel lanes # # Product/Info: # https://jekyll-one.com # # Copyright (C) 2019 Juergen Adams # # J1 Template is licensed under the MIT License. # See: https://github.com/jekyll-one/j1_template_mde/blob/master/LICENSE # ------------------------------------------------------------------------------ # NOTE: # By J1 template, "Liquid Procedures" are being used intensively. To load # HTML data for a layout, the loader procedure places the data based this # YAML data file into the REGION specified with a LANE. # ------------------------------------------------------------------------------ # ------------------------------------------------------------------------- # GLOBALS # ------------------------------------------------------------------------- # # THE GLOBALS sequence (array) contains general parameters used for # ALL resource definitions # # data_path # --------------------------------------------------------------- # All data items displayed by a panel are being read from a # data file automatically generated from that configuration. # AJAX get method is used to supply the panel with respective # the HTML code at the time the panel is loaded (by the # J1 Adapter for J1 Template). # # values: string # default: /assets/data/panel/index.html # global: data_path: /assets/data/panel/index.html # ------------------------------------------------------------------------- # PANEL # ------------------------------------------------------------------------- # # A panel (collection) consists in multiple elements (e.g. cards) # placed in a lane. Each panel is defined as (a hash) of key|value # pairs. The structure depends on the panel type. # Panels are loaded dynamically as asychronous AJAX loads from a # web server - for default the same web server the site is served. # The panel name (key) is used as an id to identify the HTML (
) # element the panel is loaded to. # # The first config block 'lane' defines general parameters of a panel, # the following paramaters defining the cards that are places into # the (panel) lane. # Each box (array element) specifies the content of a (panel) box that # is automatically placed into the lane from the left to the right as # defined from the top down to the bottom of the panel|box configuration # # The size of an box element is automatically calculated based on the # number of cards defined with the panel. It is recommended to NOT use # more than 3 cards per lane (4 cards as a maximum). This makes it sure # that each box will have a appropriate size (width) to display your # information. # # NOTE: # A lane (internally) consists in 12 columns (based on Bootstrap's # Grid System). For example, if 3 cards are defined, the size each # box is being calculated to a width of 4 columns to span them equally # in size (width) across the lane. # panel # -------------------------------------------------------------------- # Defines panel details of a specific type # # id # --------------------------------------------------------------- # Specifies the ID of a panel. # # type: string # default: no defaults # # type # --------------------------------------------------------------- # Specifies the panel type # # type: string # values: intro|download|quote|quote_parallax|teaser # default: no defaults # # lane_span # --------------------------------------------------------------- # Specifies the span width of a panel inside a lane. # # type: string # values: fixed|fluid # default: fixed # # icon_family # --------------------------------------------------------------- # Specifies the ... # # type: string # default: no defaults # # style # --------------------------------------------------------------- # Specifies the ID of a panel. # # type: string # default: no defaults # # raides # --------------------------------------------------------------- # Specifies the raised level of the cards used for a panel. # # values: number [0 .. 25] # default: 3 # # cards # --------------------------------------------------------------- # Groups ... # # title # values # # icon_family # values # # icon # values # # text # values # # href # values # # ------------------------------------------------------------------------------ # QUOTE Panels, defines ALL quote|parallax panels # # # type # ------------------------------------------------------------ # values: quote|quote_parallax # # # id # ------------------------------------------------------------ # Set an ID on the HTML element for the parallax quote|banner. # The ID is used to dynamically change the parallax quote for # individual values. # # values: string # default: empty # # quote # ------------------------------------------------------------ # The cite text to be displayed with the banner. # # values: string (HTML) # default: empty # # source # ------------------------------------------------------------ # The cite author to be displayed with the banner. # # values: quote_parallax # default: empty # # gridify # ------------------------------------------------------------ # If enabled, a grit pattern is placed over the background # image. This puts some "noise" on the image to focus more # on the cite rather than the (background) image. # # values: boolean (true|false) # default: true # # gridifier # ------------------------------------------------------------ # Pixel image used to gridify the background image of the # banner. # # values: image path|name (string) # default: /assets/images/patterns/gridtile.png # # darken # ------------------------------------------------------------ # Sets the lightning for the banner|background image. As # higher the value for darken as less is the (background) # light. Values are out of the range from 1 (light) to 9 (dark). # Useful to focus on the quote|text rather than the background # image. # # values: number [1 .. 9] # default: 3 # # background # ------------------------------------------------------------ # Sets the background image of the banner. If no image is # specified, the default images is taken. # # values: image path|name (string) # default: /assets/images/quotes/default.png # # ------------------------------------------------------------------------------ # ------------------------------------------------------------------------------ # PANELS, defines ALL panels used for the site panels: # ------------------------------------------------------------------ # INTRO panel # ------------------------------------------------------------------ # -------------------------------------------------------- # home_intro_panel # - panel: enabled: true id: home_intro_panel type: intro_panel icon_family: MDI style: light raised: lane_span: fixed cards: - card: enabled: true type: text title: J1 Template tagline: Full Responsive icon: responsive icon_size: 5x icon_color: md-indigo-50 text: > The Web is everywhere. J1 Template supports all Hardware. For best results on PCs, Tablets and SmartPhones.

Follow Your Visitors. buttons: - button: text: Read More class: btn-info btn-raised btn-round btn-flex icon: eye icon_size: lg icon_color: md-indigo-50 href: /pages/public/panels/intro_panel#responsive-design - card: enabled: true title: J1 Template tagline: HTML5 · CSS3 · JS icon: language-html5 icon_size: 5x icon_color: md-indigo-50 text: > Best Design, Current Technology. Present your Products, Projects, Services and your Team Team at it's best.

Make your Web Site unique. buttons: - button: text: Read More class: btn-info btn-raised btn-round btn-flex icon: eye icon_size: lg icon_color: md-indigo-50 href: /pages/public/panels/intro_panel#current-technology - card: enabled: true title: J1 Template tagline: Start in No Time icon: clock icon_size: 5x icon_color: md-indigo-50 text: > No programming is needed. For J1 Template, a large number of building blocks are available to manage the job.

Configure what needs to be done. buttons: - button: text: Read More class: btn-info btn-raised btn-round btn-flex icon: eye icon_size: lg icon_color: md-indigo-50 href: /pages/public/panels/intro_panel#launch-ready # -------------------------------------------------------- # roundtrip_example_panel # - panel: enabled: true id: roundtrip_example_panel type: intro_panel icon_family: MDI style: light raised: lane_span: fixed cards: - card: enabled: true type: text title: Your Topic tagline: Feature 1 icon: video icon_size: 5x icon_color: md-indigo-50 text: > At vero eos et accusam et dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Lorem ipsum dolor sit amet. buttons: - button: text: Read More class: btn-info btn-raised btn-round btn-flex icon: eye icon_size: lg icon_color: md-indigo-50 href: javascript:void(0) - card: enabled: true title: J1 Template title: Your Topic tagline: Feature 2 icon: speaker icon_size: 5x icon_color: md-indigo-50 text: > At vero eos et accusam et dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Lorem ipsum dolor sit amet. buttons: - button: text: Read More class: btn-info btn-raised btn-round btn-flex icon: eye icon_size: lg icon_color: md-indigo-50 href: javascript:void(0) # -------------------------------------------------------- # example_intro_panel # - panel: enabled: true id: example_intro_panel type: intro_panel icon_family: ZMDI style: light raised: lane_span: fluid cards: - card: enabled: true type: text title: Your Topic tagline: Feature 1 icon: info icon_size: xxxlarge icon_color: md_indigo text: > At vero eos et accusam et dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Lorem ipsum dolor sit amet. buttons: - button: text: Read More class: btn-info btn-raised btn-round btn-flex icon: eye icon_color: md-indigo-50 icon_size: lg href: javascript:void(0) - card: enabled: true title: Your Topic tagline: Feature 2 · Feature 3 icon: info icon_size: xxxlarge icon_color: md_indigo text: > At vero eos et accusam et dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Stet clita kasd gubergren. buttons: - button: text: Read More class: btn-info btn-raised btn-round btn-flex icon: eye icon_color: md-indigo-50 icon_size: lg href: javascript:void(0) # ------------------------------------------------------------------ # SERVICE Panel # # ------------------------------------------------------------------ # -------------------------------------------------------- # home_service_panel # - panel: enabled: true id: home_service_panel type: service_panel icon_family: FontAwesome style: dark lane_span: fixed cards: - card: enabled: true type: header title: J1 Template Overview tagline: > Creating and managing Web sites using Jekyll is different in compare to CMS Systems like Drupal, Joomla oder Wordpress. No surprise: Jekyll One Template is different as well. Template systems are very common, a huge number of site templates are available for all CMS and Web site generators. The same to Jekyll. J1 Template is not the first template for Jekyll available - it is probably the youngest!

Classic templates are focussing the layout and design of a web. They offer pre-build, standardized building blocks and tools designing web sites. The are embedded into the creators system and often hard to customize. J1 for Jekyll goes different. J1 Template combines layout, design and functionality for a web. The template offers building blocks to create common page components, implements a sytem independend markup language (Asciidoc and Markdown) to create the content and adds a large number of usefull functions based on common Javascript libraries for the web from a single source. That way, J1 web sites behaves as one unit in design and functionality. No breaks between the different components.

How get this managed? Find below the answers to how J1 template is organized, the building blocks and functional components as an overview. Read in in a quite compact form what J1 Template constitutes: the Core, the Components and the Module. - card: enabled: true type: service icon: bullseye href: /pages/public/panels/service_panel_core title: J1 Template tagline: The Core text: > The core integrates the site generator Jekyll into J1, contains all base functions for page layout, design and configuration. Provides procedures to generate web pages automatically based on a given layout based on design settings. services: - service: title: Layout System href: /pages/public/panels/service_panel_core#layout-system - service: title: Template Engine href: /pages/public/panels/service_panel_core#template-engine - service: title: Bootstrap Integration href: /pages/public/panels/service_panel_core#bootstrap-integration - card: enabled: true type: service icon: wpforms href: /pages/public/panels/service_panel_components title: J1 Template tagline: The Components text: > Building blocks ready-to-use to create common page components, connections to systems and workflows of social networks like Twitter or Facebook or Online Services like Disqus for a blog-related Web and Comments. services: - service: title: Panel href: /pages/public/panels/service_panel_components#panel - service: title: Builder href: /pages/public/panels/service_panel_components#builder - service: title: Connectors href: /pages/public/panels/service_panel_components#connectors - card: enabled: true type: service icon: microchip href: /pages/public/panels/service_panel_modules title: J1 Template tagline: The Modules text: > Javascript libraries and ready-to-use applications gets the site dynamic. JS modules add complex functionality to Web pages to integrate image and video content or slider to present image-based data animated as a show. services: - service: title: Lightboxes href: /pages/public/panels/service_panel_modules#lightboxes - service: title: Slider href: /pages/public/panels/service_panel_modules#slider - service: title: Galleries href: /pages/public/panels/service_panel_modules#galleries # -------------------------------------------------------- # example_service_panel # - panel: enabled: true id: example_service_panel type: service_panel icon_family: FontAwesome style: dark lane_span: fluid cards: - card: enabled: true type: header title: Block title (scope, intro) tagline: > Introduction text block. Describes the most powerful components and their general aspects. Used for fast reading, for people too lazy to read much (prevent TL;DR, too long; didn't read)

- card: enabled: true type: service title: Service Name tagline: Service 1 text: > Brief description of the service. The link below points to a summary page. The topic links should point to the chapter, the topic is discussed in more detail. icon: info href: javascript:void(0) services: - service: title: Service topic 1 href: javascript:void(0) - service: title: Service topic 2 href: javascript:void(0) - service: title: Service topic 3 href: javascript:void(0) - card: enabled: true type: service title: Service Name tagline: Service 2 text: > Brief description of the service. The link below points to a summary page. The topic links should point to the chapter, the topic is discussed in more detail. icon: info href: javascript:void(0) services: - service: title: Service topic 1 href: javascript:void(0) - service: title: Service topic 2 href: javascript:void(0) - service: title: Service topic 3 href: javascript:void(0) # ------------------------------------------------------------------ # STEP-BY-STEP Panel # ------------------------------------------------------------------ # -------------------------------------------------------- # home_step_panel # - panel: enabled: false id: home_step_panel type: step_panel style: dark lane_span: fixed cards: - card: title: Marketing & Consulting tagline: > Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus # ------------------------------------------------------------------ # NEWS panel # ------------------------------------------------------------------ # -------------------------------------------------------- # home_news_panel # - panel: enabled: true id: home_news_panel type: news_panel style: light lane_span: fixed boxes: - box: enabled: true type: header title: Latest News - box: enabled: true type: preview title: category: featured - box: enabled: true type: recent_news title: More Articles category: featured max_posts: 5