SharePoint Information Site > Technical Guides > Master CSS Walkthrough

Master CSS Walkthrough

There's no replacement for diving into the master responsive.css and reading it thoroughly. However, you'll only see the non-minified version if you're logged in. If you can't login, or don't have access yet, here's what you would see in the head of the master CSS. This will give you an overview of what is in the master CSS and how we've organized it.
  • CSS normalization -Normalizes styling across browsers, sh​ould live in hive. MIT License | (HIVE)
  • Grid - Grid system for building page layouts. Infinitely nestable within it's own columns. (HIVE)
  • Structural Chrome  - This is the underpinnings of the Local Chrome seen below. This stays the same from site to site (HIVE)
    • Masthead  - The section of the page that contains the logo, DePaul shortcuts and search
    • Shortcuts  - Structure for shortcuts drawer and button
    • Search -  Structure for search input and button
    • Primary navigation - Structure and behaviors for primary navigation
    • Primary navigation dropdown - CSS-based dropdown menu for primary nav items
    • Secondary navigation - Structure and behaviors for secondary navigation
    • Folding navigation - Attributes that structure and style primary and secondary navigation as well as search and shortcuts
    • Quicklinks  - Old navigation element we used to have, left here just in case
    • Footer - Structure for the last section on the page
  • Objects - Abstract building elements for creating rollups, galleries, etc.
    • Skin Structures - Structural information for panels and objects that setup basic structure of various skins
    • Panel Object - Abstract, unskinned object styles for building various types of modular components
    • Object and Panel Skins - Apply branding (skin) to panels and objects
  • DePaul HTML element styles - Sets up the basic html elements for DePaul branding
    • Content-centric elements - Basic properties
    • Lists - Properties for unordered, ordered and nested lists
    • Blockquote types - Blockquotes and related styles
    • Links - Basic link properties
    • Hyperlink Cues - Links show icons depending on where they link (pdf, doc, etc)
    • Tables - Basic table style
    • Alerts - Globally available in-page warnings
    • Calls-to-action - Globally available button styles for calls to action
    • Calls-to-action skins - Branding for calls-to-action
  • Site Themes - This skins the Structural chrome and is context-driven for ease of branding
  • Comfort Points - Media queries to respond to all viewports and viewing platforms
  • Extension Classes - Extra classes that extend preexisting elements and properties
  • Webpart and Layout Classes - CSS applying specifically to SharePoint Web parts and custom layouts 
  • IE Specific Classes - Applies to IE browsers only. Elements are referenced via a class prefix method that include classes .ie7, .ie8, .ie9, .ie10 and .ie11