Havalite

SSG (StyleSheet Generation) is a online CSS Generator for visual designing stylesheets directly on your browser and without the need of external CSS-Editors. HTML5 and CSS3 are although considered as an important part of the Editor.

The idea behind SSG is to save time while designer edit there own stylesheet/s. We all know the procedure to start browser, start CSS-Editor, open stylesheet, edit stylesheet, go back to the browser, refresh it and than back to editor…… all these steps take a plenty of time and we can not concentrate our self on the actual work and the precission that designer need by choosing the right colors or dimenssions.

Requirement

• A powerfull Browser such as Firefox or Google Chrome
• and some knowledge about css

How to

You can watch the tutorial or read the explanation

1. Go to SSG -> HERE
2. SSG will automatically load:
   the HTML Sheet which includes the most used HTML-Tags
   and one of the 4 ready Layouts for Havalite CMS
3. Now we can start by experimenting and see what SSG can do

Explanation

We don’t need to know every thing at the beginnig but we should understand the 3 important small windows which appear by starting SSG:

1. Tag Selector Window: Here we can assign a name for our project in case we want to save every step we do.

• NAME: Type a project name (if you did not assign a name, nothing will be saved! )
• LAY: Choose a layout (remove the layout name and double click on the field, choose one, than press refresh project button)
• TAGS (Remove the tag BODY and double click or press arrow-down to see the list of all html tags. Select the one you want to design)
• CSS (double click on the field to see a list of all ID or Class Elements used in the html file)
• PSEU: (These are the pseudo elements for hover, first-letter…… effects. double click to see the list)

2. Data Window: Here you can see all saved TagNames or Elements colored and well formated. You can click any Tag/Element to edit it.

3. CSS Designer Window: This does not need to be explained. Set the values for your Tag/Element and watch how it changes!

The Statusbar: has the buttons to open the 3 windows include:

• Mouse Coordinations can be helpful by messuring width/height or positioning
• Mouse Over on any area of the html file will show the Name of the Tag or Element (important: Double Click the area to edit)
• Download CSS: After finishing your template click on the button to save your css

Last

If you are designing a Template for Havalite CMS, please go to our site and download the layout you want from: HERE

Watch SSG on Youtube

FAQ

1. How can i  integrate and use my own fonts in my stylesheet?

CSS3 allows designer to integrate their own font/s by using the At-Rule @font-face. In SSG you only need the url adress of your font.

– Click on the Font section of the CSS Window to open it
– Click on (Create a new font-family)
– Paste in the url adress of the font and click Create
– Now you have the name of the font in the list of the font-family and you can use for any tag