Naming convention:
1 - The file names can only be changed inside themes, javascripts and images.
2 - File names must not contain spaces, spaces must be replace by underscores
3 - CSS files can only have the extensions ".css" or ".scss"
4 - Javascript files must have the extension ".js"
5 - Image files can have any extension
Package content:
My_design.zip
- info.json
- layout.html
- default.css
- themes
- blue.css
- red.css
- javascripts
- one.js
- two.js
- images
- pic.jpg
- pic_1.png
- pic_2.jpg
- README
"info.json" file:
Content:
{
"title": "your_title",
"author": "your_author",
"intro": "your_intro"
}
Title: it's the title of your design as it's going to appeared in your website, it can contain spaces
Author: it's the name of the creator of the design
Intro: it's introduction that can contain more details about your design
"layout.html" file:
This HTML file can contain 3 types of elements: headers, blocks and footers.
Each element defining a header, a block or a footer must be a <div>.
Furthermore, each of those <div> must include an <layout_part> as follow:
<div ID="div_1" class="header">
<r:layout_part ID="div_1" class="header" name="header_1">
// Your code here
</r:layout_part>
</div>
Attributes convention:
- each pair of <div> and <layout_part> tags, must have the same ID and class.
- the <r:layout_part> tag as one more attribute: "name", it must contain the type of the element followed by the number of the element (if you have 2 header elements, you will have "header_1" and "header_2"
Javascripts and stylsheets:
The links to your javascript files and stylesheet files must be encapsulated respectively in <r:javascripts></r:javascripts> and <stylesheets></stylesheets> tags.
"strucutre.css" file:
The stylesheet file contains the structure of the page, it reference elements by their ID.
In this file, you can set structural attributes like "width", "height", "position"…
Themes:
Themes are stylesheet files that modify the visual aspects of the page.
The themes folder must contain at least one file named "default.css" that will be the default theme.
Themes stylesheets reference elements by class.
They can set attributes like "color", "background-image", "border"…
Javascripts:
This folder contains the javascript files used by the design.
Images:
This folder contains the images used by the design.
They can have the extensions ".jpg", ".png"...
5cebb638ce