Clean code for layout and modifications in dev.rake

2011-08-22 13:45:21 +08:00
1 parent e74f2931b1
commit 7a4ad240a8
@@ -0,0 +1,85 @@
+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"...
@@ -0,0 +1,5 @@
+{
+	"title": "Fraisier",
+  "author": "Paul",
+  "intro": "Strawberry cake"
+}
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	  <title>RulingSite</title>
+		<r:stylesheets>
+			<!-- your stylesheets here  -->
+		</r:stylesheets>
+		<r:javascripts>
+			<!-- your javascripts here  -->
+		</r:javascripts>
+  </head>
+
+  <body>
+		<!-- example -->
+		<div id="header_top" class="header">
+			<r:layout_part id='header_top' class='header' name='header_1'>
+			</r:layout_part>
+		</div>
+		<div id="header_bottom" class="header">
+			<r:layout_part id='header_bottom' class='header' name='header_2'>
+			</r:layout_part>
+		</div>
+      
+		<div id="main_content" class="content">
+		  <r:layout_part id="main_content" class='content' name='block_1' editable="true">
+		  </r:layout_part>
+		</div>
+
+		<div id="footer" class="footer">
+	    <r:layout_part id="footer" class='footer' name='footer_1'>        
+	    </r:layout_part>
+		</div>
+    <!-- END example -->
+  </body>
+</html>
@@ -0,0 +1,2 @@
+/* This 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"… */
@@ -0,0 +1,2 @@
+/* This stylesheet file contains the visual aspect of the page, it reference elements by their class.
+In this file, you can set visual attributes like "color", "background-color", "border"… */