51茶馆

Redwoods CSS Documentation

09/19/2024

In this documentation, we will walk through the "utility classes" that are available in the /_resources/css/stylesheet.css file provided by 25th Hour Communications. I will try to provide code examples for everything as I go, but this page will also be "inspect-able" so you can see how examlpe elements are built.

Sections

Sections are used as full width content areas to differentiate elements and pieces of content. This is what allows you to create different sections with different background colors or background images that span the full width of the page.

The standard section used across the site is this:

This is what the sections that are currently on the page are using. It makes each section full width with a standard amount of padding. this can also be combined with different padding and background color classes for different sizes and colors.

Those sections would look like this:

Colors

There are several color utility classes in the Redwoods CSS file. These classes can be applied to any element to change it's color in various ways. The only "special" class in here is "children-text-white" which will change all child elements text colors to white. This is useful when working with red background sections. All of the colors used are in the College Of The Redwoods color pallate.

Headings and Heading Classes

We have included a series of headings and heading classes to make it easier to get the look that you want to achieve for your headings while keeping your pages accessible.

Obviously, included is the standard

But we have also included classes for each size and type of heading:

This means you can have an h2 tag with the .h3 class and it will read as an h2 to screen readers, but it will look like an h3. Somethign like this:

Will render like this:

Heading

Rather than like a normal h2 like the following:

Heading

Links and buttons

We've built in a bunch of types of links and buttons.

Inline Links

If you inspect the following paragraph, you can see the different types of inline links that are available.
The classes used (in order) are:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, officiis magnam dolor error blanditiis deserunt? Lorem ipsum dolor sit amet. Repellat repudiandae quae nesciunt cum, exercitationem nobis doloribus consequuntur reiciendis! Ipsa porro labore voluptatum sed. Omnis officiis molestias totam, iste beatae dolor quam natus nisi illo, ea tenetur laboriosam autem? Consequatur, omnis nulla libero voluptatum accusantium, corrupti cumque, voluptas commodi est pariatur recusandae inventore cum?Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magnam ipsum molestiae quia assumenda debitis aperiam. Odit sapiente sunt eum saepe excepturi. Facilis eius eligendi at labore itaque, doloremque sit. Libero, quod vitae et non quos sunt debitis voluptatem enim provident. Voluptates quibusdam a distinctio! Lorem ipsum dolor sit amet. Laborum, vitae reiciendis nisi delectus libero adipisci suscipit maxime. Repellat, excepturi! Id repudiandae dignissimos dolorum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint mollitia non vitae natus! Placeat deserunt excepturi veniam cupiditate quaerat reprehenderit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui eaque nulla rerum aut architecto sapiente assumenda, quod dolorem iure! Sunt quo corporis iure! Assumenda voluptate ipsum reiciendis culpa vel expedita aliquid fugit quod, voluptates aliquam distinctio ducimus fuga.

Buttons

There are also several types of buttons built into the CSS.

Your standard buttons use the classes:

Which look like this:

These can also be combined with these size classes for different button sizes:

Which look like this:

Reminder:

Accessibility and SR-Only

We also have a class that we add to every site called sr-only that will hide text for all users who are not using screen readers. This can be used to add extra context to an element or a section for people using assistive devices. This can be applied to any element, including buttons.

Box Shadow

We have two box shadow classes available, one with hover interaction and one without.

Which look like this:

This is the code example for the previous section:

Padding

There are several automatic (and mobile optimized) padding classes available.

There are 3 types of padding classes:

• Full padding
• Horizontal padding
• Vertical padding

We kept these standardized since for normal elements they shouldn't be too massively padded. Padding is all applied in rem units to allow for screen magnification. 1rem = 16px

Here are the classes:

each of those classes would look like this:

Code example for the above section:

These padding classes can also be combined, like so:

Code example for the above section:

Grids and Columns

When working with grids, there are several options available by default.

Honestly, there's too many options to provide written code examples for each, so I would recommend inspecint the section below for specific code examples. Each grid needs 3 classes for it to function properly:

• the .grid class (to identify it as a grid)
• A grid definition class
• Each type of grid has a class for either enforced or auto. The enforced grids will force each grid element to be the maximum size of the column, while the auto grids will size around the sizes of the elements placed in them.
• a gap class

The available grid definition classes are:

The available gap classes are:

The basic structure of the grids goes as follows:

In Page alerts

Honestly this is another one where it's probably best to just inspect the page to see all of the classes used for each one of these alerts. This source code is very copy+paste.

Dismissable

Fancy Alerts