First use : css ruleset

Classes/css/user/ContextBuilder.java

@@ -0,0 +1,19 @@
+package Classes.css.user;
+
+import Classes.css.core.Context;
+
+public class ContextBuilder{
+	
+	public static void createContext(){
+		
+		/* (1) Screen dimensions */
+		Context.bind("screen-width",  1280);
+		Context.bind("screen-height", 720);
+		
+		/* (2) Base layout dimension */
+		Context.bind("header-height", 50);
+		Context.bind("menu-width",    237);
+		
+	}
+
+}

Classes/css/user/Header.java

@@ -0,0 +1,34 @@
+package Classes.css.user;
+
+import Classes.css.core.Context;
+import Classes.css.core.Ruleset;
+import javafx.scene.Node;
+
+public class Header{
+	
+	/* Builds all necessary CSS/layout rules */
+	public Header(Node target) throws Exception{
+		
+		/* (1) Set rules */
+		Ruleset.load(target)
+//			.add("top", 0)
+//			.add("left", 0)
+//			.add("right", 0)
+			
+			.add("min-height", Context.get("header-height"))
+			.add("pref-height", Context.get("header-height"))
+			.add("max-height", Context.get("header-height"))
+			
+			.add("min-width", Context.get("screen-width"))
+			.add("pref-width", Context.get("screen-width"))
+			.add("max-width", Context.get("screen-width"))
+			
+			.add("background-color", "#3f51b5")
+			
+//			.add("border-width", "0 0 1 0")
+//			.add("border-color", "#3240a3")
+			
+			.apply();
+	}
+
+}

Classes/css/user/MenuContainer.java

@@ -0,0 +1,32 @@
+package Classes.css.user;
+
+import Classes.css.core.Context;
+import Classes.css.core.Ruleset;
+import javafx.scene.Node;
+
+public class MenuContainer{
+	
+	/* Builds all necessary CSS/layout rules */
+	public MenuContainer(Node target) throws Exception{
+		
+		
+		/* (1) Calculate menu height (screen.height - header.height) */
+		Integer menu_height = Integer.valueOf( Context.get("screen-height").toString() );
+			   menu_height -= Integer.valueOf( Context.get("header-height").toString() );
+		
+		/* (2) Set rules */
+		Ruleset.load(target)
+			.add("top", Context.get("header-height"))
+			.add("left", 0)
+			
+			.add("min-width", Context.get("menu-width"))
+			.add("max-width", Context.get("menu-width"))
+		
+			.add("min-height", menu_height)
+			.add("max-height", menu_height)
+			
+			.add("background-color", "#fffffd")
+			.apply();
+	}
+
+}

controller/RootLayout.java

@@ -2,6 +2,9 @@ package controller;
 
 import java.io.IOException;
 
+import Classes.css.user.ContextBuilder;
+import Classes.css.user.Header;
+import Classes.css.user.MenuContainer;
 import Interfaces.Event;
 import Interfaces.EventObserver;
 import javafx.application.Application;
@@ -21,7 +24,7 @@ public class RootLayout extends Application implements EventObserver {
 	
 
 	@Override
-	public void start(Stage primary_stage) {
+	public void start(Stage primary_stage) throws Exception {
 		
 		/* (1) store primary stage + title it */
 		this.root_stage = primary_stage;
@@ -30,6 +33,11 @@ public class RootLayout extends Application implements EventObserver {
 		/* (2) Load the root layout*/
 		this.loadRootLayout();	
 		
+		/* (3) Load the CSS CONTEXT */
+		ContextBuilder.createContext();
+		
+		
+		
 		/* (1) HEADER
 		-------------------------------------*/
 		/* (1) Create header menu */
@@ -41,6 +49,15 @@ public class RootLayout extends Application implements EventObserver {
 		hm.addItem( new HeaderMenuItem("menu",         "/src/header-menu.png",this)   );
 		
 		
+		/* (2) CSS
+		-------------------------------------*/
+
+		/* (1) #header */
+		new Header( this.root_scene.lookup("#header") );
+		
+		/* (2) #menu_container */
+		new MenuContainer( this.root_scene.lookup("#menu_container") );
+		
 	}
 	
 	

css/constants.css

@@ -1,8 +1,9 @@
 * {
+	
 	-v-screen-width: 1280;
 	-v-screen-height: 720;
 	
 	-v-header-height: 50;
-	-vn-header-height: 650; /* 72 - 50 + 20 */
+	-vn-header-height: 670; /* 72 - 50 */
 	
 }

css/header.css

@@ -1,21 +1,9 @@
 @import "./constants.css";
-
+/* 
 #header{
-	
-	-fx-min-height: -v-header-height;
-	-fx-max-height: -v-header-height;
-	-fx-pref-height: -v-header-height;
-	
-	-fx-min-width: -v-screen-width;
-	-fx-pref-width: -v-screen-width;
-	-fx-max-width: -v-screen-width;
-	
-	-fx-background-color: #3f51b5;
-	
 	-fx-border-width: 0 0 1 0;
 	-fx-border-color: #3240a3;
-	
+} */
-}
 
 #header_menu{
 	

css/menu.css

@@ -17,7 +17,7 @@
 	
 }
 
-
+/*
 #menu_container{
 	
 	-fx-min-width: 237;
@@ -28,4 +28,4 @@
 	
 	-fx-background-color: #fffffd;
 
-}
+}*/

fxml/model.fxml

@@ -20,7 +20,7 @@
       <AnchorPane id="menu" fx:id="menu" maxHeight="700.0" maxWidth="251.0" minHeight="680.0" minWidth="40.0" prefHeight="700.0" prefWidth="234.0" stylesheets="@../css/menu.css" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
          <children>
             <Pane id="header_icon" fx:id="header_icon" maxHeight="40.0" minHeight="40.0" minWidth="40.0" prefHeight="40.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
-            <VBox id="menu_container" fx:id="menu_list" layoutX="50.0" layoutY="40.0" prefHeight="660.0" prefWidth="237.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="40.0">
+            <VBox id="menu_container" fx:id="menu_container" layoutX="50.0" layoutY="40.0" prefHeight="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="50.0">
                <children>
                   <FlowPane alignment="CENTER_LEFT" prefHeight="114.0" prefWidth="234.0" style="-fx-border-width: 0 0 1 0; -fx-border-color: #fafafa;">
                      <children>