# VIOXYS CSS Test Bed

## Instructions

Click here if you already know what to do, otherwise continue reading. It is important that you read this first even if you already know CSS to avoid wasting your effort.

This is a test bed for creating new design for use with VIOXYS. First step is to get yourself acquainted with the structure of VIOXYS css directories. There are only 2 directories that you will need to be keeping an eye on. These are:

- /css
- /images

All CSS are stored at /css and all images under /images. Notice also that under /css directory are more subdirectories that corresponds to the "Theme". Example, the theme "I Luv Pink" is stored under /css/iluvpink with corresponding images under /images/iluvpink.

In order to maintain flexibility, VIOXYS loads the css as follows:
VIOXYS will load clean theme first
followed by the corresponding theme.

Example, if you select the "I Luv Pink" theme, VIOXYS will load clean theme first followed by the "I Luv Pink" theme. This is important since VIOXYS is continuously being developed. New features means a need to update the design as well. In order to prevent the need to edit all designs every time a new feature is introduced, only the "Clean" theme will be edited which will hold a 'neutral' theme so that all other theme will have a 'neutral' look if a certain feature doesn't have a corresponding theme.

For your convenience, a 'template' theme is already created with the same theme as 'Nature' theme. The folder is located at:

- /css/template
- /images/template

Use the corresponding folders to store your new theme. It is also important to keep all files under each corresponding directories and theme. Also, never modify other themes as any modification to other theme and its corresponding folders will be discarded. Also, follow the file names and the corresponding contents based on the 'clean' theme. Example, navigation related css should be kept only under style___navbar.css.

For more information, view the files under /css/default to better understand the categorization of design to corresponding files.

To summarize:

- Only edit files under /css/template
- Put corresponding images under /css/template
- Never touch other folders
- Refer to the files under /css/default to see what properties can be edited. If you need reference, you may copy some files from other themes into the /css/template folder.
- To view your design, click the 'Template' Button within the test bed located below the navigation bar.

Click here to proceed to the test bed.

## Notes

- If you don't see any design upon entering the test bed, you might need to delete the cookies. The test bed uses javascript cookies to track the selection across different pages.
- Some designs can make use of 'resize' feature wherein setting the browser width to certain width will change the design. Example, if you select 'Nature' and set your browser width to 800 and less, the design changes size, extending your browser width to greater than 1024 will change it again. Keep that in mind when making your design.
- On production server, VIOXYS automatically merges all css files into one file, and removed unnecessary spaces and comments, therefore, do not worry about web performance in creating css files. Make your css files as easy to read as possible. Follow the file categorization and put as much comments and notes as you like.
- VIOXYS is hosted on a linux server, linux and unix are very sensitive to file name, as much as possible, use only small letters when creating images. To be safe, only use a to z, 0 to 9 and underscore (_) when naming your images.
- Like VIOXYS, this CSS Test Bed is also undergoing active development, make sure you grab the latest test bed before starting new design. Make it a habit to visit http://www.vioxys.com for news and updates.