The following define the set of Page Element and Theme development standards to ensure compatibility between cross developer themes and page elements. This standard is a work in progress and will confirmed features will soon be migrated into caWeb.
Page Elements (Spacing and Layout)
Page elements focus on spacing and layout development.
.css-rule { border-width padding padding-bottom padding-left padding-right padding-top margin margin-bottom margin-left margin-right margin-top height width overflow position float line-height (IMPORTANT to ensure font adjustments do not affect element spacing) display text-align font-size (can be overridden by theme) }
THEMES (Colors and Styles)
.css-rule { /* opacity */ opacity /* background */ background background-image background-color background-position background-position-x background-position-y background-repeat background-repeat-x background-repeat-y /* border-color */ border-color border-left-color border-right-color border-top-color border-bottom-color /* border-radius */ border-radius border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius /* border-style */ border-style border-left-style border-right-style border-top-style border-bottom-style /* border-image */ border-image /* font */ font-size (be weary as this can potentially affect spacing) font-family (be weary as this can potentially affect spacing) /* text */ color text-decoration /* Lists */ list-style list-style-image list-style-position list-style-type }
Standard CSS Classes
Panels
/* Element with background containing content */ .panel { }
Tip Boxes
/* Element with background container textual content */ .tip-box { }
Borders
/* Element with border */ .border { }
Shadow
/* Element with shadow */ .shadow { }
Buttons
/* Buttons */ .button { } .button:hover { }
Invert
Invert class to invert all colors including backgrounds, borders, etc.
/* Invert */ .invert { }
Opacity
Set opacity to elements in a consistent fashion. This can be combined with other classes to provide opacity to design.
/* Opacity */ .opaque { }
Tooltip
Set design theme to popup tooltip boxes.
/* Tooltip */ .tooltip { }
Small Icon
Can be used as a design icon for headings (left, center, right, etc) or any other element requiring a consistent icon design of 32px x 32px.
/* Small Icon */ .small-icon { }
Medium Icon
Can be used as a design icon for headings (left, center, right, etc) or any other element requiring a consistent icon design of 64px x 64px.
/* Medium Icon */ .medium-icon { }
Large Icon
Can be used as a design icon for headings (left, center, right, etc) or any other element requiring a consistent icon design of 96px x 96px.
/* Large Icon */ .large-icon { }
Standard CSS IDs
Header
This div is generated by caWeb based on the element category
#header-mask { } #header { }
Navigation
This div is generated by caWeb based on the element category
#navigation-mask { } #navigation { }
Content
This is the container for the content div and typically spans 100%. This is to allow content wrapping such as a background wrapping around the content area. This div is generated by caWeb based on the element category.
#content-mask { }
This is the container for the content area and can have a fixed or responsive width based on the theme’s implementation. This div is generated by caWeb based on the element category.
#content { }
Footer
This div is generated by caWeb based on the element category
#footer-mask { } #footer { }
HTML Element Overrides
Unordered Lists
ul { }
Ordered Lists
ol { }
Lists Item
li { }
Link
a { }
Heading 1
h1 { } h1 a { }
Heading 2
h2 { } h2 a { }
Heading 3
h3 { } h3 a { }
Heading 4
h4 { } h4 a { }
Heading 5
h5 { } h5 a { }
Heading 6
h6 { } h6 a { }
Paragraph
p { }
Emphasis (Italics)
em { }
Strong (Bold)
strong { }
Blockquote
blockquote { }
Horizontal Rule
hr { }
Special Tips
- Always override spacing for headings in panel
To Be Determined
The following elements are still under review for proper placement. Please provide any comments to this post for requests on what you would like to see added or adjusted to the standard.
box-shadow background-clip background-attachment background-blend-mode background-size body { margin padding border } #header, #navigation, #content, #footer { margin padding border border-width border-style box-shadow } <code></code>
The following is a starting point for data elements.
data-caweb-social data-caweb-repeatable-item data-caweb-no-edit data-caweb-no-editable
heading-icons?? (offset in page element, image background in theme). this is tricky to match elements like this.
need to be able to adjust page element classes to pick up theme features. may have a way to make this cross compatible.
decoration area where user can select (shadow, border, etc). This area will have a set width to allow for shadows and borders to match as needed.
Targeting
#navigation-mask #navigation ul li a:hover
API Standard Matching
Matching of elements between compatible APIs will be evaluated based on how the APIs are upgraded.