mozdev.org

CaScadeS    

resources:
  1. First demo made with CaScadeS
  2. Dropped Initial demo
  3. Block borders demo
  4. CSS Positioning

First demo of CaScadeS :

Creation of a simple document I just launched Composer and made a very simple document. It contains a div carrying class "mainDiv", itself containing an h1 and a p.
Open the stylesheet editor
The stylesheet editor is a modal dialog presenting on the left all the stylesheets and rules attached to the document, and on the right the information or properties specified by a sheet/rule. The dialog also contains button allowing to create/move/remove external stylesheets, embedded stylesheets, imported stylesheets, style rules, and at-media at-rules.
Attach an external stylesheet to the document
I have just clicked on the "Link elt." button and I am about to attach an external stylesheet for media "screen" to the document. It is also possible to attach alternate stylesheets that the browser will propose to the user under View > Use Stylesheet.
The stylesheet is now attached to the document
The external stylesheet is added to the list of stylesheets. Clicking on the item unfolds the list of rules specified by the sheet. All items are in italic because they are external to the document and cannot be modified.
The right part of the dialog shows the intrinsic data of the stylesheet.
The "disable stylesheet" button Please notice the "disable stylesheet" that allows to disable the application of the sheet w/o unloading it. It is then very easy to see the difference between a document with a given sheet and without.
See a CSS rule
I have selected a CSS rule and the right part of the dialog shows me the intrinsinc data of the rule
See what background defines a rule
This rule defines a grey uniform background for the body of my document
Another rule
This rule specifies a lot of declarations
See what text and font it defines
This rule specifies a right alignment (and a silver background but that's not shown in this tabpanel)
Let's create an embedded stylesheet
I have clicked on the "Style elt." button and am about to add a STYLE element to the document.
Add a rule to the new sheet
The stylesheet is created, let's add a rule applying to all h1 elements
Specifying color
Specifying blue text color for all h1 elements
The text tabpanel for this rule
This rule specifies blue, bold, italic, right-aligned text, in "Georgia" font (or the default serif font is Georgia is not available on the system) of size 18 points ;  the text is also underlined and overlined. A preview is available. Please note that the editor's session behind is immediately updated.
Let's create another rule
I want to create another rule for the body of my document
Specify a background
I want the body of my document to be white with a tiled background image that does not scroll when I scroll the document's content in the viewport.
A last rule
I also want the subtitle of my document to have its own style.
Specifying text/font data
My subtitle's text is centered, in black colour, uses a smaller font than the normal text and uses font Arial, or Helvetica if Arial is not available, or sans-serif is none is available.
The end result
Finally, I have added two stylesheets to my document in one minute and its look is now absolutely different even if I did not change any bit of the contents of its body.

 Dropped Initial demo :

Creation of a simple paragraph
I have launched Composer and created a long paragraph of text
menu selection
I want to create a Dropped Initial and select the corresponding menu entry
defining text effects
it opens a properties dialog and I select Chevara font in 32pt, white color over a violet background
result
done ! But I am not pleased with the result and I want to remove this Dropped Initial, so I select the corresponding menu entry. Of course if I choose Edit instead of Remove, I can edit the previous settings and change them.
back to original state
we're back to the initial state, all the technical stuff behind this text effect has been removed and you don't even know what it did

Block borders demo :

Creation of a simple document
I have launched Composer and created 3 paragraphs ; the caret is in the second one
menu selection
I want to add borders to the paragraph containing the caret
borders dialog
The borders dialog, in fact a part of the global CSS editor's dialog, is now visible ; of course, if the paragraph already has borders, the definitions are visible
specifying borders
I want blue thick inset top and bottom borders and thin red solid left and right borders
result
done !

CSS Positioning !!!

Creation of a simple document

I have launched Composer and created 2 paragraphs.
The firts paragraph contains a large number of anchors (each word is an individual anchor here), and the second one is blah blah, supposedly a long text.

BODY's styles
Adding a background to the document
table of contents Positioning the list of anchors and giving it a border
TOC entries
Specifying that all A elements in the list of anchors should be treated as blocks
blah blah's styles

Positioning the blah blah and adding a dropped initial

result done !


The cascades project can be contacted through the mailing list or the member list.
Copyright © 2000-2017. All rights reserved. Terms of Use & Privacy Policy.