Documentation

Styling Variables

Much of the look and feel of condensate can be changed using the styling variables, including some unique features not found in most CSS libraries like "spacing" which changes how condensed/spread-out things are by changing margins, padding, etc.

You can independently change various colors for both light mode ("lm-") and dark mode ("dm-"), or if you need to change a color for both there are corresponding variables with no prefix.

You can change the blockquote style from a horizontal bar to an oversized left quotation mark by setting blockquote-border: 0; and blockquote-quotemark: visible;

The "-border" variables are all border width. 

--font-size
--font-family
--header-font-family
--mono-font-family
--border-radius
--border-width
--panel-border
--input-border
--button-border
--button-border-radius
--button-group-sep-border
--table-border
--table-v-border
--table-h-border
--table-header-bg
--table-body-bg
--blockquote-border
--blockquote-quotemark
--blockquote-quotemark-font
--spacing
                    
--dm-font-color
--dm-alt-font-color
--dm-check-color
--dm-background-color
--dm-alt-background-color
--dm-panel-color
--dm-button-color
--dm-primary-color
--dm-secondary-color
--dm-success-color
--dm-warning-color
--dm-error-color
--dm-border-color
--dm-hover-brightness
--dm-alt-hover-brightness
                    
--lm-font-color
--lm-alt-font-color
--lm-check-color
--lm-background-color
--lm-alt-background-color
--lm-panel-color
--lm-button-color
--lm-primary-color
--lm-secondary-color
--lm-success-color
--lm-warning-color
--lm-error-color
--lm-border-color
--lm-hover-brightness
--lm-alt-hover-brightness

Typography

Headings are automatically bolded, but if you want them to be larger you'll need to use the font size classes.

The various semantic color classes (primary, secondary, success, etc.) can be used on text as shown.

The icon class is meant to be used with emojis, making them solid color silhouettes so they can be used as icons.

<h1>Heading</h1>
<p>Text</p>
<code>Code block</code>
<kbd>Keyboard keys</kbd>
<ins>Inserted text</ins>
<del>Deleted text</del>
<i>Italic text</i>
<b>Bold text</b>
<em>Emphasized text</em>
<strong>Strong text</strong>
<q>Quote text</q>
<blockquote>Blockquote text. Condensate also supports oversized left quotation mark styled blockquotes, which you can enable with variables.</blockquote>
<mark>Marked text</mark>
<p class="font-xl">Extra large text</p>
<p class="font-lg">Large text</p>
<p class="font-md">Medium text</p>
<p class="font-sm">Small text</p>
<p class="bold">Bold text</p>
<p class="italic">Italic text</p>
<p class="underline">Underline text</p>
<p class="strike-through">Strike-through text</p>
<p class="primary">Primary text</p>
<p class="secondary">Secondary text</p>
<p class="success">Success text</p>
<p class="warning">Warning text</p>
<p class="error">Error text</p>
<span class="icon">❤️ 🔧 🌐 ⚙️</span>

Heading

Text

Code block Keyboard keys Inserted text Deleted text Italic text Bold text Emphasized text Strong text Quote text
Blockquote text. Condensate also supports oversized left quotation mark styled blockquotes, which you can enable with variables.
Marked text

Extra large text

Large text

Medium text

Small text

Bold text

Italic text

Underline text

Strike-through text

Primary text

Secondary text

Success text

Warning text

Error text

❤️ 🔧 🌐 ⚙️

Buttons

All of the semantic color classes can be used with buttons.

Several special button shapes are supplied: pill, circle, and square. If you want all buttons on your site to be pill shaped you should instead use the button border radius variable.

Button groups let you combine multiple buttons together. The flush class can be added to make the full height style buttons that are often used in headers for navigation.

<a class="button">Button styled anchor</a>
<button>Button</button>
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="error">Error</button>
<button class="pill">Pill Shape</button>
<button class="square icon">⚙️</button>
<button class="circle icon">❤️</button>
<div class="hbox button-group">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>
<div class="hbox button-group flush">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
</div>
Button styled anchor

Layouts

Condensate has 4 different layout classes. VBoxes layout their elements vertically and HBoxes layout horizontally. RBoxes act like HBoxes in landscape and act like VBoxes in portrait. Graphics let you position items in any of the nine quadrants (upper left, bottom, center, etc.)

When using Condensate, most if not all of your containers should use one of these 4 layout classes.

