Stylesheet Generation (SSG)
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.
- A powerfull Browser such as Firefox or Google Chrome
- and some knowledge about css
You can watch the tutorial or read the explanation
- Go to SSG -> HERE
SSG will automatically load:
the HTML Sheet which includes the most used HTML-Tags
and one of the 4 ready Layouts for Havalite CMS
- Now we can start by experimenting and see what SSG can do
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
If you are designing a Template for Havalite CMS, please go to our site and download the layout you want from: HERE
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