Cirrus

#Start Guide

Getting started with a new framework can be difficult sometimes. This guide aims to make understanding what types of classes to use and integrate with super simple to get you up to speed quickly.

At a high level, the framework is broken down into 3 separate types of stylesheets that are often used together:

  • Base — consists of fonts, colors, layout/positioning, and other essential classes.
  • Component — consists of prebuilt components that can be added to any project right away.
  • Utilities — consists of atomic classes to modify specific styles of elements.

To help you better understand what each type of styles are used for, we will be building an example portfolio page. The final result is shown below.

Note that this tutorial mainly focuses on styling a page and does not include any functionality. Feel free to extend and modify it on your own and see what you can come up with. 😊

#Base

The foundation of any page styled with Cirrus starts with its base styles. The base styles of Cirrus consist of:

  • Reset and base stying.
  • Animations — transitions and animation related styles.
  • Fonts — font sizes, font families, textual elements, etc.
  • Grid — CSS grid utility classes.
  • Layout — content, rows, columns, level, heights, widths, etc.
  • Media — videos, figures, images, etc.
  • Modifiers — input variants, text and background color classes.
  • Spacing — margin and padding.

Much of the styling here is minimal and won't require much effort on your end to use in your project. Its main goal is to reset the page and style only what's necessary to setup the foundation for Cirrus components.

To setup our portfolio page, we will start with the base structure. We will start with a div with min-h-100p to allow it to span the height of the screen and a background color of bg-gray-100. Inside of it will have 3 section tags, each for the landing, stats, and contact form.

<div class="bg-gray-100 min-h-100p">
  <section>
    <div class="hero">
      <div class="hero-body">
        <div class="content px-12-lg px-24-xl">
        </div>
      </div>
    </div>
  </section>
</div>

Starting with the first section, we will start by defining a hero with content inside the hero-body to vertically and horizontally the text and image. Inside of hero-body, we'll add another content class to further pad the text

...
<div class="hero">
  <div class="hero-body">
    <div class="content px-12-lg px-24-xl">
      <div class="">
        <div>
          <img class="w-100p w-60p-sm w-auto-md" src="https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" />
        </div>
        <div>
          <h1 class="headline-3">hey!</h1>
          <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
  </div>
</div>
...

The content class is one of the most essential classes used in Cirrus to add responsiveness and center alignment to any group of elements on a page.

For the stats and forms section, we'll just add in the other base classes used.

...
<section class="mb-12">
  <div class="content px-2 px-12-lg px-24-xl">
    <h2>My Stats</h2>
  </div>
</section>
<section class="mb-12">
  <div class="content px-2 px-12-lg px-24-xl">
    <h3>Want to work together?</h3>
    <p>Drop me a line!</p>
  </div>
</section>
...

At this point, we should get a page that looks like this:

#Components

Not too shabby with only the base styling. We can use component styles to quickly add crucial parts to our portfolio without much effort. Component styles are a majority of the styles you see on the left sidebar, which include:

  • Buttons
  • Elements
  • Forms

Here, we will add in components to really bring the page to life. Let's start by adding the Header layout component to provide navigation to our portfolio.

...
  <div class="header header-clear u-unselectable header-animated px-0 px-2-md">
    <div class="header-brand">
      <div class="nav-item no-hover">
        <a>
          <h6 class="tracking-tight">John Doe</h6>
        </a>
      </div>
      <div class="nav-item nav-btn" id="header-btn">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="header-nav" id="header-menu" role="button">
      <div class="nav-right text-sm">
        <div class="nav-item">
          <a href="#">Dribbble</a>
        </div>
        <div class="nav-item">
          <a href="#">LinkedIn</a>
        </div>
        <div class="nav-item">
          <a href="#">About</a>
        </div>
        <div class="nav-item">
          <a href="#">Contact</a>
        </div>
        <div class="nav-item">
          <a class="btn btn-black btn--sm py-0" href="#">View Work</a>
        </div>
      </div>
    </div>
  </div>
...

Next, we will fill out the stats section to showcase some testimonials, skills, etc. A great component we can use is a Frame which provides a structured way to layout components in a panel with a shadow. Inside the frame, we can throw in an avatar, some stats, and some buttons for viewing work and hiring.

To showcase a list of skills, we can use a group of Tags. To fit the overall design language, let's set all of them to uppercase and with a background of bg-black.

...
<section class="mb-12">
  <div class="content px-2 px-12-lg px-24-xl">
    <h2>My Stats</h2>
    <div>
      <div>
        <div class="frame bg-white">
          <div class="frame__header">
            <div>
              <figure class="avatar bg-transparent">
                <img src="https://images.unsplash.com/photo-1524135220673-c731600a1a50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80">
              </figure>
              <div>
                <h6 class="frame__title">John Doe</h6>
                <div class="frame__subtitle">Freelance Dev + Photographer</div>
              </div>
            </div>
          </div>
          <div class="frame__body">
            <div class="px-2 py-2 bg-black">
              <div class="text-white">
                <div>
                  <div>
                    <h6 class="mb-0">56</h6>
                    <p class="uppercase font-bold text-sm">Clients</p>
                  </div>
                  <div>
                    <h6 class="mb-0">100%</h6>
                    <p class="uppercase font-bold text-sm">On Time</p>
                  </div>
                  <div>
                    <h6 class="mb-0">4.8</h6>
                    <p class="uppercase font-bold text-sm">Stars</p>
                  </div>
                </div>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
              </div>
            </div>
          </div>
          <div class="frame__footer">
            <div class="space"></div>
            <div>
              <button class="btn-black outline">View Work</button>
              <button class="btn-black">Hire Me</button>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="tag-container">
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">Adobe Suite</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">Figma</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">Invision</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">UI Design</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">UX Design</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">Typography</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">HTML</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">CSS</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">JavaScript</div>
          <div class="tag px-2 py-1 bg-black text-white text-md font-bold uppercase">TypeScript</div>
        </div>
      </div>
    </div>
  </div>