The `spacer` class sets flex-grow to 1, and thus can be used to push some elements to the end of a box layout, or towards the center by using one on either side.

You can add scrolling with the classes scroll-x and scroll-y and you can allow item wrapping with the class wrap

The RBox layout is one of the most important ways to make websites responsive in Condensate. The RBox shown here is in a resizable iframe, try resizing the box to see how it changes with the aspect ratio.

<div class="hbox card width-sm height-sm">
<p>HBox</p>
<div class="square panel-color rounded"></div>
<div class="square panel-color rounded"></div>
<div class="square panel-color rounded"></div>
<div class="spacer panel-color rounded" style="height: 1.5em;">spacer</div>
<div class="square panel-color rounded"></div>
</div>
<div class="vbox card width-sm height-sm">
<p>VBox</p>
<div class="square panel-color rounded"></div>
<div class="square panel-color rounded"></div>
<div class="spacer panel-color rounded" style="width: 1.5em;">spacer</div>
<div class="square panel-color rounded"></div>
</div>
<div class="graphic card width-sm height-sm">
<p class="top center">Graphic</p>
<div class="top left square panel-color rounded"></div>
<div class="top right square panel-color rounded"></div>
<div class="center left square panel-color rounded"></div>
<div class="center square panel-color rounded"></div>
<div class="center right square panel-color rounded"></div>
<div class="bottom left square panel-color rounded"></div>
<div class="bottom center square panel-color rounded"></div>
<div class="bottom right square panel-color rounded"></div>
</div>
<div style="display:flex; resize:both; overflow:hidden;">
    <iframe style="flex-grow:1;" src="rbox-demo.html"></iframe>
</div>

HBox

spacer

VBox

spacer

Graphic

Forms

Condensate has beautifully animated form controls.

<form>
    <fieldset class="card vbox">
        <legend>Fieldset</legend>
        <input placeholder="text input" type="text">
        <label for="checkbox1">
            <input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
            Checkbox
        </label>
        <label for="checkbox2">
            <input class="switch" id="checkbox2" name="checkbox" type="checkbox" checked="checked">
            Checkbox switch
        </label>
        <label for="radio1">
            <input id="radio1" name="radio" type="radio" checked="checked">
            Radio 1
        </label>
        <label for="radio2">
            <input id="radio2" name="radio" type="radio">
            Radio 2
        </label>
        <label for="meter">
            Meter
            <meter id="meter" value="3" max="10"></meter>
        </label>
        <label for="progress">
            Progress
            <progress id="progress" value="5" max="10"></progress>
        </label>
    </fieldset>
</form>
Fieldset

Tables

Tables are highly customizable with styling variables.

<table>
    <tr>
    <th>Header1</th>
    <th>Header2</th>
    <th>Header3</th>
    </tr>
    <tr>
    <td>Data1</td>
    <td>Data2</td>
    <td>Data3</td>
    </tr>
    <tr>
    <td>Data1</td>
    <td>Data2</td>
    <td>Data3</td>
    </tr>
</table>
Header1 Header2 Header3
Data1 Data2 Data3
Data1 Data2 Data3

Collapsibles

<details>
    <summary>Collapse</summary>
    <p>Collapse<br>content</p>
</details>
<details class="dropdown">
    <summary>Dropdown</summary>
    <p>Dropdown<br>content</p>
</details>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
Collapse

Collapse
content

Dropdown

Dropdown
content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Modals

The modal class centers and adds a shadow to modal elements. Try it out by pressing the button!

<dialog id="modal" class="modal">
    <form method="dialog" class="card vbox">
        <header class="hbox">
            <h3>Modal heading</h3>
            <span class="spacer"></span>
            <button class="close"></button>
        </header>
        <p>Modal content.</p>
    </form>
</dialog>
<button onclick="document.getElementById('modal').showModal()">Open Modal</button>

Modal heading

Modal content.

Hero

The hero class is best combined with the graphic layout class and an inline background image to create landing page heros.

<div class="scroll-y height-full rwidth-lg">
    <div class="hero graphic" style="background-image: url(test-images/test-img-2.jpg);">
        <h1 class="center left font-alt">This is a hero!</h1>
        <button class="center bottom">Button</button>
    </div>
    <div class="padding">
        <p>
            Lorem ipsum dolor sit amet, [...] condimentum.
        </p>
    </div>
