Site Studio
Customising your AMP sub-theme
Now that you’ve set up AMP and created a sub-theme, you’ll need to create CSS to style your pages. In this guide, we'll cover the following topics:
AMP (Accelerated Mobile Pages) are a stripped down form of HTML, designed to be lightweight and serve mobile content much faster than regular pages. Naturally, this creates limitations to ensure fast delivery of content.
Custom JS and additional libraries can add a lot of weight to page load times, so AMP pages do not support these.
Your AMP sub-theme CSS styles (which are actually held in a Drupal html.twig file) cannot exceed 75kb.
See recommended approach to CSS for more info.
See the Disallowed styles section on the amp.dev website for latest information.
Any imported fonts you’ve specified in > Website settings > Font libraries will be available to your AMP sub-theme to use in CSS.
The following origins are whitelisted by AMP:
Typography.com: https://cloud.typography.com
Fonts.com: https://www.fonts.com/
Google Fonts: https://fonts.google.com/
Typekit: https://use.typekit.net
Font Awesome: https://fontawesome.com/
Uploaded font packages will not work unless you create @font-face declarations for these fonts in your sub-theme CSS file. These can be copied from the sites/default/files/cohesion/styles/base/stylesheet.min.css file.
This also applies to icon fonts specified in > Website settings > Icon libraries.
| Module | Description |
|---|---|
| Field Formatter Class | Allows classes to be added to the outer wrapper of any Drupal field display, which provides more control for theming. |
| Title Field for Manage Display | Creates a Title field in content types that shows up in the Manage display tab. Allows more control over page title placement. |
| Breadcrumb Extra Field | Creates a Breadcrumb field in content types that shows up in the Manage display tab. Allows more control over breadcrumb placement. |
| Context (and Context UI submodule) | In combination with context visibility settings on Site Studio elements, you can create AMP-alternative content. E.g. replacing Picture with Image. |
Initially your AMP pages will look very different to regular pages as no styles will be applied - these have to be generated manually.
We recommend you identify a content type that is most likely to benefit from AMP optimisation (eg. blog) as a starting point. You can then expand to other content types as necessary, providing you do not exceed the 50kb CSS limit.
Once you’ve identified a content type to work with, you may need to reorganise your block and content type field placement to provide the best user experience. Site Studio templated content (master templates, content templates etc) are not supported with AMP themes.
See the useful modules section for some community modules that will help with this process.
To keep your theme CSS as light as possible, we recommend using a CSS preprocessor such as SCSS. By setting the SCSS output style to compressed, it will minify the CSS into a single line and provide room for extra CSS.
Keep CSS selectors as short as possible - single-level element (e.g. H1) or class (e.g. .myclass) selectors are ideal.
Never use ID selectors (e.g. #myid) as these are much harder to override.
If multi-level selectors are necessary, limit to no more than three levels (e.g. ul li a) - if possible add classes to these elements to give more control.
Don’t use an autoprefixer - whilst this is normally recommended for legacy browser support, AMP is a modern development framework that targets mobile devices that don’t require autoprefixing. It will also reduce the amount of CSS generated.
Keep it simple - your AMP pages won’t always look the same as your regular pages, given that page load speed is the priority.
Whilst the CSS you define for your AMP sub-theme will differ from project to project, we recommend using the following outline.
| CSS section | Description |
|---|---|
@font-face declarations | Always put your font declarations first, so that you can specify font-family settings for any following selectors. |
| Site Studio grid styles | As no external styles are loaded, you will need to duplicate Site Studio’s grid CSS to implement a responsive layout. These include coh-row, coh-row-inner, coh-column and coh-col-* classes and associated styles. |
| Site Studio base styles | Some styles that you’ve defined through Site Studio base styles may need duplicating. For example heading, list and paragraph styles. |
| Drupal core styles | you may need to duplicate some of Drupal's core CSS. Examples include hidden, visually-hidden, focusable and invisible. |
| Drupal element styles | CSS that targets Drupal elements, blocks or fields. This would include styles for any custom classes you’ve added to content type fields. |
| Site Studio custom styles | Some styles that you’ve defined through Site Studio custom styles may need duplicating. |
| Site Studio inline element styles | Styles that you’ve applied directly to Site Studio elements through the Styles tab. |
If this content did not answer your questions, try searching or contacting our support team for further assistance.
See the Disallowed styles section on the amp.dev website for latest information.
Any imported fonts you’ve specified in > Website settings > Font libraries will be available to your AMP sub-theme to use in CSS.
The following origins are whitelisted by AMP:
Typography.com: https://cloud.typography.com
Fonts.com: https://www.fonts.com/
Google Fonts: https://fonts.google.com/
Typekit: https://use.typekit.net
Font Awesome: https://fontawesome.com/
Uploaded font packages will not work unless you create @font-face declarations for these fonts in your sub-theme CSS file. These can be copied from the sites/default/files/cohesion/styles/base/stylesheet.min.css file.
This also applies to icon fonts specified in > Website settings > Icon libraries.
| Module | Description |
|---|---|
| Field Formatter Class | Allows classes to be added to the outer wrapper of any Drupal field display, which provides more control for theming. |
| Title Field for Manage Display | Creates a Title field in content types that shows up in the Manage display tab. Allows more control over page title placement. |
| Breadcrumb Extra Field | Creates a Breadcrumb field in content types that shows up in the Manage display tab. Allows more control over breadcrumb placement. |
| Context (and Context UI submodule) | In combination with context visibility settings on Site Studio elements, you can create AMP-alternative content. E.g. replacing Picture with Image. |
Initially your AMP pages will look very different to regular pages as no styles will be applied - these have to be generated manually.
We recommend you identify a content type that is most likely to benefit from AMP optimisation (eg. blog) as a starting point. You can then expand to other content types as necessary, providing you do not exceed the 50kb CSS limit.
Once you’ve identified a content type to work with, you may need to reorganise your block and content type field placement to provide the best user experience. Site Studio templated content (master templates, content templates etc) are not supported with AMP themes.
See the useful modules section for some community modules that will help with this process.
To keep your theme CSS as light as possible, we recommend using a CSS preprocessor such as SCSS. By setting the SCSS output style to compressed, it will minify the CSS into a single line and provide room for extra CSS.
Keep CSS selectors as short as possible - single-level element (e.g. H1) or class (e.g. .myclass) selectors are ideal.
Never use ID selectors (e.g. #myid) as these are much harder to override.
If multi-level selectors are necessary, limit to no more than three levels (e.g. ul li a) - if possible add classes to these elements to give more control.
Don’t use an autoprefixer - whilst this is normally recommended for legacy browser support, AMP is a modern development framework that targets mobile devices that don’t require autoprefixing. It will also reduce the amount of CSS generated.
Keep it simple - your AMP pages won’t always look the same as your regular pages, given that page load speed is the priority.
Whilst the CSS you define for your AMP sub-theme will differ from project to project, we recommend using the following outline.
| CSS section | Description |
|---|---|
@font-face declarations | Always put your font declarations first, so that you can specify font-family settings for any following selectors. |
| Site Studio grid styles | As no external styles are loaded, you will need to duplicate Site Studio’s grid CSS to implement a responsive layout. These include coh-row, coh-row-inner, coh-column and coh-col-* classes and associated styles. |
| Site Studio base styles | Some styles that you’ve defined through Site Studio base styles may need duplicating. For example heading, list and paragraph styles. |
| Drupal core styles | you may need to duplicate some of Drupal's core CSS. Examples include hidden, visually-hidden, focusable and invisible. |
| Drupal element styles | CSS that targets Drupal elements, blocks or fields. This would include styles for any custom classes you’ve added to content type fields. |
| Site Studio custom styles | Some styles that you’ve defined through Site Studio custom styles may need duplicating. |
| Site Studio inline element styles | Styles that you’ve applied directly to Site Studio elements through the Styles tab. |
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio