Front End Philosophy
Below are some ideas for our front-end strategy.
Front-end presentation consists of:
- Menu and other navigational tools
- Content area - a collection of columns OR horizontal content parts
This approach is reflected in most CSS frameworks. Some front-end frameworks only provide a grid system while others also provide solutions for the other areas. Mostly missing are: header, footer, and menus.
Silverstripe specific requirements for front-end framework
Silverstripe specific requirements include:
- a solution for the specific way Silverstripe formats its forms
- a typography file (themes/mytheme/css/editor.css) which allows the HTMLEditor fields to become WYSIWYG
- a way to work with the menu link type classes (current, link, section).
- a way to deal with the message classes (message, bad, good, warning)
- classes added by HTML Editor (tiny MCE) such as left-align, right-align, etc... This mainly applies to images.
All of these aspects can be customised within Silverstripe to fit a front-end framework but it would be easier and nicer if it adjusted to Silverstripe instead.
When building a front-end, we try to separate our parts as much as possible. We do this so that we can:
- change one part without breaking the other parts
- upgrade parts
- add / remove parts without breaking other parts
- reuse parts for different sites
We try to separate:
- webpack engine
- framework css / js
- site specific css / js
- code for various parts (e.g. header, footer, etc...)
Choices we Made:
- We use webpack (https://webpack.github.io/) where possible
- We do not choose a front-end framework, we allow this to be selected for each specific project
- jQuery is added by default
- Webpack: https://webpack.github.io/ - The engine for running our front-end code. Webpack requires NPM and NODE.
- Our setup requires PORT 3000 to be available for webpack
- webpack backend requirements: https://github.com/sunnysideup/silverstripe-webpack_requirements_backend - a module we wrote to make Silverstripe (front-end) requirements play nicely with webpack.
- webpack engine: https://github.com/sunnysideup/silverstripe-sswebpack_engine_only
Structure of the theme folder
We would like to have several themes within one project.
- themes/sswebpack_engine_only: the webpack engine only. NOT theme specific.
- themes/mytheme: any generic code that we take from project to project (e.g. bootstrap).
- themes/mytheme_dist: the production files created by webpack for the specific theme you are working with
- themes/mytheme_mysite: any CSS / JS / Silverstripe templates for the project at hand.
- themes/mytheme_blog: any CSS / JS / Silverstripe templates for the Blog module
- themes/mytheme_node_modules: any project specific node modules for the project at hand (externals, similar to the externals added by composer), set by a package.json file in this folder.
We put the generic files in mytheme because this is the easiest way we can overrule them in other "mytheme" folders as silverstripe overrides template files in the theme folder using an alphabetically sorted approach (e.g. themes/mysite_zz/templates/Page.ss will override themes/mysite/templates/Page.ss AFAIK).
How to install
- Add requirements to composer file and run composer update
- browse to themes/sswebpack_engine_only and run npm install
- browse to any other folders containing node modules and repeat npm install
- add various files to themes/mytheme_mysite (details to be provided).
- run a dev/build/?flush=all
What silverstripe modules need to provide if we use this approach
- Sample template - as simple as possible
- Required CSS / SASS / SCSS (e.g. hide show) to make sense of it
- Optional CSS / SASS / SCSS that makes it look pretty
- JS that can run independently (although it may use jQuery).
more detailed theme folder organisation
- themes: root folder for theme
- themes/themevariables.js - tells webpack the theme you are using and various other details.
- themes/mywebpacktheme: css framework (added via composer where possible)
- themes/mywebpacktheme_dist: production files (base.js + /css/style.css)
- themes/mywebpacktheme_mysite: custom code for the project
- themes/mywebpacktheme_mysite/src: js / scss for project
- themes/mywebpacktheme/src/raw_requirements: files that are automatically copied from modules thanks to webpack backend module.
- themes/mywebpacktheme_mymoduleA: themed templates only for module A
- themes/mywebpacktheme_mymoduleB: themed templates only for module B
- themes/mywebpacktheme_node_modules: project specific npm packages.
- themes/sswebpack_engine_only: webpack engine
Below is a quick-n-dirty review of front-end frameworks out there:
Options for framework:
Depending on the project at hand, you can use various approaches to front-end frameworks:
- D I Y
- Take one of the frameworks
- Set up a custom framework based on various existing ones (e.g. bootstrap forms and grid from toast)