Getting Started with Guise Skeleton

Getting started with Guise Skeleton involves just three steps:

  1. Get the Guise Skeleton style sheet file(s).
  2. Reference the style sheet in your web page.
  3. Use Guise Skeleton classes.

The following is a template that shows the most common approach for using Guise Skeleton.

<!DOCTYPE html>
<html class="guise-skeleton">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Example Page</title>
  <link href="assets/css/guise-skeleton.min.css" rel="stylesheet" />
</head>
<body>
…
</body>
</html>

Get Guise Skeleton

Follow the instructions for getting Guise Skeleton. You should have the following files, which can be found in the dist/ directory if you built the project from scratch:

Normally you will only need to use one or more of the css/*-min.css files. Once you determine the file(s) you need as described below, copy them to a location on your web site. The following discussion assumes you have placed the files in your assets/css/ directory.

Reference Style Sheet in Page

If you intend to use Guise Skeleton as your primary style framework, you can include only the guise-skeleton.min.css stylesheet on your web page. This resets browser styles, defines common properties, and includes all Guise Skeleton components and layouts.

…
  <title>Example Page</title>
  <link href="assets/css/guise-skeleton.min.css" rel="stylesheet" />
…

If instead you only want to include certain parts of Guise Skeleton, you can to mix and match by including individual stylesheet files:

Use Guise Skeleton Classes

Guise has two forms of class identifiers: concise and verbose. This innovation, unique to Guise Skeleton, provides the flexibility to use Guise Skeleton as your primary style sheet framework, or insert it on an as-needed basis in a targeted manner to prevent conflicts with other frameworks and libraries.

Enable Guise Skeleton Across Page (recommended)

The easiest and most common way to use Guise Skeleton is to enable it once for the entire page and use the concise form of Guise Skeleton classes. This requires adding the guise-skeleton class on some parent element, after which you can use the concise classes on all children elements. In addition all semantic HTML component elements such as <button> and <table> will automatically be styled using for Guise Skeleton. One obvious location for placing guise-skeleton is on the document <html> element, as shown in the following example.

<!DOCTYPE html>
<html class="guise-skeleton">
<head>
  …
</head>
<body>

  <-- Guise Skeleton styled table, with stripes enabled. -->
  <table class="is-striped">
    …
  </table>

</body>
</html>

Targeted Guise Skeleton Usage

If the concise Guise Skeleton classes interfere with other style sheets, either legacy styles for your page or another style framework, you can forgo the use of the guise-skeleton class and instead use the verbose classes. These classes are similar to the concise classes except that they begin with the skelt- prefix. In addition HTML semantic elements such as <button> and <table> do not automatically get Guise Skeleton styling; instead they must be assigned an additional Guise Skeleton verbose component class, which also begins with the skelt- prefix.

For example the <table> shown above, if no guise-skeleton class enables Guise Skeleton for the page, must also include the skelt-table class. To make the table striped, the skelt-is-striped class must be used instead of simply is-striped.

<!DOCTYPE html>
<html>
<head>
  …
</head>
<body>

  <-- Guise Skeleton styled table, with stripes enabled. -->
  <table class="skelt-table skelt-is-striped">
    …
  </table>

</body>
</html>

Customize Guise Skeleton (optional)

Guise Skeleton leverages CSS Custom Properties to allow for semantic customization. If you want to change the way a Guise Skeleton component appears, don't use low-level CSS selectors to try and patch in to the Guise Skeleton source code—it's likely Guise Skeleton already provides custom properties to allow the styling you want.

For example to change the stripe color of tables (assuming you have enabled stripes on a table as shown above), refer to the Table Reference and find that Guise Skeleton provides the --skelt-table-stripe-background-color property for tables. You can use this property to change the table stripe color to beige for example.

:root {
  --skelt-table-stripe-background-color: beige;
}

Taking this example further, you can change the table stripe color to beige as well as enable table stripes by default by setting the following properties:

:root {
  --skelt-table-stripe-background-color: beige;
  --skelt-table-stripe-background-color-default: var(--skelt-table-stripe-background-color);
}

See the Guise Properties documentation for more information.