Xidipity

Knowledge Base

Framework
Framework: Table Of Contents
Xidipity WordPress Theme Knowledge Base Framework Table of Contents
Overview

The Xidipity framework (xty) brings the power of cascading style sheets to html. Although inspired by frameworks like Tailwind, it does not bring forward the full css catalog and is not dependant on a development environment like React. The scope is limited to the needs of the Xidipity theme.

 

The purpose of advanced CSS classes is to provide a method whereby authors or web developers can extend the functionality and styling of Xidipity templates. The goal of the syntax is to make its use intuitive.

 

design

 

environment[media)property:value!event]

 

environment
print

Abbreviation: prt

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.

 

web

Abbreviation: web

Content formatted for devices with a screen. This is the default environment and only needs to be specified in limited circumstances.

 

editor

Abbreviation: mce

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.

 

media

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

 

property

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>”.

 

p {
text-align: center;
color: red;
}

 

value

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.

 

event

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.

 

logic
  • 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

 

April 10, 2021