</section>
...

Finally, what use is a portfolio if no one can contact us to collaborate on some awesome projects? We can simply get a form going just by inserting some Inputs and grouping them.

At the bottom we can add Spacing to add some padding at the bottom.

...
<section class="mb-12">
<div class="content px-2 px-12-lg px-24-xl">
  <h3>Want to work together?</h3>
  <p>Drop me a line!</p>
  <div class="mb-1">
    <label class="m-0 mb-1">
      <b>Contact Info</b>
    </label>
    <div>
      <input placeholder="Name" />
      <input placeholder="Email" />
    </div>
  </div>
  <div class="mb-1">
    <label class="m-0 mb-1">
      <b>Message</b>
    </label>
    <textarea placeholder="Enter your message"></textarea>
  </div>
  <button class="btn-black">Submit</button>
</div>
</section>
<div class="space"></div>
...

With the components added in, our portfolio should look much better.

#Utilities

The portfolio looks good, but it can definitely be better. There are a couple things we would want to lay out differently such as the landing section, rounding images, shadows, etc.

This is where utility classes come in -- which can be found on the left sidebar. New classes are added quite frequently so be sure to be on the lookout for when they are released.

First, let's use the u-flex utility to get the image in the landing section to the left of the text. We can then add u-round-xs u-shadow-lg to round the image a bit and add a shadow.

...
  <div class="hero">
    <div class="hero-body">
      <div class="content px-12-lg px-24-xl">
        <div class="u-flex u-items-center u-gap-4 u-flex-column u-gap-8-lg u-flex-row-md">
          <div>
            <img class="u-round-xs w-100p w-60p-sm w-auto-md u-shadow-lg" src="https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" />
          </div>
          <div>
            <h1 class="headline-3">hey!</h1>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
...

For the stats frame, let's center the text with u-text-center. We should also tidy up the body by adding u-round-sm u-shadow-lg to the div outside of the text. For the div with the text, use u-text-center to center the text. The avatar can stand out more if we add u-shadow-lg.

...
  <div class="frame__header u-text-center">
    <div>
      <figure class="avatar bg-transparent u-shadow-lg">
        <img src="https://images.unsplash.com/photo-1524135220673-c731600a1a50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80"></figure>
        <div>
          <h6 class="frame__title">John Doe</h6>
          <div class="frame__subtitle">Freelance Dev + Photographer</div>
        </div>
    </div>
  </div>
...

The stats should be adjacent to each other. We can do this with the flexbox utils u-flex u-justify-center u-gap-3. The flexbox classes set the stats divs adjacent to each other and we make them centered horizontally separated by 1.5rem from each other.

...
  <div class="frame__body">
    <div class="px-2 py-2 bg-black u-round-sm u-shadow-lg">
      <div class="u-text-center text-white">
        <div class="u-flex u-justify-center u-gap-3">
          <div>
            <h6 class="mb-0">56</h6>
            <p class="uppercase font-bold text-sm">Clients</p>
          </div>
          <div>
            <h6 class="mb-0">100%</h6>
            <p class="uppercase font-bold text-sm">On Time</p>
          </div>
          <div>
            <h6 class="mb-0">4.8</h6>
            <p class="uppercase font-bold text-sm">Stars</p>
          </div>
        </div>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat
          nulla pariatur.</p>
      </div>
    </div>
  </div>
...

The buttons should also fill the bottom and be adjacent to each other. We can use the u-flex u-gap-1 classes on the button containing div. For the "Hire Me" button, we can stretch it by setting its flex-grow to 1 with u-flex-grow-1.

...
  <div class="frame__footer">
    <div class="space"></div>
    <div class="u-flex u-gap-1">
      <button class="btn-black outline">View Work</button>
      <button class="btn-black u-flex-grow-1">Hire Me</button>
    </div>
  </div>
...

For the form, we can align the Contact Info inputs next to each other using u-flex u-gap-1. The submit button should also be on the right using the u-pull-right class.

...
<section class="mb-12">
  <div class="content px-2 px-12-lg px-24-xl">
    <h3>Want to work together?</h3>
    <p>Drop me a line!</p>
    <div class="mb-1">
      <label class="m-0 mb-1">
        <b>Contact Info</b>
      </label>
      <div class="u-flex u-gap-1">
        <input placeholder="Name" />
        <input placeholder="Email" />
      </div>
    </div>
    <div class="mb-1">
      <label class="m-0 mb-1">
        <b>Message</b>
      </label>
      <textarea placeholder="Enter your message"></textarea>
    </div>
    <button class="btn-black u-pull-right">Submit</button>
  </div>
</section>
...

After these changes, you should be left with the final product.

#Wrapping Up

I hope that guide was a useful introduction to developing your project with Cirrus. The portfolio here is by no means a finished product. There are many other things you can add such as more pages, a working dropdown hamburger menu, a working form, etc.

To give you a small hint, you can get a working dropdown hamburger menu using a small JavaScript snippet you can find here.