Lennox®is more than HVAC.
It’s a promise.
Introducing Cirrus, The Lennox Design System
Cirrus is sophistication.
Just like its high altitude namesake, Cirrus embodies the light, airy, sophisticated simplicity of the Lennox brand. Cirrus uses spacial awareness, elegant typography, a naturally saturated color palette, and an elevated UI system to embody the Lennox brand across all digital touch points. Cirrus reimagines the Lennox digital experience and continually evolves with our digital product footprint.
Efficiency
Respect a user’s time and workflow.
Consistency
Rely on familiar visual styles and similar interactions for common patterns across the suite of Lennox digital products.
Sophistication
Utilize modern visual and interaction conventions. Find opportunities to create and own innovative ideas and solutions.
Get The Cirrus UI Kit
The Cirrus UI Kit contains the most common components used in Lennox digital products. It relies on the use of symbols and symbol overrides to allow for quick assembly of components in supported configurations. UI kits are currently available for Adobe XD.
Introduction
Cirrus, The Lennox Design System, takes inspiration from the high altitude, thin, airy clouds of the upper atmosphere.
Quick start
CSS
Copy-paste the stylesheet `link` into your `head` before all other stylesheets to load our CSS.
JS
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. We use jQuery's slim build but the full version is also supported.
Place the `script`s near the end of your pages, right before the closing `body` tag, to enable them. jQuery must come first, and then our JavaScript plugins (which includes Popper JS).
Components
Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If you're unsure about the page structure, keep reading for an example page template.
Show components requiring JavaScript
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Dropdowns for displaying and positioning (also requires Popper.js)
- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse plugin to implement responsive behavior
- Toasts for displaying and dismissing
- Tooltips and popovers for displaying and positioning (also requires Popper.js)
- Scrollspy for scroll behavior and navigation updates
Starter template
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
<!doctype html>
<html class="cirrus" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://devcirrus.z21.web.core.windows.net/icons/font-awesome-5/css/all.min.css">
<!-- Cirrus CSS -->
<link rel="stylesheet" href="https://devcirrus.z21.web.core.windows.net/dist/css/cirrus.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery, and Cirrus JS -->
<!--<script src="https://devcirrus.z21.web.core.windows.net/jquery.3.5.1.min.js"></script>-->
<script src="https://devcirrus.z21.web.core.windows.net/jquery.slim.3.5.1.min.js"></script>
<script src="https://devcirrus.z21.web.core.windows.net/dist/js/cirrus.bundle.min.js"></script>
</body>
</html>That's all you need for overall page requirements. Visit the Layout docs to start laying out your site's content and components.
FYI
If you are including this on a project that has an older version of jQuery, you must set jquery to be no conflict. You can use the below script. This should go AFTER you load the newest version of jQuery and the Cirrus Bundle.
Example
<script src="https://devcirrus.z21.web.core.windows.net/jquery.slim.3.5.1.min.js"></script>
<script src="https://devcirrus.z21.web.core.windows.net/dist/js/cirrus.bundle.min.js"></script>
<script>var Cirrus = jQuery.noConflict(true)</script>
<script>Cirrus('#my-modal-ID').modal("show")</script>You have to reference any Cirrus related component with the prefix "Cirrus" instead of the normal jQuery "$"
Important globals
Cirrus employs a handful of important global styles and settings that you'll need to be aware of when using it, all of which are almost exclusively geared towards the *normalization* of cross browser styles. Let's dive in.
HTML5 doctype
Cirrus requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
<!doctype html>
<html lang="en">
...
</html>Responsive meta tag
Cirrus is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `head`.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">You can see an example of this in action in the [starter template](#starter-template).
Box-sizing
For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
On the rare occasion you need to override it, use something like the following:
.selector-for-some-widget {
box-sizing: content-box;
}With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
Learn more about box model and sizing at CSS Tricks.
Reboot
For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
