CSS and Grid System

Using your own CSS

The higher education package comes with a built-in SCSS parser (https://github.com/leafo/scssphp). You can simply add your own SCSS files as you are used to with CSS files:

page.includeCSS.my-custom-styles = EXT:my_custom_package/Resources/Public/Scss/import.scss

The CSS files will be created on-the-fly, placed into the typo3temp folder and included in the frontend.

You can define your own SCSS variables file which will then be include at very beginning of the rendering process. For more information on that see SCSS Variables.

Using the grid system

The gridsystem of higher education package is inspired by the 12 column bootstrap-gridsystem. In fact it is a fork of the bootstrap grid. But do not be fooled: You won’t get all the bootstrap functions since it’s only based on the that grid but has been tailored to fit the higher education package.

The grid system has been extended by using the BEM syntax (http://getbem.com/introduction/).

You can find some examples how to use the grid system in the file Resources/Public/Scss/Framework/_grid.scss.