Page tree
Skip to end of metadata
Go to start of metadata

We've been looking at reworking the Sass partial structure for the CMS and prospectus alpha projects.

Although the scope of this work is currently limited to the two alpha projects it has ramifications for the way in which we implement any Sass-based project which uses Zurb Foundation.

Scope

Website and applications

The scope of the refactoring covers:

  • The main www.bath.ac.uk site
  • Individual applications running on bath.ac.uk domains (The CMS, the prospectus application etc.)

Both the site and applications share some universal styling (brand colours, standardised typefaces etc.). However the Sass structure should allow individual applications or sections/areas to easily override these default settings if there is good reason to do so.

Zurb Foundation 

We also need to manage a 'core' version of Zurb Foundation in a manner that facilitates clean, straight-forward updates. The logical way to achieve this is to isolate the core Foundation files and provide a simple, well-documented method of overriding default Foundation values on a per application/area basis. 

Proposed Sass structure

Under the root folder /origins there are 3 top level directories:

  1. /foundation - The core Foundation files
  2. /universal - Styles and assets that are universally used across all sections, applications and areas of the bath.ac.uk site
  3. /bath - Styling specific to certain applications or site sections
/origins
	/bath
		- _typography.scss
		/apps
			/project-name
				- projectname-manifest.scss
			- _modules.scss
			- _structure.scss
			- _buttons.scss
			- _forms.scss
			- _tables.scss
			- ...
		/site
			/section-name
				- sectionname-manifest.scss
			- _modules.scss
			- _structure.scss
			- ...

	/universal
		_universal-foundation-settings.scss
		/components
			- _colours.scss
			- _fonts.scss
			- _mixins.scss
			- _variables.scss
			- ...
 
	/foundation
		/scss
			foundation.scss
			normalize.scss
			/foundation
				_functions.scss	
				_settings.scss
				/components
				- All Foundation components...

Example project/section manifest file

projectname-manifest.scss/sectionname-manifest.scss

The @import file that brings together all of the various elements:

  1. Default Foundation
  2. Universal settings, variables and mixins
  3. Site wide typography
  4. App or section specific styling
Example project manifest
// ******************************************************************
// UNIVERSITY OF BATH - FOUNDATION 5.4.4 - Homepage ALPHA
// ******************************************************************

// CHARSET
@charset "UTF-8";

// ==================================================================
// UNIVERSAL
// ==================================================================

// UNIVERSAL FOUNDATION SETUP
// A) Import universal partials to make these available to the Foundation settings
// B) Import the universal Foundation settings file
// C) Import Normalize (Ships with Foundation)
// D) Import Foundation components

// A) Universal components
@import "../../universal/components/colours";
@import "../../universal/components/fonts";
@import "../../universal/components/variables";
@import "../../universal/components/mixins";
@import "../../universal/components/alerts";

// B) Universal Foundation settings
@import "../../universal/universal-foundation-settings";

// C) Normalize
@import "../../foundation/scss/normalize";

// D) Foundation components
// Import *ALL* components (default)

@import "../../foundation/scss/foundation";

// ---------- *OR* ---------- //

