Joonweb Developers Docs

Overview

As we know, before creating a template we need to understand the architecture, wireframe of a template, In order to make it perfectly fit for JoonWeb.

Skill Needed: Before getting ahead we must have basic knowledge of template

HTML
CSS
JS/jQuery
json - for rendering data
basic logical knowldge (conditions, loop, variables)

Basic Formalities:
Before get started, we need to know on how to build a better enivronment for making Template compatiable for JoonWeb.

We have to create section wise template, each section has its own css/js
Make atleast 2 varient of each section is recommended.
Basic settings/property of css should be dynamic i.e, root (colors, font, fontFamily, animation).

Colors, Heading Styles will be configured in JSON file called theme_config.json

Important architect you need to know are follows:

File Structure
Layout Architecture

1. Files Structure
It contains the structure of directory:

[Template Structure]
 + assets
   └contains assets such as js/css/default_images
 + rules
   └contains sections rules/settings in jsonfile
 + sections
   └contains section views/design in HTML/JW file
 - layout.jw
 - theme_config.json
 - theme_sections.json

Detailed Information about Files & Directory Structure

Name	Information	files/dir details
asset	This folder contains all the default media, css and Js files	assets/
rules	This folder contains, section settings like slider, colors, animation, alignment and rules/userinput which displays which user can change, also its setting.	Section Setting -> rules/[your_section].json "sections" >> "settings" Rules -> rules/[your_section].json "sections" >> "rules"
sections	This folder contains section file in JW extension eg about.jw, header.jw, welcome.jw etc.	sections/
layout.jw	This file contains the main layout file (without any section) which will be visible in all pages, it is a Layout structure.	layout.jw
theme_config.json	This json file contains config like: colors, heading, fonts, animation etc.	theme_config.json
theme_sections.json	This json file contains the collection/category or group of sections mainly helps in "Add New Section" and change design in builder.	theme_sections.json (optional)

Prepare before designing theme

Before creating template for JoonWeb, you need to make sure you have created sections seperately
like header, footer, about us all should be created seperate.

You have to download/clone the default template from official JoonWeb GIT repository.
https://github.com/JoonWebdotcom/informative-theme

2. Layout Architecture:
layout.jw contains:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta name="author" content="Joonweb">
    <title>{{page.seo.title}}</title>
    <meta name="description" content="{{page.seo.desc}}">
    <link rel="canonical" href="{{current_url}}"/>

    <link rel="stylesheet" href=" put css path">
    <script src="put js path"></script>

  <!-- header_content is system files connect -->
  {{ header_content }}

    <style>
    
        :root{
            --color1: {{ theme.colors.color1.value }};
            --color2: {{ theme.colors.color2.value }};
            --color3: {{ theme.colors.color3.value }};
            --color4: {{ theme.colors.color4.value }};
            --color5: {{ theme.colors.color5.value }};
            --color6: {{ theme.colors.color6.value }};
            --font-prime: '{{ theme.fonts.prime }}';
            --font-second: '{{ theme.fonts.second }}';
        }
        {{ base_style }}
    </style>
</head>

<body>
 <div id="root">
<!-- here main content will output -->
    {{ base_content }}
 </div>

    <!-- You can include any script/css which includes in all pages -->
    {{ base_script }}
</body>
</html>

In above code, {{ header_content }} , {% block base_style %}, {% block base_content %}, {% block base_script %} is mandatory.

More Details:

Tag/Blocks	Description	Required
page.seo.title	It contains, Meta Title of a Page	Yes
page.seo.desc	It is a Meta Description of a Page	Yes, Mandatory for SEO
current_url	It will output the current page url	Yes, For SEO
assets	It is a url of CDN assets of JoonWeb	Yes, if you use Joonweb library
header_content	It will output security, apps etc and is mandatory and can be used once.	Yes! It is must for template
base_style	It will render style of all sections and canbe used once.	Yes! else design will now show
base_content	Its compulsary for rendering page contents and can be used only once	Yes
base_script	It will render all scripts, else website will not work	Yes
root.url	It will show the full url of website.	Optional

You can fully customize the page as per your needs

Defination of Files:

theme_config.json - it contains the main theme/appearence configuration/preset by which it shows.

It contains config like, theme colors (compalsury), fonts, headings, buttons, animation or anything you want to make.
"theme" object/array will contain all the values of "default", which can be used in whole template.

theme_config.json file:

