JoonWeb Theme Guide

JoonWeb template documentation


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:
  1. File Structure
  2. 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_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.

2. Layout Architecture:
layout.jw contains:
<!DOCTYPE html>
<html lang="en">
    <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">
    <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 }}

            --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: '{{ }}';
            --font-second: '{{ theme.fonts.second }}';
        {{ base_style }}

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

    <!-- You can include any script/css which includes in all pages -->
    {{ base_script }}
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" }
            "prime": "Arial",
Here, you can fetch the value of "default" with object "theme" and render like {{ }} 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:

    --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: '{{ }}';
    --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": {
        "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:
        "id": "slider",
        "type": "custom",
                "label": "Enable Slider",
                "id": "enable",
                "type": "select",
                    {"label": "Yes", "value": "yes"},
                "default": "no"
                "label": "Autoplay",
                "id": "enable",
                "type": "select",
                    {"label": "Yes", "value": "yes"},
                "default": "no"
                "label": "Slide to Show",
                "id": "slides",
                "type": "select",
                    {"label": "1", "value": "1"},
                "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"
"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"