With Raxan's CSS framework you can easily go from simple fixed-width designs to complex multi-column elastic layouts with just a few lines of html code. No Javascript is required to accomplish multi-column layouts, thus making it easier to create nice looking, accessible web pages in minutes.
The framework basically provides a set of style sheet classes, typographic text and a grid layout system that can be used to create complex designs and multi-column web pages. Each cell within the grid is 20px wide and 20px long. The width and/or height of a combination of cells, can be assigned to any html element by using the CSS classes c1, c2,...,c50, c60, c70, c80, c80,c100 and r1, r2,...,r50 respectively, where the numbers represents the number of columns or the number of rows. The default grid contains 100 columns and 50 rows (2000px X 1000px)
Creating a web page with Raxan is very simple. You can use any HTML or Text Editor (even Notepad) to create and modify the web pages.
Let's start off by creating an empty web page called mywebpage.html inside the folder where you have unzipped the library files (e.g. c:\development\raxanfiles). Now open the file mywebpage.html inside your favorite text or html editor to begin editing.
Add the following the html code to the mywebbpage.html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Your Title Here...</title>
<link href="raxan/ui/css/master.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link rel="stylesheet" href="raxan/styles/master.ie.css" type="text/css">
<![endif]-->
<link href="raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />
</head>
<body>
Put your content here...
</body>
</html>
Note: Replace "Your Title Here..." with a title for your page and "Put your content here..." with the html content for the page.
In the above html code you will notice that there are three tags present within the
of the page. This is to include the master.css style sheet (and master.ie.css for Internet Explorer). These files are optional and you can remove them to include your own style sheets but if you would like to take advantage of the CSS framework classes then you will be need to include the master style sheets. The theme.css style sheet file provides additional classes to modify the look and feel of the page.Copy and paste the following code in your new web page replacing the "Put your content here..." text:
<div>
My First Raxan web page
</div>
Save the file and view it inside your web browser. Note: You can view the file inside a browser by double clicking on the filename in the file folder.
Viewing the file inside the browser appears flat and normal (without any styling). To change this, modify the code to reflect the following:
<div class="container c30 pad">
<h1>My First Raxan web page</h1>
<hr />
</div>
Save the file and refresh your browser to see the changes. The page should appear centered with a nice looking title.
What we have done is to convert the <div> into a container with a width of 30 columns or cells (20*30 = 600 pixel) and a 10 pixel padding around the <div> content.
Our next step is to add a box with the words "Hello World" inside it. To do this, simply create a div and assign the rax-box and alert classes to it:
<div class="container c30 pad">
<h1>My First Raxan web page</h1>
<hr />
<div class="rax-box alert">
Hello World!
</div>
</div>
Save the file and refresh your browser to see the changes.
To become a bit more creative try modifying your code to reflect the following:
<div class="rax-box container c30 success pad">
<h1 class="box-title">My First Raxan web page</h1>
<hr />
<div class="rax-box alert column c10">
Hello World!
</div>
<div class="rax-box info column c10">
This is my first web page.
</div>
<br class="clear" /><!-- use to clear the column float -->
</div>
We've only created a simple web page with a title and some basic CSS classes. There's no telling what you can do with a little creativity.
To create a new CSS theme for your web page, follow the steps outlined below:
Include the new theme inside the web page:
<link href="raxan/ui/css/sunnyday/theme.css" type="text/css" />
To learn more about the full list of classes that are available within the Raxan CSS framework, see the CSS Framework Classes.
Up Next: CSS Framework Classes