Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

We’ve complied a collection of coding solutions for NMSU website developers and designers that can also be used in Cascade CMS. These resource details any type of component we build in HTML and CSS that isn’t already available to you via the Cascade interface (i.e. News Blocks or Hero Visual Elements). You can think of these as additions or customizations to the Cascade components already created by the NMSU web development team.

Please note that you don’t need any coding experience to use code snippets — if you can copy and paste, you can use the code provided on your website.

Our code snippets are small blocks of reusable code that you can add to your Cascade CMS pages that are meant to save you time without needing to use code your own CSS. Our goal is to provide ready-made web development help — namely,  in the form of HTML and CSS code snippets— to enable site owners to quickly build parts of their website that would not otherwise be possible using Cascade’s built-in tools.

Table of Contents

What is CSS and what are CSS classes?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS.

Our theme includes several CSS classes that are built into the templates to provide a consistent presentation of colors, fonts, and branding. The base CSS styles sheets include a variety of CSS styles that you can use to expand your content presentation from the built in theme features.

You can add an unlimited number of CSS classes to various elements. However we do recommend keeping track of what you’re changing to make sure you can revert to previous versions if the end result doesn’t match your expectations.

You can add CSS classes to HTML element, but some of the common ones include:

  • Paragraph (<p>)

  • Headers (<h1>, <h2>, <h3>, etc.)

  • Blockquotes (<blockquote>)

  • Spans (<span>)

  • Divs (<div>)

  • Images (<img>)

  • Buttons (<button>)

  • Embeds (<embed>)

  • Links (<a>)

  • Ordered lists and list items (<ol> and <li>, respectively)

  • Unordered lists and list items (<ul> and <li>, respectively)

  • Tables (<table>)

How to do I “see” the code for my page content?

You can use the WYSIWYG editor to see a code view of your page content in many content groups.

Instructions

  1. From the WYSIWYG editor, select the source code icon.

  2. The source code editor window will appear. You can expand this window to full screen by clicking on the Toggle Fullscreen Mode icon.

How do I use code snippets?

You may not be familiar with HTML or CSS, but don't let this deter you from taking advantage of the available code snippets.

When using this code, you can simply copy and paste the code into the "Source Code" editor within Cascade. Then you can go back to the WYSIWYG editor and use the editing tools to make changes without editing the HTML/CSS yourself.

Instructions

  1. Review our code snippet library and documentation to select a snippet or code reference you would like to use.

  2. Snippets are organized by components and include a preview and an HTML tab.

  3. When you identify a code snippet you’d like to use, click on the HTML tab.

  4. The code view will load and include all of the relevant HTML and CSS classes included for you. In the top, right hand side of the tab view click copy.

  5. This will copy the entire code snippet to your computer clipboard. You can confirm that the code snippet was copied when the copy button transformed to “copied!”

  6. In Cascade CMS, click on the source code icon where you would like to include the snippet.

  7. Using CTRL+V to past your code snippet into the source code window (or right-click and select Paste.)

  8. Click Ok.

  9. Update the content as necessary. Double-click on the element you wish to change and make edits to it using Cascade’s link tools, image placement tools, or text editor.

Keep in mind that the structure presented in the WYSIWYG editor may not include the full presentation of the snippet as presented in the code snippet library. You must click on Preview Draft to see all of the snippet styles.

You may find comments in the code snippets to help provide some reference. These comments can be deleted when using the snippet on your site, but it is recommended to retain them as they may help future editors.

Common Content Presentation Issues

You might also find the need to add a slight adjustment to the way the content is presented - for example you might want to include more space between elements. We’ve collected some of the most comment content presentation questions below as well as instructions on how to add CSS classes to code elements in your Cascade CMS pages.

You can preview examples of content presentation examples on our demo website.

 How do I add more space or padding between elements?

NMSU templates include a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. You can assign margin or padding values to an HTML element using shorthand CSS classes.

Review the list of shorthand classes in our documentation and on the Bootstrap 4 website.

How to add more space between elements

  1. Click on the source code icon from the WYSIWYG editor.

  2. Locate the HTML element you’d like to add to or edit.

  3. Using the notation guide, add the appropriate notation in the CSS class. For example in the code class="mt-4" you are adding a margin of 1.4rem to the top of the element.

  4. Click ok.

Examples of using padding and margin classes

HTML CODE: <h3 class="mt-4 bold">Heading 3</h3>

On Screen: In the preview below, the Heading 3 text includes a larger margin at the top to add more space between the paragraphs. The <h3> element includes two classes. One class controls the margin and the other add the bold text style.

HTML CODE: <a class="ml-4 btn btn-outline-primary" href="#">Outline Button</a>

On Screen: In the preview below, the link element includes a larger margin to the left. The <a> element includes three classes. One class controls the margin and the other two add control the button styles.

In the WYSIWYG Editor

Note the presentation in the WYSIWYG editor for both examples does not include styling presented on screen.

 How do I make a row of cards all the same height?

Cards provide a flexible and extensible content container with multiple variants and options. However you may find that the height of the columns are dictated by the amount of content you have placed in side of them. When you have cards that should appear side by side, you'll often want them to be of equal height (matching the height of the tallest).

There is a solution that helps to keep columns size the same, no matter how much content may be placed inside.

 I want to resize an HTML element. What are my options?

It is used to size the element. By using sizing utility, you can easily make an element as wide or as tall (relative to its parent)

How do I make a card height equal in a row?

class = h-100

 How to add more space or padding between elements.

Add note on spacings : https://themetest-d.nmsu.edu/brand-rollout-documentation-demo/Brand2022_documentation/spacings.html

Include common presentation of visual elements in Kb?

  • No labels