// Import components as required (custom)
// @import "../../foundation/scss/foundation/components/grid";
// @import "../../foundation/scss/foundation/components/accordion";
// @import "../../foundation/scss/foundation/components/alert-boxes";
// @import "../../foundation/scss/foundation/components/block-grid";
// @import "../../foundation/scss/foundation/components/breadcrumbs";
// @import "../../foundation/scss/foundation/components/button-groups";
// @import "../../foundation/scss/foundation/components/buttons";
// @import "../../foundation/scss/foundation/components/clearing";
// @import "../../foundation/scss/foundation/components/dropdown";
// @import "../../foundation/scss/foundation/components/dropdown-buttons";
// @import "../../foundation/scss/foundation/components/flex-video";
// @import "../../foundation/scss/foundation/components/forms";
// @import "../../foundation/scss/foundation/components/icon-bar";
// @import "../../foundation/scss/foundation/components/inline-lists";
// @import "../../foundation/scss/foundation/components/joyride";
// @import "../../foundation/scss/foundation/components/keystrokes";
// @import "../../foundation/scss/foundation/components/labels";
// @import "../../foundation/scss/foundation/components/magellan";
// @import "../../foundation/scss/foundation/components/orbit";
// @import "../../foundation/scss/foundation/components/pagination";
// @import "../../foundation/scss/foundation/components/panels";
// @import "../../foundation/scss/foundation/components/pricing-tables";
// @import "../../foundation/scss/foundation/components/progress-bars";
// @import "../../foundation/scss/foundation/components/range-slider";
// @import "../../foundation/scss/foundation/components/reveal";
// @import "../../foundation/scss/foundation/components/side-nav";
// @import "../../foundation/scss/foundation/components/split-buttons";
// @import "../../foundation/scss/foundation/components/sub-nav";
// @import "../../foundation/scss/foundation/components/switches";
// @import "../../foundation/scss/foundation/components/tables";
// @import "../../foundation/scss/foundation/components/tabs";
// @import "../../foundation/scss/foundation/components/thumbs";
// @import "../../foundation/scss/foundation/components/tooltips";
// @import "../../foundation/scss/foundation/components/top-bar";
// @import "../../foundation/scss/foundation/components/type";
// @import "../../foundation/scss/foundation/components/offcanvas";
// @import "../../foundation/scss/foundation/components/visibility";

// ==================================================================
// UNIVERSITY OF BATH
// ==================================================================

// University of Bath - Main
@import "bath/typography";
@import "bath/structure";

// Individual modules
@import "bath/modules/navigation";
@import "bath/modules/search-bar";
@import "bath/modules/hero";
@import "bath/modules/page-header";
@import "bath/modules/page-footer";

// Sections
@import "bath/modules/section-study";
@import "bath/modules/section-research";
@import "bath/modules/section-events";
@import "bath/modules/section-about";
@import "bath/modules/section-accolades";

// ==================================================================
// IE fixes - Always apply last!
// ==================================================================

// @import "ie";

1) Import universal components

Universal branding colours, typefaces, variables and mixins. These are imported first so that the variables and mixins are available to use in the universal Foundation settings file.

2) Import universal Foundation settings

A copy of the universal Foundation settings file. This sets up our version of Foundation without editing the core files.

3) Import Normalize

Normalize ships with Foundation and is required for some Foundation components.

4) Import Foundation components

Manifests import all Foundation components by default. Alternatively components can be imported as required to reduce compiled CSS output weight.

Foundation will not function properly without importing certain core components.

5) Import University of Bath specific files

Typography

Default typography that sets out consistent typographic elements such as headers, paragraphs etc.

Default type declarations have been separated from the universal font component as base typographic settings (h1, h2, h3, p etc.) are set in _settings.scss.

App/site specific partials

Import any site or app specific partials at this point.

Next steps

There are a number of next steps required to hone the Sass refactoring. 

  1. Use the $base-font-size variable in _typography.scss to create a uniform vertical rhythm
  2. Update base typographic elements with the vertical rhythm defined in the the typeface investigation sprints
  3. Move the project manifest files (cms-alpha.scss and cms-alpha-editor.scss) into their respective directories - /site or /apps
  4. Define the minimum number of components Foundation requires to run
  5. Run through universal-foundation-settings.scss from top-to-toe and set any relevant universal Foundation overrides

 

  • No labels

3 Comments

  1. Unknown User (pgw22)

    Dan Dineen why is typography not in `universal` ?

    1. As I'm thinking about it we could/should move that out to /universal. I originally placed it there as it simply acts as overrides for the inflexible Foundation type defaults. However it is the import order in the manifest file that is important not the location of the file itself.