The Elixir Haus
trellis

Trellis CSS

A CSS base and framework.

Trellis is the best CSS framework if you want to quickly build responsive layouts and want total style control.

Trellis keeps styles to a configurable set of formatting and responsive layout classes. It’s a CSS framework that allows you the freedom to style elements as you need, and quickly structure your content while keeping global options and settings centralized.

The Trellis CSS framework doesn’t include multitudes of styles that you’ll find yourself overriding or limit your layout’s grid width. Many CSS frameworks limit your layouts to a maximum width or grid size, and are engineered to include many styles in an effort to get you up and running fast. Unfortunately these features become a hindrance when you need to achieve certain design requirements.

Link to Repo

Trellis does add certain style properties to some elements to help give you the “plainest” canvas for building upon. Additionally, Trellis’s styles are prefixed with a “t-” so they are easy to differentiate from your styles.

Some of the key styles Trellis adds are:

Box Sizing
Div, section, article, span, and img are set to “ Border-box” box sizing. This ensures that padding and borders to don’t enlarge the dimensions of those objects when they are applied.

P Tags
The top margin is removed from the first occurrence of a P tag within a container, and the bottom margin of the last P tag within a container. This allows for total control over the spacing of elements above and below articles.

Overflow
Div, section, article, img tags are all set to to have a “hidden” Overflow by default, to allow containers to properly encompass their elements.

Additionally Trellis uses a configuration file to set global SCSS variables for screen break points, colors, font sizes, and the site’s maximum width. It also allows you to set a site padding variable. This variable helps maintain consistent spacing throughout your site by using it and factors of it.

Text and Formating

Configure a set of font size classes for consistency.

.t-txt-h1

.t-txt-h2

.t-txt-h3

.t-txt-h4

.t-txt-big

.t-txt-med

.t-txt-norm

.t-txt-sm

Colors

Establish a formal color and tone pallet

.t-txt-clr1

.t-txt-clr2

.t-txt-clr3

.t-txt-grey1

.t-txt-grey2

.t-txt-grey3

.t-bg-clr1
.t-bg-clr2
.t-bg-clr3
.t-bg-grey1
.t-bg-grey2
.t-bg-grey3

Align Text

.t-txt-cntr

Align text center

.t-txt-rt

Align text right

Element Positioning

.t-pos-rel : Position element “relative”.

.t-pos-abs : Position element “absolute”.

.t-pos-fixed : Position element “fixed”.

 

.t-pos-cntr
Element requires a width.

.t-pos-rt
Element requires a width.

Layout

.t-valigner : Vertical Align Elements – Parent element needs set height.

.t-valign : Vertically aligned child element.

Establish a site width

.t-contain
Adds the site’s “max-width” in order to contain elements. Used typically as the main content container of the site. Often used with .t-pos-cntr to center the container within the browser.

Responsive Grids

Defined Columns Widths

Grid elements are positioned left and displayed as blocks. They can be set to specific responsive widths using the class formats below.

Replaced the “#” with any number 1-100 in increments of 5.
I.E: 0,5,10,15…

  • .t-view-xs-#pc : Show this width on Mobile Portrait screen widths and up.
  • .t-view-s-#pc : Show this width up to Tablet Portrait/Mobile Landscape screen widths.
  • .t-view-m-#pc : Show this width on Tablet Landscape screen widths and up.
  • .t-view-l-#pc : Show this width on Desktop screen widths and up.

.t-view-m-25pc

.t-view-m-45pc

.t-view-m-30pc

Columns with multiple width classes for different screen sizes

.t-view-l-25pc, .t-view-m-33pc, t-view-s-50pc

.t-view-l-45pc, .t-view-m-33pc, t-view-s-50pc

.t-view-l-30pc, .t-view-m-33pc, t-view-s-50pc

Fit equal columns of elements

  • .t-view-xs-fit-# : Show this width on Mobile Portrait screen set widths and up.
  • .t-view-s-fit-# : Show this width up to Tablet Portrait/Mobile Landscape screen set widths.
  • .t-view-m-fit-# : Show this width on Tablet Landscape screen set widths and up.
  • .t-view-l-fit-# : Show this width on Desktop screen set widths and up.
Replace “#” with with any number 1-100.
.t-view-m-fit-3

 

 

 

