Picazzo

The websites that are generated by Drzzle use a custom built front end framework (similar to bootstrap or material) called "Picazzo", which was specifically made for this application.

Below are some basic utilities and classes you can use to build elements via the "General Code" droplet. To see the full Picazzo documentation visit picazzo.drzzle.app

Grid System Basics

Picazzo contains a responsive 12 column grid system. These columns should always be wrapped in a .row div for layout purposes. See below:

<div class="row">
  <!-- columns here -->
</div>

Aside from the .col-* class, columns also need to have the .column class if you want adjacent columns like the example below:

.col-4
.col-4
.col-4

Here is what the example code would look like:

<div class="row">
  <div class="column col-4">
    .col-4
  </div>
  <div class="column col-4">
    .col-4
  </div>
  <div class="column col-4">
    .col-4
  </div>
</div>

All Column Classes

.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-3
.col-3
.col-3
.col-3
.col-4
.col-4
.col-4
.col-5
.col-4
.col-3
.col-6
.col-6
.col-7
.col-5
.col-8
.col-4
.col-9
.col-3
.col-10
.col-2
.col-11
.col-1
.col-12

5 Column Row

.col-2-4
.col-2-4
.col-2-4
.col-2-4
.col-2-4

Equal Height Columns

Equal height columns only take effect for desktop and tablet sized screens. Simply add the .eq-height class to the .row div (aka the parent of the columns). Then initialize the built in JS plugin. See below:

<div class="row eq-heights">
  <div class="column col-4">
    .col-4
  </div>
  <div class="column col-4">
    .col-4
  </div>
  <div class="column col-4">
    .col-4
  </div>
</div>

<script type="text/javascript">
  $('.eq-heights').equalheights();
</script>

Utilities

Here are some common utility classes that Picazzo offers out of the box.

Viewport Helpers

/* hide something (uses display none) */
.hide

/* only show in desktop */
.desktop-only

/* only show in tablet */
.tablet-only

/* only show in mobile */
.mobile-only

/* show in mobile and tablet, hide in desktop */
.no-desktop

/* show in mobile and desktop, hide in tablet */
.no-tablet

/* show in desktop and tablet, hide in mobile */
.no-mobile

Text Helpers

/* align text center */
.center-txt

/* align text right */
.right-txt

/* align text left */
.left-txt

/* solid white text color */
.white-txt

/* solid black text color */
.black-txt

/* slightly transparent white text color */
.white-fade-txt

/* slightly transparent black text color */
.black-fade-txt

←