caWeb Development Standards (Release Beta)

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.