Show Elements Responsively

  • .t-hide-under-l : Hide element under set Desktop browser widt.
  • .t-hide-under-m : Hide element under set Tablet Landscape browser width.
  • .t-hide-under-s : Hide element under set Tablet Portrait/Mobile Landscape browser width.
  • .t-hide-under-xs : Hide element under set Mobile Portrait Landscape browser width.
  • .t-show-under-l : Show element only under set Desktop browser width.
  • .t-show-under-m : Show element only under set Tablet Landscape browser width.
  • .t-show-under-s : Show element only under set Tablet Portrait/Mobile Landscape browser width.
  • .t-show-under-xs : Show element only under set Mobile Portrait Landscape browser width.

Display <li>’s Horizontally

.t-horiz : Add to UL tag or UL parent tag.

Display Elements based on Screen Width

Hide elements under specific screen sizes
(The Elements below will hide as the browser is sized down)

.t-hide-under-l

.t-hide-under-m

.t-hide-under-s

Show elements only under specific screen sizes
(Elements below will appear as the browser is sized down)

.t-show-under-l

.t-show-under-m

.t-show-under-s

Navigation

Using a cobination of columns and “t-show/t-hide” styles, you can exquisitely implement a responsive header navigation with Trellis

The “Scroll Nav” is Trellis’ variation of navigation that appears when you scroll up the page. The revealing of the nav when scrolling is synced with the mouse’s scrolling increments — it doesn’t just animate down when the user scrolls up.

The “Scroll Nav” is triggered when the nav’s outmost containing element has an ID of “t-scrollnav-holder” and the content of it’s child element, which should contain the contents of the nav, has an ID of “t-scrollnav”. This funcitonality requires the use of trellis.js and Wicky Nilliams’ headroom.js

Example “Scroll Nav” Header Code

<header  id="t-scrollnav-holder">
    <div id="t-scrollnav" class="t-bg-wht">
        <nav class="t-horiz">
            <div class="t-contain t-pos-cntr t-pos-rel">
                <div class="t-navbar t-clear">
<!-- ///////////////////////////////////////////////////
                       Site Logo 
/////////////////////////////////////////////////// -->
                    <div class="logo t-view-m-20pc t-valigner" >
                        <div class="t-nofloat t-valign pad-half-left t-txt-cntr" >
                            <div class="t-bg-grey1  t-view-xs-30pc t-view-m-100pc t-pos-cntr "></div>
                        </div>
                    </div>
<!-- ///////////////////////////////////////////////////
                   Mobile Menu Button
/////////////////////////////////////////////////// -->
                    <div class="t-button-mobile-menu t-show-under-m t-bg-grey2">
                        <div class="t-toggle-icon"></div>
                    </div>
<!-- ///////////////////////////////////////////////////
                   Desktop Nav Links
/////////////////////////////////////////////////// -->
                    <div class="t-hide-under-m t-view-m-80pc t-pos-rt t-txt-rt t-pos-rt">
                        <ul class="t-menu t-horiz  t-txt-tr">
                            <li><a href="">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 1</a></li>
                        </ul>
                    </div>
<!-- ///////////////////////////////////////////////////
                 Mobile Version of Nav 
/////////////////////////////////////////////////// -->
                    <div class="t-nav-mobile t-show-under-m">
                        <div class="t-nav-scroller">
                            <ul class="t-menu t-view-m-60pc">
                               <li><a href="">Link 1</a></li>
                               <li><a href="#">Link 1</a></li>
                               <li><a href="#">Link 1</a></li>
                               <li><a href="#">Link 1</a></li>
                               <li><a href="#">Link 1</a></li>
                               <li><a href="#">Link 1</a></li>
                           </ul>
                       </div>
                   </div>  
<!-- ///////////////////////////////////////////////////
               End Mobile Version of Nav 
/////////////////////////////////////////////////// -->
               </div> 
           </div> 
       </nav>
   </div>
</header>

.t-mobmenu
When the mobile menu is expanded, the class .t-mobmenu is added to the HTML tag (when the jquery.trellis.js script is included). This allows you to target any neccessary styling to elements while the menu is open. For example, it’s often necessary to set the body and html to “overflow:hidden” and position them absolutely so the page doesn’t scroll when scrolling the open menu.

Link to Repo

Loading...