Dark PhysiCSS Logo

The force behind elegant CSS layouts


Dark PhysiCSS is the best CSS framework to take care of layout fundamentals so you can focus on custom styling.

Dark PhysiCSS is a library of formating classes that are configured to manage consistent spacing, responsive layout, text, and color styles. You start by modify a configuration file of variables. Dark PhysiCSS framework doesn’t include multitudes of properties that you’ll find yourself overriding. It is architected to focus specifically on fundamental elements and structural properties, and not get in your way.

Key Characteristics

  • Using it simply inovles adding a file path in your code.
  • Grid widths are based on percentages, and are not limited to a fixed number for columns.
  • All classes have a common prefix so they are easily identifiable within your code.
  • An easy to manage configuration file centralizes global style control.

Divine Proportions
A unique feature to Dark PhysiCSS is its ability to size and space elements using ɸ(PHI) as a golden ratio. This allows for columns, padding, and margins, to all be defined as increments of the total width of a container using proportions similar to those we see reflected throughout nature.

A few sites that use Dark PhysiCSS*

*Sites may use previously version

Experiement with Dark PhysiCSS!

Download

Or

Add the below css code between the <head> </head> tags of your html to test drive it using the default configuration.

<link rel="stylesheet" href="https://theelixirhaus.com/dark-physicss/css/dpcss.css">

Once downloaded...

Modify the style variables in the configuration file to suite your brand, then include the Dark PhysiCSS files in your project, linking the dpscss.css file in your site's header.

Use the syntax reference guide below to utilizes the classes.

You'll need to view it on a desktop size screen to see the responsive states in action.

About The Properties:
A range of properties are described in the syntax format for the classes detailed below. These properties are identified with brackets "[ ]". Below is a key listing the value options for each property.

side: lt, top, rt, bot
rotation: tl, tr, br, bl
screen size: xs, s, m, l, xl
size: 0px, 5px, 10px, 15px, 20px, 25pc, 33pc, 50pc, 75pc, 100pc
horizontal position: lt, cnt, rt
vertical position: top, mid, bot
number: 1 -> 100
phi revolution: -1 -> -9
* Optional property

Class Reference Documentation

Spacing, hues, shades, fonts, and sizing are all editable in the configuration file.

Font Faces

dp-fnt:1
dp-fnt:2
dp-fnt:3

Font Sizes

Helpful for when you need to use a specific font tag for SEO but want it to display differntly than its default size.
dp-txt:h1
dp-txt:h2
dp-txt:h3
dp-txt:h4
dp-txt:big
dp-txt:med
dp-txt:norm
dp-txt:sm
dp-txt:xsm

Text Weights

Weight support is dependent on font face.

dp-fnt:100

dp-fnt:200

dp-fnt:300

dp-fnt:400

dp-fnt:500

dp-fnt:600

dp-fnt:700

dp-fnt:800

dp-fnt:light

dp-fnt:bold


Text Styles

dp-txt:italic
dp-txt:uppercase
dp-txt:underline

Text Position

Text position is defined in the following format: dp-txt:[side]:[screen size*]

dp-txt:lt
dp-txt:cntr
dp-txt:rt
dp-txt:rt:s
dp-txt:cntr:m
dp-txt:rt:l

Text Hues

dp-txt:clr1

dp-txt:clr2

dp-txt:clr3

dp-txt:clr4

dp-txt:clr5

dp-txt:clr6

dp-txt:clr7

dp-txt:clr8


Background Hues

dp-bg:clr1
dp-bg:clr2
dp-bg:clr3
dp-bg:clr4
dp-bg:clr5
dp-bg:clr6
dp-bg:clr7
dp-bg:clr8

Text Shades

dp-txt:grey1

dp-txt:grey2

dp-txt:grey3

dp-txt:grey4

dp-txt:blk (dp-txt:wht for white text)


Background Shades

dp-bg:grey1
dp-bg:grey2
dp-bg:grey3
dp-bg:grey4
dp-bg:blk (dp-bg:wht for white backgrounds)

Paddings

Padding is defined in the following format: dp-pad:[size*]:[side*]:[screen size*]

dp-pad:5px
dp-pad:10px
dp-pad:15px
dp-pad:20px
dp-pad:25pc
dp-pad:33pc
dp-pad:50pc
dp-pad:75pc
dp-pad

