This page is showcasing many of the styles and features that are being used in Wrap9. These sections will be used to start discussions about how we should standardize everything.

CSS Variables

Our stylesheets utilize various types of variables in order to shorten the memorization and amount of typing required to do the same things in many places.

Colors

The following is a list of all the color variables available in our color palette from the branding of the university. These colors have their purposes in specific areas and should be used with care to those rules.

Usage

To use the above color styles you can assign the Variable Names to any place that would normally take a color value like so:

p { 
  background-color: var(--boiler-gold); 
  color: var(--steel); 
}

We would obviously not use that particular combination of colors but the usage remains the same. This helps us to not have to remember all the hex codes and simply remember what their names are. The main thing to know about these variables is they are stored at the :root selector in the stylesheets which makes them available anywhere by calling them using the var() css function.

Font Families

We can even use font family variables to set our typical hierarchy of font families and their alternate options for browser compatibility and branding.

Many other variables can be added for us to use but there are also simple CSS classes we can use that will cover anything from a simple rule like .--bg-boiler-gold { background-color: var(--boiler-gold); } or a css class that can be more complex for a very specific purpose. Continue reading to find more of these being used.

CSS Colors

In addition to the previous section for CSS Color Variables, there are easy ways for us to apply simple and common styles where we need to. For example, when we want to change the background color of a block or a manually written section of code, we can use custom classes. The following table is a recreation of the Marcom design guide for background and font colors using the CSS classes that we have available:

Non-Brand Background Colors

The class of --bg-light-gray is available for use in limited cases

CSS Layout

One difference in the approach to wrap9 over previous wraps is the implementation of the <section> tag to wrap most of the areas of a page and have it handle its spacing for everything. No more manually having to tweak spacing on individual pieces of content. All the spacing for each section should be set to a standard from the start.

Below is a visual demonstration of how the section tag spacing is working. Color styles have been set up for the margin, padding, and content area for the example.

As you can see, there is no margin being used on the section tags. This is to ensure that no two blocks or sections will have spacing issues between them and won't have background color gaps by mistake. Any margin that is used on the contents in the sections will be pushed down by the padding inside the section. The current padding is 1rem all around and then the padding-bottom is set to 3rem if the section is not a block or an admin interface or is the last child section element.

You'll notice that the text right below the example is right up against it but this will be properly set when the padding isn't being highlighted. This is also a forced usage of the section tag where it will not be used in this way on a regular basis, if at all.

CSS Typography

The following section is about the typography styles at their default setup. These styles will slightly vary when used in individual blocks.

Heading Styles

The following table demonstrates the heading styles (h1-h6) in both their desktop and mobile variants.

CSS Utilities

This section is one that will be lengthy with detail. There are a few core pieces that need to be explained so we can decide on standards for these things and how they will work.

CSS Modifiers

CSS modifiers are small CSS classes that perform one job. Many examples can be found within the Bootstrap classes that some of us might already be familiar with. It will be important for us to adopt as many as we can use from the Bootstrap 5 system but we should have a library of our own to pull from.

Wrap9 CSS Modifiers

For any of the custom modifiers that we create, we should decide on whether they should be named in a special format so we know them from other classes. Modifiers typically use the !important keyword on the css value so they take priority. Knowing this, it'll be important to be able to spot these easily for troubleshooting.

One format that I've liked is the double dash prefix. So if we had a CSS modifier for changing the background color of a section or div then it would look like this: --bg-boiler-gold. Let's discuss this!

Bootstrap 5 Modifiers

The following are some of the many Bootstrap 5 CSS modifiers that I believe we should utilize where applicable.

Most of the Bootstrap 5 classes that we can use are listed on https://bootstrapshuffle.com/classes. We can find ways to include these styles for ease of coding on different views of a block. However, I think it will be important to draw a line where we use these classes and when we build styles into each blocks styling. Whichever side of the extreme we decide on doesn't matter too much as long as we keep it consistent.

As an example for spacing, Bootstrap 5 uses a variety of spacing modifiers for margin and padding. There are several options for how to specify them but I believe we should stick with the ones that specify the top, bottom, left, and right to keep things consistent.

Using modifiers like .m-3, .mt-3, and .mt-sm-3 are all valid ways to apply 1rem of margin to something in different ways. See the below example:

As demonstrated above, there are lots of variations to spacing that can be used. The first character of the class determines whether its margin (m) or padding (p).

The second character of the class can determine, if included, whether you want to specify a specific side for top (t), bottom (b), left (l), or right (r).

The third and fourth character of the class following the first dash can determine the responsive screen size usage. If this is included, you can specify the breakpoint that it'll apply to. These options are sm (576px), md (768px), lg (992px), and xl (1200px). If we wanted to set one before the sm size, we would exclude the breakpoint part so its set at a default.

The last character of the class will determine how much of the spacing to apply to the element. These options

Custom Elements

Wrap9 will features lots of reusable elements and classes that will appear all over the place in our blocks. Some of these will be as simple as a single class while others are more complex.

Motion Heading

The motion heading is a new feature that acts as a type of subheading for style purposes. The current approach is to create this in a paragraph tag and add classes to it. Here are some examples:

Motion Heading

<p class="motion-heading mh-gold">Motion Heading</p>

<div class="motion-line mh-gold">
   <p class="motion-heading mh-gold">Motion Heading w/ Line</p>
</div>

Purdue Buttons

In the WordPress design these buttons are always set inside an unordered list even if there is only one button. The following offers the list option as well as stand-alone button options.

Stand-alone Buttons

The following buttons are generated using the same code as is shown below in the code sample. There are no extra pieces to add to it to get them to sit next to each other. However, if they are set next to or inside some other elements, they will behave the same as a typical inline anchor tag.

<a href="#" class="purdue-btn">Purdue Button - Default</a>

<a href="#" class="purdue-btn btn-gold">Purdue Button - Gold</a>

<a href="#" class="purdue-btn btn-black">Purdue Button - Black</a>

<a href="#" class="purdue-btn btn-gold btn-arrow">Purdue Arrow Button - Gold</a>

<a href="#" class="purdue-btn btn-black btn-arrow">Purdue Arrow Button - Black</a>

The only colors available for the buttons are the gold and black. The first one is shown just to demonstrate what styles are being applied by the .purdue-btn class. The .btn-arrow class will apply the animated arrow and color it based on what the color class is on the button.

Button Lists

Normal button lists will default to horizontal. No extra CSS classes required. These kinds of lists are different than the ones that Bootstrap 5 uses with .btn-group which merges the buttons together. This will keep them spaced out and consistently styled for areas where you need a list of buttons.

<div class="btn-list">
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
</div>

When we want to display a list of buttons vertically, we can set up a vertical button list. These vertical lists will fill the full width of the space they are placed.

<div class="btn-list bl-vertical">
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
  <a href="#" class="purdue-btn btn-black btn-arrow">Button</a>  
</div>

Quick Links

These are buttons that use the arrows but don't have a border or background color. They also don't work as a stand-alone option. The :before functionality doesn't stay restricted to the text unless its in a list.

TODO: Rename the class for the underline effect and supply code example.

• Purdue Quick Link
• Purdue Quick Link
• Purdue Quick Link
• Purdue Quick Link
• Purdue Quick Link
• Purdue Quick Link