Knowledge Base

TOC: Framework
Xidipity WordPress Theme Knowledge Base Framework Subject Menu Header Image

The Xidipity framework (wpx) leverages the power of cascading style sheets to create compelling content. 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 wpx 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.



environment [media) property :value !event]



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.



Abbreviation: web

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



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.



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.

  1. sm – 600px
  2. md – 900px
  3. lg – 1200px
  4. xl – 1800px



This refers to the property of the HTML tag you want to style. In the example below “text-align” and “color” are properties of the HTML paragraph tag “<p>”.


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



The property’s value is the CSS rule 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 and only a select number of classes are associated with an event in order to keep the size of the supporting css  manageable.


  • inventory ​ a property may have an environment prefix
  • inventory ​ a property may have a media prefix
  • inventory ​ a property may have an environment and a media prefix
  • inventory ​ a property must  have a value declaration suffix
  • inventory ​ a property value may have an event suffix

  • Since: v1.0.0


July 3, 2022