Light and Dark Themes

Zesty UX CSS offers a dark and light theme. GitHub Copilot: The light and dark theme styling provides a way to toggle between a light and dark color scheme for a webpage. The "light-mode" and "dark-mode" classes are used to apply different background and text colors to elements on the page. The "active" class is used to indicate which theme is currently active. The JavaScript applied to the theme toggle allows the user to manually switch between the light and dark themes, and the user's preference is saved in local storage so that it persists across page refreshes.

The Grid

The grid styling provides a way to create a 12-column fluid grid that shrinks with the browser at smaller sizes (similar to Skeleton CSS and Bootstrap CSS).

The "row" class is used to create a row of columns, and the "columns" class is used to create a column within a row. The number in the "columns" class indicates the number of columns the element should span. For example, "one column" would create a column that spans one column, while "eleven columns" would create a column that spans eleven columns. The grid syntax is simple and makes coding responsive much easier.

<!-- Grid -->
<div class="row">
  <div class="one column">one</div>
  <div class="eleven columns">eleven</div>
</div>
<div class="row">
  <div class="two columns">two</div>
  <div class="ten columns">ten</div>
</div>
<div class="row">
  <div class="three columns">three</div>
  <div class="nine columns">nine</div>
</div>
<div class="row">
  <div class="four columns">four</div>
  <div class="eight columns">eight</div>
</div>
<div class="row">
  <div class="five columns">five</div>
  <div class="seven columns">seven</div>
</div>
<div class="row">
  <div class="six columns">six</div>
  <div class="six columns">six</div>
</div>
<div class="row">
  <div class="seven columns">seven</div>
  <div class="five columns">five</div>
</div>
<div class="row">
  <div class="eight columns">eight</div>
  <div class="four columns">four</div>
</div>
<div class="row">
  <div class="nine columns">nine</div>
  <div class="three columns">three</div>
</div>
<div class="row">
  <div class="ten columns">ten</div>
  <div class="two columns">two</div>
</div>
<div class="row">
  <div class="eleven columns">eleven</div>
  <div class="one columns">one</div>
</div>
<div class="row">
  <div class="half column">half</div>
  <div class="half column">half</div>
</div>
<div class="row">
  <div class="one-third column">one-third</div>
  <div class="two-third column">two-third</div>
</div>
<div class="row">
  <div class="two-third column">two-third</div>
  <div class="one-third column">one-third</div>
</div>
          

Typography

The typography styling provides a way to apply different font sizes, weights, and styles to text on a webpage. The "h1" through "h6" tags are used to create different heading levels, with "h1" being the largest and "h6" being the smallest. The "p" tag is used to create paragraphs of text. The "small" tag can be used to create smaller text, such as captions or disclaimers. The "strong" tag can be used to apply bold styling to text, and the "em" tag can be used to apply italic styling to text. The "text-center" class can be applied to any element to center the text within its container. The "text-muted" class can be applied to any element to apply a muted color to the text, indicating that it is less important than other text on the page.

The Typography base is Poppins servered by Google, set at 14px over a 1.6 line height.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>
<p><strong>Strong</strong></p>
<p><em>Italicized</em></p>
<p><a href="#">Hyperlink</a></p>
<p><u>Underlined</u></p>
<p class="text-muted">Muted Text</p>
            

Buttons

The button styling provides a way to style button, anchor, and input elements in a cohesive and visually appealing way. The "button" tag is used to create a standard button element, and the "a" tag is used to create an anchor button. The "input" tag can be used to create a submit or button input element.

The "button-primary" class can be applied to a button element to make it stand out as the primary action for the form. The "button-danger", "button-warning", and "button-success" classes can be applied to indicate different types of actions. The "button" class can be applied to any of these elements to apply the standard button styling.

<!-- Standard Buttons -->
<button>Button element</button>
<a href="#" class="button">Anchor Button</a>
<input type="submit" value="Submit Input" />
<input type="button" value="Button Input" />

<!-- Buttons with colors -->
<button class="button-primary">Button Primary</button>
<button class="button-danger">Button Danger</button>
<button class="button-warning">Button Warning</button>
<button class="button-success">Button Success</button>
            

Code

The code block styling provides a way to display code snippets in a visually appealing way. The "pre" tag is used to create a block of preformatted text, and the "code" tag is used to indicate that the text is code. The "code" tag can be used in combination with syntax highlighting libraries to color code different parts of the code based on their function. The "code-block" class can be applied to the "pre" tag to add a border and unique font styling to the code block.

