Quartzo

Getting Started

What's Quartzo?

Quartzo is a CSS framework created to be simple and easy to use. Its components, for the most part, do not use javascript, allowing you to build complete layouts only with HTML and CSS.

How to import?

Download Quartzo framework and copy CSS and JS files to your project folder.

$ cd project_path
$ wget https://github.com/brumazzi/quartzo.css/archive/refs/tags/v1.3.0.zip
$ unzip quartzo-1.3.0.zip
$ cp quartzo-1.3.0/dist/css/quartzo.css css_folder_path

Alert

Display feedback or contextual messages for standard user actions.

<div class="my-1 alert">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore velit enim, reprehenderit quo tempora porro odit placeat soluta necessitatibus corrupti fugit excepturi? Aut animi consectetur hic dolorum quis! Nostrum, mollitia.</div>
<div class="my-1 alert alert-primary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores alias nisi architecto laboriosam nulla debitis possimus, veritatis in quisquam voluptatibus deleniti! Sapiente esse deleniti perspiciatis deserunt culpa repellendus praesentium dolor.</div>
<div class="my-1 alert alert-success">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores alias nisi architecto laboriosam nulla debitis possimus, veritatis in quisquam voluptatibus deleniti! Sapiente esse deleniti perspiciatis deserunt culpa repellendus praesentium dolor.</div>
<div class="my-1 alert alert-warning">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores alias nisi architecto laboriosam nulla debitis possimus, veritatis in quisquam voluptatibus deleniti! Sapiente esse deleniti perspiciatis deserunt culpa repellendus praesentium dolor.</div>
<div class="my-1 alert alert-danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit minus impedit nemo deleniti dolores quia, consequatur facilis quae corrupti perferendis cum nostrum sed reiciendis, tempora tenetur similique eos ea? Omnis?</div>
<div class="my-1 alert alert-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores alias nisi architecto laboriosam nulla debitis possimus, veritatis in quisquam voluptatibus deleniti! Sapiente esse deleniti perspiciatis deserunt culpa repellendus praesentium dolor.</div>
<div class="my-1 alert alert-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores alias nisi architecto laboriosam nulla debitis possimus, veritatis in quisquam voluptatibus deleniti! Sapiente esse deleniti perspiciatis deserunt culpa repellendus praesentium dolor.</div>

Badge

Use Badges to flag or set tags.

<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge">Normal</span>

Border

Define borders to components.

<span style="width:80px;height:80px" class="mx-2 d-inline-block border"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border-top"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border-right"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border-bottom"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border-left"></span>

<span style="width:80px;height:80px" class="mx-2 d-inline-block border border-primary"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border border-success"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border border-danger"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border border-warning"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block border border-info"></span>

Button

Define custom action buttons.

<button class="button">Normal</button>
<button class="button button-primary">Primary</button>
<button class="button button-success">Success</button>
<button class="button button-danger">Danger</button>
<button class="button button-warning">Warning</button>
<button class="button button-info">Info</button>
<button class="button" disabled>Disabled</button>
<a href="" class="button button-outline button-danger">Outline</a>

Card

Create information block or a profile card.

<div class="card border border-muted">
  <div class="card-header">
    <h3>Lorem</h3>
  </div>
  <div class="card-body text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi laborum, distinctio, neque esse, accusantium tempore est quam aliquid deleniti ipsum doloremque voluptatibus inventore suscipit sunt ad mollitia quibusdam odit accusamus.</div>
  <div class="card-footer text-right">Lorem</div>
</div>

Color

Change background or foreground with different shades of predefined colors.

<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-primary"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-success"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-danger"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-warning"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-info"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-secondary"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-light"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-dark"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-muted"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-tertiary"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-quaternary"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-quinary"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-primary-lighten"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-success-lighten"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-danger-lighten"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-warning-lighten"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-info-lighten"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-primary-darken"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-success-darken"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-danger-darken"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-warning-darken"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-info-darken"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-dark-lighten"></span>
<span style="width:80px;height:80px" class="mx-2 d-inline-block bg-light-darken"></span>

<span style="width:80px" class="mx-2 d-inline-block text-primary">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-success">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-danger">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-warning">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-info">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-secondary">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-light">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-dark">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-muted">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-tertiary">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-quaternary">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-quinary">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-primary-lighten">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-success-lighten">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-danger-lighten">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-warning-lighten">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-info-lighten">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-primary-darken">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-success-darken">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-danger-darken">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-warning-darken">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-info-darken">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-dark-lighten">Lorem</span>
<span style="width:80px" class="mx-2 d-inline-block text-light-darken">Lorem</span>

Display

Change the display of your tags.

