Stylesheets and layout

Working with the UI and stylesheets

Folder structure

The files that make the front end behaviour should be placed according to the structure described in following diagram.

UI folder structure.png

Adding/modifying stylesheets

  • The scss files are Module/component based and each file is constructed after the following pattern:
    1. Settings first (SASS variables)
    2. Import of Foundation components
    3. Customizations
  • For small style changes: Overwrite our Accelerator files by placing a file in the /scss/site folder where you write your project specific styling (change the variables you want and so on), then import the file in the site.scss after the Accelerator files
  • For large style changes: Take out the SCSS-files from the Accelerator folder and place them in site-folder, do all your changes and change the import paths in site.scss

modify scss.png

  • Grunt is used for compiling the SCSS-files so start the grunt watch task and it will compile as soon as you save a file. You can run it from command line after browsing to wwwroot folder where Gruntfile.js is located and executing grunt watch or you can install the Visual Studio plugin as described in Setup Dev Environment article.
  • Grunt compiles everything to a site.css-file (located in css-folder) and that file is the one that the website link to

Framework layout

Selection of framework for the Accelerator is dependent on if MVC or Web forms accelerator is used.


The MVC Accelerator uses layouts located in the Views/Shared folder. The logic to select correct layout for each page is placed in Litium.Accelerator.ContentProviders.Providers.MenuProvider and the result is then read in Views/_ViewStart.cshtml which then sets the layout to use.

Web forms

Master pages are located in folder: <wwwroot>\Site\CMS\Templates\Framework. The Accelerator sites by default uses the default.master file, which in tern defines the left and right columns and content areas.

Zurb Foundation uses nested grids and therefore there can only be one master page in the site. The implication is that all the site specific functionality need to be moved to a content placeholder for different framework layouts views.

\Src\Litium.Studio.Accelerator\CMS\Layout.cs class defines the layout views that are used, and the master file selects the view presented by the page template.

For example, the <wwwroot>\Site\CMS\Templates\B2C\MyPage1.aspx.cs uses a Full layout as shown in following code fragment.

namespace Site.CMS.Templates.B2C
	/// <summary>
	///     Page to administrate users own information.
	/// </summary>
	public partial class MyPage1 : BaseTemplate
		public MyPage1()
			LayoutView = Layout.Full;


Is this page helpful?
Thank you for your feedback!