orbit-basic/lib/fraisier
chris2tof a09f8e4551 merge with november_presentation 2011-12-20 16:47:17 +08:00
..
images Revert ff82391b7d0d17c17568ed21176b8b0112a34e31^..HEAD 2011-10-20 10:06:06 +08:00
javascripts Revert ff82391b7d0d17c17568ed21176b8b0112a34e31^..HEAD 2011-10-20 10:06:06 +08:00
themes Revert ff82391b7d0d17c17568ed21176b8b0112a34e31^..HEAD 2011-10-20 10:06:06 +08:00
README.txt structure.css -> default.css 2011-09-05 15:18:36 +08:00
default.css Fix bug in layout, parser and change lib/fraisier 2011-09-07 11:53:16 +08:00
info.json Clean code for layout and modifications in dev.rake 2011-08-22 13:45:21 +08:00
layout.html merge with november_presentation 2011-12-20 16:47:17 +08:00
reset.css Revert ff82391b7d0d17c17568ed21176b8b0112a34e31^..HEAD 2011-10-20 10:06:06 +08:00

README.txt

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"...