Page Comparison

...

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.

Our code snippetsare 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.

   Image Added

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.

   Image Added

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.
   

   Image Added

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!”

   Image Added

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.

...

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.

Expand
title 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. Info Review thelist of shorthand classes in our documentation and on the Bootstrap 4 website. How to add more space or padding between elements Click on the source code icon from the WYSIWYG editor. Locate the HTML element you’d like to add to or edit. 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. Click ok. Examples 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. Image Added 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. Image Added In the WYSIWYG Editor Note the presentation in the WYSIWYG editor for both examples does not include styling presented on screen. Image Added

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

...