Side Specific Padding Styles

dp-pad:50pc:rt (Adds 50% padding to the right of an object)

Screen Size Specific Padding Styles

dp-pad:50pc:rt:m (Add 50% padding to the right of object on tablet screens in portrait mode)

Use a Divine Ratio

dp-pad:phi:[phi revolution]:[side*]:[screen size*]
Pad elements using ɸ(PHI) in prortion to the total width of a containing element.
dp-pad:phi:-2:lt:m

Margins

Margin spacing is defined in the following format: dp-marg:[size*]:[side*]:[screen size*]

dp-marg:5px
dp-marg:10px
dp-marg:15px
dp-marg:20px
dp-marg:25pc
dp-marg:33pc
dp-marg:50pc
dp-marg:75pc
dp-marg

Side Specific Margins Styles

dp-marg:50pc:rt (Adds 50% margin to the right of an object)

Screen Size Specific Margin Styles

dp-marg:50pc:rt:m (Adds 50% margin to the right of an object portrait mode)

Use a Divine Ratio

dp-marg:phi:[phi revolution]:[screen size*]
Space elements using ɸ(PHI) in prortion to the total width of a containing element.
dp-marg:phi:-2:lt:m

Set Columns Sizes

Use “dp-grid” to make percentage based columns by increments of 5%.
dp-grid:25pc
dp-grid:75pc

Set column size to change at different screen widths by defining column width and screensize.
The below displays as specific columns only on small (Tablet portrait) sizes screens and up.

dp-grid:35pc:s
dp-grid:15pc:s
dp-grid:50pc:s

Use a Divine Ratio

dp-grid:phi:[phi revolution]:[screen size*]
Size elements using ɸ(PHI) in prortion to the total width of a containing element.

Sizing

dp-marg:phi:[phi revolution]:offset:[screen size*]
Define the width of an element as negative space to size it with PHI proportions.
dp-grid:phi:-1
dp-grid:phi:-1
dp-grid:phi:-1
dp-grid:phi:-1
dp-grid:phi:-1
dp-grid:phi:-1:offset
dp-grid:phi:-2
dp-grid:phi:-4
A "Golden Spiral" mosaic displayed using the the Divine Ratio classes
Additionally you can use the included CSS variable --dp-phi to make your own Divine sized elements.

Auto Fit

Columns can be controllable by screen size by defining a screen size in the following format: dp-grid:fit:[number]:[screen size*]

Use the “dp-grid” “fit” parameter to auto fit columns of content together.
This example will display two divs as columns layout using the class "dp-grid:fit:3"

Flex Align

Flex columns horizontal alignment position is defined in the following format for horizontal positioning: dp-flex:align:[horizontal position]:[screen size*]

Flex columns vertical alignment position is defined in the following format for vertical positioning: dp-flex:valign:[vertical position]:[screen size*]

Examples: dp-flex:valign:mid, dp-flex:align:cntr
 
 
 

Position

Position for elements is defined in the following format: dp-pos:[horizontal position]:[screen size*]

Use "dp-contain" and "dp-pos:cntr" to constrain the width of content to the site width and to position it center.
Alternatively you can position content to the left using "dp-pos:lt" or right using "dp-pos:rt".

Positioning content is also controllable by defining a screen size in the following format: dp-pos:[side]:[screen size*]

dp-pos:rt
dp-pos:cntr:m

Gutters

Gutters for columns are defined in the following format: dp-gutter:[size*]:[screen size*]

Example: dp-gutter:50pc
 
 
 

Display

Displaying elements by screensiz is defined in the following format: dp-display:[above/below]:[screen size*]

Use “dp-display“ to show and hide elements at differnt screen sizes.
Example: dp-display:below:l and dp-display:above:l
dp-display:below:l
dp-display:above:l

Utilities

Hiding Elements

Hiding an element across all sreensizes is done with dp-hide

Example: We can't "show" you an example for obvious reasons :)

Responsive Line Breaking

Creating line breaks at certain screensizes can be done with: br:[screen size]

Example: This text link will break here on tablet screens using dp-br:m.

Rounded Corners

Rounding the corners of a container can be done with: dp-rnd

Example: dp-rnd:[rotation*]
dp-rnd
dp-rnd:tl dp-rnd:br
The Elxir Haus
© 2024