Trellis CSS

A Divine CSS Base Framework.

Trellis is the best CSS framework if you want to quickly build web page layouts and want uninhibited style control. Trellis 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 to match your brand's stylings, then apply Trellis' classes which will take on your configuration file's styles to format your content. The Trellis CSS framework doesn’t include multitudes of properties that you’ll find yourself overriding. It is architected to focus specifically on foundational elements and structural properties and not get in your way. Trellis allows for an infinite grid width, its classes are prefixed for easy identification in your html, and it is light weight.

Divine Proportions
A unique feature to Trellis is it's 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.

Download the Trellis CSS Library and Configuration File

...Or link the below css file between the <head> </head> tags of your html to test drive it.

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

Once downloaded, organzie the files with eachother, modify the style variables in the configuration file to suite your brand, then include the Trellis CSS file in your project

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.

Note: 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
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

Font Faces

t-fnt:1
t-fnt:2
t-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.
t-txt:h1
t-txt:h2
t-txt:h3
t-txt:h4
t-txt:big
t-txt:med
t-txt:norm
t-txt:sm
t-txt:xsm

Text Weights

Weight support is dependent on font face.

t-fnt:100

t-fnt:200

t-fnt:300

t-fnt:400

t-fnt:500

t-fnt:600

t-fnt:700

t-fnt:800

t-fnt:light

t-fnt:bold

Text Styles

t-txt:italic
t-txt:uppercase
t-txt:underline

Text Position

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

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

Text Colors

t-txt:clr1

t-txt:clr2

t-txt:clr3

t-txt:clr4

t-txt:clr5

t-txt:clr6

t-txt:clr7

t-txt:clr8

Background Colors

t-bg:clr1
t-bg:clr2
t-bg:clr3
t-bg:clr4
t-bg:clr5
t-bg:clr6
t-bg:clr7
t-bg:clr8
t-bg:blk (t-bg:wht for white backgrounds)

Text Tones

t-txt:grey1

t-txt:grey2

t-txt:grey3

t-txt:grey4

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

Background Tones

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

Paddings

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

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

Side Specific Padding Styles

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

Screen Size Specific Padding Styles

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

Use a Divine Ratio

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

Margins

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

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

Side Specific Margins Styles

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

Screen Size Specific Margin Styles

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

Use a Divine Ratio

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

Set Columns Sizes

Use “t-grid” to make percentage based columns by increments of 5%.
t-grid:25pc
t-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.

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

Use a Divine Ratio

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

"offset"

t-marg:phi:[phi revolution]:offset:[screen size*]
The width of the negative space of the set PHI proportion to create properly sized columns.
t-grid:phi:-1
t-grid:phi:-1
t-grid:phi:-1
t-grid:phi:-1
t-grid:phi:-1
t-grid:phi:-1:offset
t-grid:phi:-2
t-grid:phi:-4
A "Golden Spiral" mosaic displayed using the the Divine Ratio classes
Additionally you can use the included CSS variable --t-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: t-grid:fit:[number]:[screen size*]

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

Flex Align

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

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

t-flex:fill is used to make sure columns fill the width in thier space.

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

Position

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

Use "t-contain" and "t-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 "t-pos:lt" or right using "t-pos:rt".

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

t-pos:rt
t-pos:cntr:m

Gutters

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

t-flex:fill is used to make sure columns fill the width in thier space.

Example: t-gutter:50pc
 
 
 

Display

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

Use “t-display“ to show and hide elements at differnt screen sizes.
Example: t-display:below:l and t-display:above:l
t-display:below:l
t-display:above:l
© 2023 The Elixir Haus