⚙️ Purpose
Official NMSU Websites must use the approved web templates and themes provided by MARCOMM. MARCOMM will provide the documentation for the use of official NMSU templates and will issue guidance to NMSU units regarding content and design specifications.
The duplication of any part of the web template is strictly prohibited including the header, navigation, masthead, and footer for use outside the https://nmsu.edu domain and hosting platform. Users must brand third-party web systems/software according to brand standard guidelines and with the approval from MARCOMM.
In this section:
Requirements
Logo and University Name
The University is very mindful of the appropriate use and presentation of our trademark. For digital and web content, make sure you are presenting the logo correctly. Extensive guidelines for use of the NMSU logo is available in our Brand Standards.
Standard Criteria
An approved NMSU Logo must appear at the top of the page and must appear on all pages of your website.
The words “New Mexico State University” must appear in the HTML Title tag.
The words “New Mexico State University” must appear on the home page.
A link back to the NMSU homepage must be included on the pages of the site through the use of breadcrumb navigation or clickable image at the top of the page.
All NMSU websites must present the University's logo in the footer for all viewports. The logo should always link to https://www.nmsu.edu .
Specifications: Proper layout of site titles and the logo used in the masthead are already configured for sites managed within enterprise CMS. The following specifications are followed for those variations. What appears below are specifications NOT explicitly defined in CSS:
(needs image)
Acceptable Use of Color
Website mastheads should contain the logo in one of two color varieties. The decision should be based on the background color of the masthead.
White logo on Crimson Background
Crimson logo on White Background
Layout and Design
Keep the general appearance of the webpages consistent across all pages of the site.
Standard Criteria
Do not use tables for the website layout; instead use CSS. Tables should be used for tabular data.
Do not use tools like Microsoft Word to create the page and then save as HTML or avoid tools that generate proprietary HTML markup such as Microsoft Word.
Keep the primary navigation consistent across all pages of the site.
Contact Information
Always include a way for visitors to contact someone. This is important so that broken links, misspellings, etc. can be reported.
Standard Criteria
A link to contact information for the department must appear on the home page. Include an email address, phone number, and mailing address.
File Structure for Base NMSU Styles
Branded CMS templates are designed to provide flexibility for customizing the layout of content and utilize centralized base stylesheets. Using these templates and stylesheets aid departments and other units of NMSU in ensuring that their websites, as well as web and mobile application development, will be closely tied in visual aesthetics. This helps to create a cohesive overall institutional web presence.
To provide more flexibility, NMSU adopted Bootstrap for our web style framework in 2013. The Legacy Cascade CMS theme and Inside NMSU WordPress theme utilize Bootstrap 3.
The new NMSU templates are based on Bootstrap 4 and generally follow Bootstrap HTML and CSS conventions, with some additions and modifications. The components and JavaScript plugins available in Bootstrap are available in master brand template packages. In addition, several third-party and premium plugin libraries are available.
Base Style File Structure for Bootstrap 4
The following structure outlines the base stylesheets for NMSU. Web designers and developers are encouraged to point to these core files. Please DO NOT download, copy, or host these files in your own themes, templates or development work.
📂 assets/
css/theme.min.css
js/theme.min.js
vendor/
Web developers are encouraged to review the latest theme documentation for examples, code snippets and a full list of included JS libraries and third-party plugins.
Base Style File Structure for Bootstrap 3
Bootstrap Developers have moved Bootstrap 3 to end of life, and it will no longer receive critical security updates. We will continue to host Bootstrap 3 styles sheets but will not provide updates to brand styles or provide further maintenance to adapt to changes and updates in browser or operating systems.
The following structure outlines the legacy base stylesheets for NMSU. Web designers and developers are strongly encouraged to utilize the Bootstrap 4 styles in new development projects.
📂 css/
bootstrap-nmsu.min.css
bootstrap-print.min.css
bootstrap.vertical-tabs.min.css
nmsu.min.css
📂 fonts/
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2
📂 js/
bootstrap.min.js
fixtop.min.js
fixtop.min.js.orig
getPosition.min.js
ie10-viewport.min.js
jquery-2.1.3.min.js
jquery.mobile.touch.min.js
page.min.js
scrollReveal.min.js
skrollr.min.js
HTML, CSS and Scripting
NMSU’s current CMS system uses XHTML as its standard. All HTML should be well formed and validate against the specified doctype. The CMS uses a centralized copy of CSS and JQuery libraries that is built into the template.
XHTML coding rules and syntax
XHTML has a set of rules associated with it that the ensure properly formatted and standard compliant code. These rules are easy to follow once learned but may require some minor changes to your coding practice. While these rules apply to XHTML, it is recommended they are also followed for HTML.
There must be a DOCTYPE declaration
All tags and attributes must be in lower case
All elements must be closed
The value assigned to an attribute must be enclosed in quotes
No attribute may be minimized
All elements must be properly nested
XHTML documents must be well-formed
For more information:
Meta Tag
Bootstrap is developed mobile first, a strategy in which code is optimized for mobile devices first then components are scaled up as necessary using CSS media queries. CMS theme templates automatically include the required meta tags. To ensure proper rendering and touch zooming for all devices, the responsive viewport meta tag should be added to the <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Viewports
The CMS and source CSS files are responsive for smartphones, tablets, laptops, and computer screens. Responsive websites detect the visitor’s screen size, resolution and orientation and changes the layout to fit the browser window accordingly. This allows for the best viewing experience for the user.
There are five layouts that make up each viewport— extra-small, small, medium, large, and extra-large. Below are the target widths and breakpoints for each viewport.
| Extra small | Small | Medium | Large | Extra large |
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix example |
|
|
|
|
|
# of columns | 12 | ||||
Gutter width | 30px (15px on each side of a column) | ||||
Use of Third-Party Design and Development Tools
The use of third-party tools on your webpage is allowed. Examples of commonly used external tools are:
Google Analytics
Embedded YouTube videos
It is recommended that you not use an external tool if a viable alternative is available from NMSU.
Exceptions
Exceptions are for website template design and development issued in appropriate situations but must be submitted to MARCOMM and approved prior to going live and assigning a published domain.