this page is under construction

WYMstyle 0.2 Quickstart

Get WYMstyle

  1. download WYMstyle 0.2 here: http://www.wymstyle.org/en/download/, unzip.
  2. copy it in a way to make it accessible for your projects
    1. you can make a subfolder in each of your projects with a copy of WYMstyle,
    2. or you can place an unique copy on a server, which will be accessed by all of your projects so you don't have to manage multiple WYMstyle copies.

For example

1. copy WYMstyle in you project folder hierarchy like in this example:

  • [css]
    • [wymstyle]
      • [0.2]
        • [addons]
        • [core]
        • [sites]
        • [skins]
  • [img]
  • [js]
  • index.htm

Create your "screen.css" stylesheet and import modules

  • create your main css file as usual, I suggest to name it "screen.css" so you can later have a different stylesheet for each media type (screen.css, print.css, handheld.css, ...)
  • edit this screen.css file and paste this code: 
/*IE4 SUPPORT*/
	
	/* 	
		simply uncomment the 2 lines below to load 
		the IE4 compatibility (only minimal styles) 
	*/

	/*	@import url(/css/wymstyle/0.2/core/ie4.css);			/**/
	/*	@import "/css/wymstyle/0.2/core/ie4-undo.css";			/**/



/*MODULES*/

	/* 	
		simply uncomment some lines below to load 
		the WYMstyle modules you want to use, write 
		more imports to load other WYMstyle modules or addons: 
	*/
	
	/*	@import "/css/wymstyle/0.2/core/typo-reset.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/layout-fixed.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/cols-2-mx.css";				/**/
	/*	@import "/css/wymstyle/0.2/core/cols-2-xm.css";				/**/
	/*	@import "/css/wymstyle/0.2/core/cols-3-msn.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/cols-3-nms.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/cols-equal.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/navpri-horizontal.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/navpri-horizontal-menudown.css";	/**/
	/*	@import "/css/wymstyle/0.2/core/navlang-topright.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/colors-branding.css";			/**/
	/*	@import "/css/wymstyle/0.2/core/dev.css";				/**/

/*PROJECT*/

/*
	all project-specific styles (website customisation) 
	go to the project.css file as shwon below:  
*/

	@import "project.css";
  • if you didn't follow my example of folder hierarchy, simply replace "/css/wymstyle/0.2/" by the path to your WYMstyle copy.
  • as you can see, all lines beginning with "@import" are commented, simply uncomment each line to load a WYMstyle module.