</div>

This is a hero!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat dolor sit amet diam feugiat efficitur. Maecenas vitae aliquam nisl. Curabitur mollis sodales nisi suscipit ullamcorper. Suspendisse id bibendum leo. Nam sit amet purus non tellus commodo pharetra nec eu elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tincidunt urna at nunc maximus condimentum.

Cards

Cards can have headers and footers and can be styled with the semantic color classes. Headers and footers can also be used outside of cards.

<div class="card vbox">
    <header>
    Header
    </header>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
    Aliquam efficitur elementum quam at luctus.
    </p>
    <footer>
    Footeri
    </footer>
</div>

<div class="card vbox primary">
    <header>
    Header
    </header>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
    Aliquam efficitur elementum quam at luctus.
    </p>
    <footer>
    Footer
    </footer>
</div>
Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam efficitur elementum quam at luctus.

Footer
Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam efficitur elementum quam at luctus.

Footer

Condensate supplies a scriptless sidebar class by heavily styling a summary/details collapse container.

<div class="hbox">
    <details class="sidebar">
    <summary class="button sidebar-button"></summary>
    <div class="vbox padding">
        <h2>Navigation</h2>
        <a>link 1</a>
        <a>link 2</a>
        <a>link 3</a>
    </div>
    </details>
    <div class="padding width-lg">
    Lorem ipsum dolor sit amet, [...] condimentum.
    </div>
</div>

Navigation

link 1 link 2 link 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat dolor sit amet diam feugiat efficitur. Maecenas vitae aliquam nisl. Curabitur mollis sodales nisi suscipit ullamcorper. Suspendisse id bibendum leo. Nam sit amet purus non tellus commodo pharetra nec eu elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras tincidunt urna at nunc maximus condimentum.

Dark Mode Toggle

By default Condensate uses the user's browser preference to decide whether to use light mode or dark mode colors, however a simple checkbox based toggle switch can be used instead, if desired.

The dm-toggle class can be combined with the switch class for a toggle switch form.

If you want the toggle switches value to be saved for the next time the user visits, you'll have to use cookies.

<p>Basic dark mode toggle:</p>
<input type="checkbox" class="dm-toggle">
<p>Switch styled dark mode toggle:</p>
<input type="checkbox" class="dm-toggle switch">

Basic dark mode toggle:

Switch styled dark mode toggle:

Sizing

Many sizing utilities are provided, but the best practice is to use the vw based width classes for block-like elements, and the input/font based heights for inline elements.

width-xs:  5rem
width-sm:  15rem
width-md:  25rem*
width-lg:  45rem*
width-xl:  65rem*
width-xxl: 75rem*

* these widths are responsive,
on portrait orientations they
will instead be 100%
                    
width-quarter:        25%
width-third:          33%
width-half:           50%
width-two-thirds:     66%
width-three-quarters: 75%
width-full:           100%
                    
height-xs:  5rem
height-sm:  15rem
height-md:  25rem
height-lg:  45rem
height-xl:  65rem
height-xxl: 75rem
                    
height-quarter:        25%
height-third:          33%
height-half:           50%
height-two-thirds:     66%
height-three-quarters: 75%
height-full:           100%
                    
height-input:    height of text inputs, buttons, etc.
height-font-sm:  height of font-sm
height-font-md:  height of font-md
height-font-lg:  height of font-lg
height-font-xl:  height of font-xl
height-font-xxl: height of font-xxl

fullscreen: fixed & covers entire viewport

Utilities

A handful of styling utilities are provided for making manual tweaks.

The landscape/portrait hidden utilites can be used for special cases where RBoxes and responsive widths alone cannot get the desired affect for responsive elements.

The lm/dm style utilities can be used to invert or use different images for light mode vs dark mode.

Background Color

background-color
alt-background-color
panel-color
                    
Portrait / Landscape

portrait-hidden
landscape-hidden
                    
Light Mode / Dark Mode

lm-hidden
lm-invert
dm-hidden
dm-invert
                    
Text Align

text-left
text-center
text-right
text-justify
                    
 Padding 

no-padding
padding
padding-left
padding-right
padding-top
padding-bottom
                    
 Margins 

no-margin
margin
margin-left
margin-right
margin-top
margin-bottom
                    
 Border 

rounded
no-border
border
border-left
border-right
border-top
border-bottom