<span style="width:120px;height:60px" class="my-2 d-none mx-2 bg-primary">None</span>
<span style="width:120px;height:60px" class="my-2 d-inline mx-2 bg-primary">Inline</span>
<span style="width:120px;height:60px" class="my-2 d-inline-block mx-2 bg-primary">Inline-Block</span>
<span style="width:120px;height:60px" class="my-2 d-block mx-2 bg-primary">Block</span>
<span style="width:120px;height:60px" class="my-2 d-table mx-2 bg-primary">Table</span>
<span style="width:120px;height:60px" class="my-2 d-flex mx-2 bg-primary">Flex</span>

Dropdown

Create collapsed cards, list or menus.

<details class="dropdown w-20">
  <summary>Dropdown</summary>
  <div class="content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus voluptatem, minus veritatis similique, dolore magnam possimus illum repudiandae tempore quibusdam aliquam nostrum voluptates. Possimus ut ducimus explicabo unde totam vitae!</p>
  </div>
</details>

<details class="dropdown w-20 no-border">
  <summary class="button">Dropdown</summary>
  <div class="content">
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus voluptatem, minus veritatis similique, dolore magnam possimus illum repudiandae tempore quibusdam aliquam nostrum voluptates. Possimus ut ducimus explicabo unde totam vitae!</p>
  </div>
</details>

Grid

Organize the layout of forms or other components.

<div class="row">
  <div class="bg-primary column-1">column-1</div>
  <div class="bg-muted column-2">column-2</div>
  <div class="bg-primary column-3">column-3</div>
  <div class="bg-muted column-4">column-4</div>
  <div class="bg-primary column-5">column-5</div>
  <div class="bg-muted column-6">column-6</div>
  <div class="bg-primary column-7">column-7</div>
  <div class="bg-muted column-8">column-8</div>
  <div class="bg-primary column-9">column-9</div>
  <div class="bg-muted column-10">column-10</div>
  <div class="bg-primary column-11">column-11</div>
  <div class="bg-muted column-12">column-12</div>
</div>

<div class="row flex flex-column">
  <div class="bg-primary column">Lorem</div>
  <div class="bg-muted column">Lorem</div>
  <div class="bg-primary column">Lorem</div>
</div>

<div class="row flex flex-column-reverse">
  <div class="p-1 bg-primary column">Lorem 1</div>
  <div class="p-1 bg-muted column">Lorem 2</div>
  <div class="p-1 bg-primary column">Lorem 3</div>
</div>

<div class="row flex justify-contents-center">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-muted column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex justify-contents-between">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex justify-contents-evenly">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex justify-contents-around">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex justify-contents-end">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-muted column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex align-items-center" style="height: 200px;">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-muted column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex align-items-end" style="height: 200px;">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-muted column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex align-items-start" style="height: 200px;">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-muted column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

<div class="row flex align-items-stretch" style="height: 200px;">
  <div class="p-1 bg-primary column">Lorem</div>
  <div class="p-1 bg-muted column">Lorem</div>
  <div class="p-1 bg-primary column">Lorem</div>
</div>

Input

Use custom inputs visually.

<div class="row">
  <div class="column-3 p-1"><input type="text" class="input" name="" id=""></div>
  <div class="column-3 p-1"><input type="number" class="input" name="" id=""></div>
  <div class="column-3 p-1"><input type="date" class="input" name="" id=""></div>
  <div class="column-3 p-1">
    <select class="input" name="" id="">
      <option value="">Option 1</option>
      <option value="">Option 2</option>
      <option value="">Option 3</option>
      <option value="">Option 4</option>
      <option value="">Option 5</option>
    </select>
  </div>
</div>

<div class="row flex flex-column">
  <div class="column-6 p-1">
    <input type="checkbox" name="" id="" class="input">
  </div>
  <div class="column-6 p-1">
    <input type="checkbox" name="" id="" class="switch input">
  </div>
  <div class="column-6 p-1">
    <input type="radio" name="radio" id="" class="input">
  </div>
  <div class="column-6 p-1">
    <input type="radio" name="radio" id="" class="switch input">
  </div>
</div>

Modal

Display a message or notification to the user.

<section>
 <dialog id="modalDialog" layout-width="sm">
  <h3>Modal Dialog</h3>
  <p class="my-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit culpa temporibus ducimus, ratione, quidem aperiam obcaecati mollitia accusamus nulla consequatur beatae sit veniam aspernatur tenetur ad fugiat ipsa et inventore.</p>
  <form class="footer" action="" method="dialog">
   <button value="0" class="button button-danger">Close</button>
  </form>
 </dialog>

 <button onclick="modalDialog.showModal()" class="button">Show Modal</button>
</section>

Navbar

Open a side navigation menu.