{
    "default": {
        "headings": {
            "heading1": {
                "label": "Heading 1",
                "font-family": "Arial",
                "font-size": "30px"
            },
            "heading2": {
                "label": "Heading 2",
                "font-family": "Arial",
                "font-size": "28px"
            },
            "heading3": {
                "label": "Heading 3",
                "font-family": "Arial",
                "font-size": "26px"
            },
            "heading4": {
                "label": "Heading 4",
                "font-family": "Arial",
                "font-size": "25px"
            },
            "heading5": {
                "label": "Heading 5",
                "font-family": "Arial",
                "font-size": "24px"
            },
            "heading6": {
                "label": "Heading 6",
                "font-family": "Arial",
                "font-size": "20px"
            },
            "paragraph1": {
                "label": "Paragraph 1",
                "font-family": "Arial",
                "font-size": "16px"
            },
            "paragraph2": {
                "label": "Paragraph 2",
                "font-family": "Arial",
                "font-size": "14px"
            },
            "paragraph3": {
                "label": "Paragraph 3",
                "font-family": "Arial",
                "font-size": "12px"
            }
        },
        "colors": {
            "color1": { "value": "#ffbeac"  },
            "color2": {"value": "#ffefec" },
            "color3": { "value": "#b32121" },
            "color4": { "value": "#945151" },
            "color5": { "value": "#3e4a4f" },
            "color6": { "value": "#d62828" }
        },
        "fonts":{
            "prime": "Arial",
            "second":"Ubuntu"
        }
    }
}

Here, you can fetch the value of "default" with object "theme" and render like {{ theme.fonts.prime }} it will output "Arial".
You can customize themeConfig default as per your need, keep in mind that headings and colors are mandatory objects.

Next, you need to know that css you write should be mostly of root specially for colors and fonts.
As you need, before creating any template you have to decide in which main 3-4 or 5 colors you want it to design in.

Eg colors be like:
:root{--color1: 'red', --color2: 'lightred', --color3: 'white', --color4: '#000', --font-prime: 'Arial', -font-second: 'Comic Sans'}

This is your first step in creating global css, next is to make it dynamic. You can check "theme_config.json" for better understanding.
current/default preset will accessed through object "theme" you can fetch the data from theme_config.json, so property be like {{ theme.colors.color1.value }}
so the dynamically created root be like:

:root{
    --color1: {{ theme.colors.color1.value }};
    --color2: {{ theme.colors.color2.value }};
    --color3: {{ theme.colors.color3.value }};
    --color4: {{ theme.colors.color4.value }};
    --color5: {{ theme.colors.color5.value }};
    --color6: {{ theme.colors.color6.value }};
    --font-prime: '{{ theme.fonts.prime }}';
    --font-second: '{{ theme.fonts.second }}';
   }

theme.colors.color1.value will fetch the data from theme_config.json >> default >> colors >> color1 >> value.
More, proper example you can check in layout.jw in cloned template and theme_config.json.

Also think about creating dynamic, rather than static.. Specially you need to focus on header section..
Don't put margin manually on each section for fixed header thing.. you need to make it auto through JS if you would like to give property of fix header to users.

One more thing, you need to make settings yourself what you want your users to have it, section settings includes: colors, sliders, animation, alignment etc.
You will get to know more in section settings define in "rules" folder of template in thier respective json file.

How to Get Started ?

Create your dream design in HTML/CSS/JS in section wise.

Now sepeate all sections from your template in JW files, example:

Suppose, you have index.html where you have all the sections.. Now do one thing.

Make skelton .. Copy from <!doctype html> to <body> and after footer to </html>..
Paste in one file names as layout.jw and convert it accordingly as stated in "Layout Achitecture".

Now, suppose you have 5 sections in your index.html including "header/slider/aboutus/services/footer".
Firstly make seperate file and save it accordingly in first phase.

Example: cut "<header>" to "</header>" from index.html and paste in new file and save it as header.jw in sections folder.
do likewise with all the sections.

Also prepare it's rules: For prepearing rules/settings of sections you have to make a json file with same name as of section.
example, for about.jw.. make about.json in "rules" folder

Supose, your about section contains "4" user input fileds like title, subtitle, description and one image.

So have to write structure like, for more info checkout default RuleType for creating inputs for user.

{
  "sections": {
    "settings":[],
    "rules":{
        "title": {
          "label": "Enter Title",
          "type": "text",
          "show": "yes",
          "default": "About US"
        },
        "subtitle": {
          "label": "Enter Subtitle",
          "type": "quickEditor",
          "show": "yes",
          "default": "Hello dear welcome"
        },
        "description": {
          "label": "Description",
          "type": "simpleEditor",
          "show": "yes",
          "default": "This is a sample description hope you like it buddy"
        },
        "media": {
          "label": "Uplaod Media",
          "type": "singlefile",
          "show": "yes"
        }
      }
  }
}

In case you need to add any setting, it will be in settings array, example if you want slider in any section you have to write its setting array like:

