Web Design - Code Snippets and Tips
- Melissa Chavira
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
- 1 What is CSS and what are CSS classes?
- 2 How to do I “see” the code for my page content?
- 3 How do I use code snippets?
- 4 Common Content Presentation Issues
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 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.
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.