<details class="navbar-content">
 <summary class="button button-outline">Show Navbar</summary>
 <nav class="navbar">
  <div class="navbar-header">Lorem</div>
  <ul class="navbar-items">
   <li class="navbar-item"><a href="javascript:void(0)">Lorem 1</a></li>
   <li class="navbar-item"><a href="javascript:void(0)">Lorem 2</a></li>
   <li class="navbar-item"><a href="javascript:void(0)">Lorem 3</a></li>
   <li class="navbar-item"><a href="javascript:void(0)">Lorem 4</a></li>
   <li class="navbar-item"><a href="javascript:void(0)">Lorem 5</a></li>
  </ul>
  <div class="navbar-footer">Lorem</div>
 </nav>
</details>

Pagination

Create pagination for tables and lists.

<ul class="pagination">
  <li class="active"><a href="#">1</a></li>
  <li class="disabled"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
</ul>

• 1
• 2
• 3
• 4

<ul class="pagination pagination-primary">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

<ul class="pagination pagination-danger">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

Progress

Optimize page and file loads.

<progress layout-size="sm" value="30" max="100"></progress>
<progress value="30" max="100"></progress>
<progress layout-size="lg" value="30" max="100"></progress>
<progress class="progress-primary"></progress>
<progress class="progress-success"></progress>
<progress class="progress-danger"></progress>
<progress class="progress-warning" animation="center-open"></progress>
<progress class="progress-info" animation="left-right"></progress>
<progress class="progress-secondary"></progress>

Animation compatible with firefox.

Space, Margin and Size

Add or remove spacing and set dimensions for your components.

<span class="p-0 bg-primary">padding p-0</span>
<span class="p-1 bg-primary">padding p-1</span>
<span class="p-2 bg-primary">padding p-2</span>
<span class="p-3 bg-primary">padding p-3</span>
<span class="p-4 bg-primary">padding p-4</span>
<span class="p-5 bg-primary">padding p-5</span>

<span class="pt-4 bg-primary">padding p-4</span>
<span class="pb-4 bg-primary">padding p-4</span>
<span class="pl-4 bg-primary">padding p-4</span>
<span class="pr-4 bg-primary">padding p-4</span>

<span class="bg-primary ml-4">margin m-4</span>
<span class="bg-primary mt-4">margin m-4</span>
<span class="bg-primary mb-4">margin m-4</span>
<span class="bg-primary mr-4">margin m-4</span>

<span class="bg-primary ml-lg-4">margin ml-lg-4</span>
<span class="bg-primary mt-lg-4">margin mt-lg-4</span>
<span class="bg-primary mb-lg-4">margin mb-lg-4</span>
<span class="bg-primary mr-lg-4">margin mr-lg-4</span>

<div class="w-10 mx-1 my-1 bg-primary">10%</div>
<div class="w-20 mx-1 my-1 bg-primary">20%</div>
<div class="w-30 mx-1 my-1 bg-primary">30%</div>
<div class="w-40 mx-1 my-1 bg-primary">40%</div>
<div class="w-50 mx-1 my-1 bg-primary">50%</div>
<div class="w-60 mx-1 my-1 bg-primary">60%</div>
<div class="w-70 mx-1 my-1 bg-primary">70%</div>
<div class="w-80 mx-1 my-1 bg-primary">80%</div>
<div class="w-90 mx-1 my-1 bg-primary">90%</div>
<div class="w-100 mx-1 my-1 bg-primary">100%</div>
<div class="w-25 mx-1 my-1 bg-primary">25%</div>
<div class="w-75 mx-1 my-1 bg-primary">75%</div>

<div class="text-center bg-primary d-block no-rounded" style="width:120px;height:120px;line-height: 120px;">no-rounded</div>
<div class="text-center bg-primary d-block rounded" style="width:120px;height:120px;line-height: 120px;">rounded</div>
<div class="text-center bg-primary d-block rounded-2" style="width:120px;height:120px;line-height: 120px;">rounded-2</div>

Tooltip

<button class="button" tooltip-text="Hi! I top tooltip" layout-tooltip="top">Tooltip top</button>
<button class="button" tooltip-text="Hi! I bottom tooltip" layout-tooltip="bottom">Tooltip bottom</button>
<button class="button" tooltip-text="Hi! I left tooltip" layout-tooltip="left">Tooltip left</button>
<button class="button" tooltip-text="Hi! I right tooltip" layout-tooltip="right">Tooltip right</button>

Global Effects

Define presets for all components of your project.

<body layout-rounded="lg">
  ...
</body>

<body layout-rounded="sm">
  ...
</body>

<body layout-transition="false">
  ...
</body>

<body layout-transition="true">
  ...
</body>

<button class="button button-warning button-outline bg-hover-danger" transitions="background-color">Transition Button!</button>