85 lines
2.5 KiB
Plaintext
85 lines
2.5 KiB
Plaintext
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"...
|