{
        "label":"Slider",
        "id": "slider",
        "type": "custom",
        "elements":[
            {
                "label": "Enable Slider",
                "id": "enable",
                "type": "select",
                "options":[
                    {"label": "Yes", "value": "yes"},
                    {"label":"No","value":"no"}
                ],
                "default": "no"
            },
            {
                "label": "Autoplay",
                "id": "enable",
                "type": "select",
                "options":[
                    {"label": "Yes", "value": "yes"},
                    {"label":"No","value":"no"}
                ],
                "default": "no"
            },
            
            {
                "label": "Slide to Show",
                "id": "slides",
                "type": "select",
                "options":[
                    {"label": "1", "value": "1"},
                    {"label":"2","value":"2"}
                ],
                "default": "1"
            }

        ]
    }

and you can access the settings by id of setting/element..
Like, it has id "slider" and element id is enable and second is auto play..
so for accesing its data, you have to write in jw section like {{section.slider.enable }} , and {{section.slider.autoplay}} it will output the default value if user didn't updated it.

Creating Section Setting:
any setting could be created using rules/ section JSON file >> "sections" >> settings array you need to make json aboject with some values written below:

"label" - For write Setting label eg "Slider", "Animation" etc.
"info" - Any info you want to show for quick details like "For sliding the section"
"id" - it should be unique if custom, or system define.. also make sure it should not be duplicate. id will be like slug.. example "islider" or "alignment" etc.
"type" - if you want to create your own, you can write "custom" or if you want to use system define write "system"
"elements" - this is an array which contain all the elements/childsetting of the above setting. It should be declare only in custom.

Constructing elements: - it will be object/html inputs by which users save settings.
"label" - Name of the option, example "enable slider"
"id" - again it should be unique in it's parent.
"info" - Any info you want to show for quick details like "It will enable the slider"
"type" - This is the field you would like to output in builder , you can check full list of supported input types below.
"default" - Default option gives default value for the particular field.
"options" - Its only in checkbox, radio, and select/dropdown. like "min" "max" in range field.

Input Field (type in elements)	Detail
text	render input type text for write.
select	render <select>, "option" paramaters is necessary with label and value.
textarea	render textarea in setting
singlefile	render image upload in setting
chooser	render chooser, like radio element
color	render color chooser
datetime	render date/time input
heading	render static heading for collapse.
range	render range
radio	render radio button
checkbox	rendering checkbox for selecting multiple choices

Now after creating its section settings, Its time for you to create Rules for the section in same json file as of section setting.

Creating/Defining Section Rules:
any rules could be defined in rules/ section JSON file >> "sections" >> rules object.. You need to make json object with rules.
example :

{
        "title": {
          "label": "Big Headings",
          "type": "text",
          "show": "yes",
          "default": "About US"
        }
}

Here,
"title" is ruleid which should be unqiue and could be anything in slug (no spaces or any special character except _ underscore), and it is used to render its data in JW file.

it contains:
"label" -- User for showing its label by which user can understand that editing this will change the this. example: "Enter Heading" so user can understand changing this will change the heading of the section.
"type" - It is a inputfield type like text, textarea, etc that you can check full list of supported input to propery design the UI for user.
"show" - manage the default visibility of the rendered rule.
"default" - It contains the default input/text for the rule if there is no user defined data available, mainly work in new template or new section.

List of full supported Input/Rule Types (for "type" ):

Rule Type	Detail
text	will render input text for UI, and output the same
textarea	will render simple textarea
email	will render input type email
number	will render input type number
datetime	it will render datetime picker
quickeditor	it will render simple textarea with features like Bold, Italic, underline, alignment and color
simpleEditor	It is more advance than quickeditor and contains more features.
hrefbutton	It will output "button" setting/ui
singlefile	contains media input for uploading file for user.
siteform	contain default form
sitegallery	contains default gallery
socialicon	Rendering social Icons

For Creating Subsection/listitems you have to add a key name "subsection" followed by "fields" and then the same as rule, for example:

"subsection": {
    "fields": {
      "item_name": {
        "label": "Service Name",
        "type": "text",
        "info": "",
        "show": "yes"
      },
      "media": {
        "label": "Media",
        "type": "singlefile",
        "info": "",
        "show": "yes"
      }
    }
}

Here we have two lisitem content, item_name and media,.. you can make as much as you wish. Outputing it is easy through for loop.
you can check sample lisitem section.

For more proper understanding you can check the smaple file downloaded through GIT.
Now after creating rules and section settings, its time to convert JW section.

for converting JW section refer to "JW Tags"

JoonWeb Theme Guide

Overview

Detailed Information about Files & Directory Structure

Prepare before designing theme

Defination of Files:

How to Get Started ?