|Framework: Table Of Contents|
Content formatted for printing. This environment is supported by the “sys/print-var(css)” and the “theme/print(css)” files. The default assumption is print output will be monochrome.
Content formatted for devices with a screen. This is the default environment and only needs to be specified in limited circumstances.
This environment is a subset of the web environment with adjustments made to enhance content creation. It only needs to be specified in limited circumstances.
Within the web environment content needs to format appropriately to the device. This is referred to as responsiveness. Xidipity is fully responsive and uses a design language which supports mobile first. The media declaration defines screens sizes under the pseudonyms of “sm”, “md”, “lg”, and “xl”. The absence of a media definition means all media types and the breakpoint for the others are as follows.
- sm– 600px
- md– 900px
- lg– 1200px
- xl– 1800px
This refers to the property of the HTML element you want to style. In the example below “text-align” and “color” are properties of the HTML paragraph element “<p>”.
The property’s value is the CSS style to be applied. In the example above, the value “center” instructs the browser to “text-align” the content between the paragraph tags to the center. Classes are often composed of multiple properties.
The framework recognizes the “hover” and “focus” events. Only a select number of classes are associated with an event in order to keep the size of the supporting css manageable.
- a property may have an environment prefix
- a property may have a media prefix
- a property may have an environment and a media prefix
- a property must have a value declaration suffix
- a property value may have an event suffix