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 modifying 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 for centralized 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*
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.
Class Reference Documentation
Font Faces
Font Sizes
Text Weights
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
Text Position
Text position is defined in the following format: dp-txt:[side]:[screen size*]
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
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
Paddings
Padding is defined in the following format: dp-pad:[size*]:[side*]:[screen size*]
Side Specific Padding Styles
Screen Size Specific Padding Styles
Use a Divine Ratio
Margins
Margin spacing is defined in the following format: dp-marg:[size*]:[side*]:[screen size*]
Side Specific Margins Styles
Screen Size Specific Margin Styles
Use a Divine Ratio
Set Columns Sizes
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.
Use a Divine Ratio
Sizing
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:cntrPosition
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*]
Gutters
Gutters for columns are defined in the following format: dp-gutter:[size*]:[screen size*]
Display
Displaying elements by screensiz is defined in the following format: dp-display:[above/below]:[screen size*]
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*]