A set of re-usable Elemental
blocks for Ministry of Education Silverstripe projects. This repository
provides the model, templates, javascript and styles but allows individual
projects to stylize the blocks as they need.
To use the scss
styles developed you can either include them one by one into
your file or include the all the styles by importing contents.scss
@import "../../vendor/education/blocks/client/scss/contents.scss";
Individual block styles should be stored within education/blocks/client/scss/blocks
.
Note that these styles rely heavy on the styles provided by the (https://github.com/education-nz/silverstripe-ds)[design system]
Some blocks require javascript enhancements (e.g Accordions and Tabs). Like the
SCSS, this module does not automatically include the javascript functionality,
the individual site must import it via ES6 includes as needed into their build
process. Each block provides one export to call on document.ready.
import { ready } from "../../../vendor/education/silverstripe-ds/client/js/utils";
import { Accordion } from "../../../vendor/education/blocks/client/js";
ready(() => {
Accordion();
});
If your education project does not require a particular block then disable it
from the content editors.
Page:
disallowed_elements:
- Education\Blocks\Hero
Disallowed elements is set on any object that implements elemental, by default
that includes Page
but also any subclass of ElementList
for things like our
Row
block. A common situation in this case is you may want a Hero
block on
the page but you don't want someone to put a Hero
inside an Accordion
list
Page:
disallowed_elements:
- Education\Blocks\Hero
Education\Blocks\Accordion:
disallowed_elements:
- Education\Blocks\Hero
Websites might have specific nomenclature for elements, for instance one project
may refer to a Tile
as Image Button
or a Chapter
element as something like
Featured Text
. Blocks can be relabeled via the config YAML API.
Education\Blocks\Tile:
singular_name: 'Image Button'
Each block provides all the required javascript, scss and HTML to function.
HTML should be written in BEM format. block-name__elem-name_mod-name_mod-val
Javascript should be provided as ES6 and stored in client/js/blocks/{name}.js
.
It should export a single default property which is a function.
Default SCSS is provided in client/scss/blocks/{name}.scss. Unlike JS which is
automatically included, the SCSS is not - your build process will need to bring
in the SCSS files that you need to use
@import "../../../vendor/education/blocks/client/scss/blocks/video.scss";
Below is the list of currently supported blocks provided in this module. They
can be enabled or disabled individually per site.
Full page width, image in the background and a H1 title, optional paragraph
A more structured content element which displays the content with a title and a
sidebar.
@todo - image
Basic HTML Content view.
Carousel of content elements
File b
Full page width title, colour and image.
Displays a grid of photos or links
Displays a formatted block quote.
Group a list of tiles or other elements such as images
Force some space between two elements. For uses where default spacing is not
sufficient.
Designed to be embedded within an Row
and links to another page.
Copyright 2020. All Rights Reserved Ministry of Education, NZ.
Module rating system helping users find modules that are well supported. For more on how the rating system works visit Module standards
Score not correct? Let us know there is a problem