<!-- Code Block -->
<pre><code>code</code></pre>
          

Forms

The forms styling provides a way to style input and form elements in a cohesive and visually appealing way. The "label" tag is used to create a label for each input element, and the "for" attribute is used to associate the label with the input element. The "input" tag is used to create various types of input elements, such as text, email, radio buttons, and checkboxes. The "select" tag is used to create a dropdown menu for selecting an option. The "textarea" tag is used to create a multi-line text input field. The "full-width" class can be applied to input elements to make them span the full width of their container. The "row" and "column" classes can be used to create a grid layout for input elements. The "button-primary" class can be applied to a button element to make it stand out as the primary action for the form.

<form>
  <div class="row">
    <div class="half column">
      <label for="exampleEmailInput">Your email</label>
      <input
        class="full-width"
        type="email"
        placeholder="
        id="exampleEmailInput"
      />
    </div>
    <div class="half column">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="full-width" id="exampleRecipientInput">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="twelve columns">
      <label for="exampleMessage">Message</label>
      <textarea
        class="full-width"
        placeholder="Leave a message after the beep…"
        id="exampleMessage"
      ></textarea>
    </div>
  </div>
  <div class="row">
    <div class="half column">
      <label>
        <input type="radio" name="language" id="html" />
        <span>HTML</span>
      </label>
      <label>
        <input type="radio" name="language" id="css" />
        <span>CSS</span>
      </label>
      <label>
        <input type="radio" name="language" id="js" />
        <span>JavaScript</span>
      </label>
    </div>
    <div class="half column">
      <label>
        <input type="checkbox" />
        <span>Send a copy to yourself</span>
      </label>
    </div>
  </div>
  <input class="button-primary" type="submit" value="Submit" />
</form>
          

Tables

The table styling provides a way to display data in a structured format with rows and columns. The "table" tag is used to create the table, and the "tr" tag is used to create each row. Within each row, the "td" tag is used to create each cell. The "th" tag is used to create the header cell for each column. The "colspan" and "rowspan" attributes can be used to merge cells across multiple rows or columns. The "table-layout" property can be used to control the width of the table and its cells. The "border-collapse" property can be used to collapse the borders between cells, creating a cleaner look.

The "alt-colors" class can be applied to the table element to alternate the background color of each row, making it easier to read.

Classic Table

<table>
  <thead>
    <tr>
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
  </tbody>
</table>
          

Alternating Row Colors

<table class="alt-colors">
  <thead>
    <tr>
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
  </tbody>
</table>
          

Lists

The list styling provides a way to display ordered and unordered lists with a unique font size, weight, and spacing to display the hierarchy of text. The "unordered list" is created using the "ul" tag, and each list item is created using the "li" tag. The "ordered list" is created using the "ol" tag, and each list item is also created using the "li" tag. Nested lists can be created by placing a list inside another list item. The "list-style-type" property can be used to change the bullet point or numbering style of the list. The "list-style-position" property can be used to change the position of the bullet point or numbering relative to the text.

Images

The "img" styling provides a way to apply different styles to images on a webpage. The "rounded" class applies a 50% radius to the image, making it appear circular. The "squared" class applies the baseline radius to the image, making it appear square. The images will use their default max-width unless otherwise specified. These classes can be used to create visually appealing image displays on a webpage.

Plain Image

Rounded Image

Squared Image

<img src="./images/logo/zesty-kun_1024x1024.png" alt="plain image" />
<img src="./images/logo/zesty-kun_1024x1024.png" alt="rounded image" class="rounded" />
<img src="./images/logo/zesty-kun_1024x1024.png" alt="squared image" class="squared" />
          

Banners

The "banner" styling is a way to display important messages or notifications to the user. It provides a container with a background color and text color that stands out from the rest of the page. The "banner success" class applies a green background color to the banner, indicating a successful action. The "banner warning" class applies a yellow background color to the banner, indicating a warning or caution. The "banner error" class applies a red background color to the banner, indicating an error or failure. The JavaScript applied to the banner allows the user to manually close any displayed banner, and any banners with the "banner success" class will be displayed for 5 seconds before closing automatically.

Cards

The "card" styling is a way to group related content together in a visually appealing way. It provides a container with a header, body, and footer section. The header and footer sections are optional. The "card-header" class applies a large weight to the header text, while the "card-footer" class applies a smaller weight and italicizes the text. The body section is where the main content of the card is placed.

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Body of the card goes here and stuff.</div>
  <div class="card-footer">The footer of the card.</div>
</div>