Orbit/lib/fraisier
chris2tof f4b1d1e182 Modifications in Layout
In the layout file we can have "contents" (for editable content) and
"layout_parts" (for when the layout is created from scratch)
2011-09-05 01:14:49 +08:00
..
themes Revert "Revert "Clean code and add 'name' in theme.rb"" 2011-08-24 02:06:27 +08:00
README.txt Clean code for layout and modifications in dev.rake 2011-08-22 13:45:21 +08:00
info.json Clean code for layout and modifications in dev.rake 2011-08-22 13:45:21 +08:00
layout.html Modifications in Layout 2011-09-05 01:14:49 +08:00
structure.css Clean code for layout and modifications in dev.rake 2011-08-22 13:45:21 +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
     - structure.css
     - themes
          - default.css
          - 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"...