...
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.
| Tip |
|---|
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 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
| 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
From the WYSIWYG editor, select the source code icon.
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 a card height equal in a row?
class = h-100
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?changes without editing the HTML/CSS yourself.
Instructions
Review our code snippet library and documentation to select a snippet or code reference you would like to use.
Snippets are organized by components and include a preview and an HTML tab.
When you identify a code snippet you’d like to use, click on the HTML tab.
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.
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!”
In Cascade CMS, click on the source code icon where you would like to include the snippet.
Using CTRL+V to past your code snippet into the source code window (or right-click and select Paste.)
Click Ok.
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.
| Note |
|---|
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. |
| Info |
|---|
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.
| Expand | ||
|---|---|---|
| ||
NMSU templates include a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance. You can assign
How to add more space between elements
Examples of using padding and margin classesHTML CODE: 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  HTML CODE: On Screen: In the preview below, the link element includes a larger margin to the left. The  In the WYSIWYG Editor Note the presentation in the WYSIWYG editor for both examples does not include styling presented on screen.  |
| Expand | ||
|---|---|---|
| ||
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 inside 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. You can use card groups to render cards as a single, attached element with equal width and height columns. Card groups use  Need a set of equal width and height cards that aren’t attached to one another? You can use card decks. 
How to make a row of cards an equal height using CSS classesTo apply the appropriate CSS class for a row of cards that are equal height, you must first wrap your cards in a
 How to add a row of cards with equal height using our documentation
|
| Expand | ||
|---|---|---|
| ||
Sizing utility classes create an easy way to make an element as wide or as tall (relative to its parent). The Bootstrap 4 theme includes support for 25%, 50%, 75%, and 100% by default. You can also use utilities to set the width and height relative to the viewport. How to size an HTML element using CSS classesTo apply the appropriate CSS class for a row of cards that are equal height, you must first wrap your cards in a Width Utilities Note the CSS classes used for each of the the grey boxes depicted above:  Height Utilities Note the CSS classes used for each of the the purple boxes depicted above: 
|