M12.Foundation: Zurb Foundation components for Neos CMS
M12.Foundation aims to implement majority of Zurb Foundation (v5) components, in the best possible way, inside Neos CMS.
Features
Implemented Zurb Foundation components
- Accordion
- Alert and Panel
- Button
- Dropdown (with links or any content)
- Font Icon (based on Font Awesome icons)
- Form elements: Form Container, Fieldset, Label (incl. pre/postfix labels), Input, Checkbox, Radio, Select, Textarea
- Grid: Block Grid, Grid Row with Grid Column, simple Container
- Lightbox (for images in Block Grid)
- Navigation: TopBar
- Navigation: Side Nav, Sub Nav
- Navigation: Magellan Sticky Navigation support
- Orbit Slider
- Reveal Modal (incl. support for opening images in modal window)
- Tabs
- Tooltips
- Video (Flex Video)
Other features
-
Automatically pre-configured complex components (so called
Assistance Nodes
). Thanks to that feature, you get complex components working out-of-the-box. Examples:Reveal Modal
: when you add this component to the page, it will also create aButton
and wire it together withReveal Modal
, so you can just click it, see the modal and edit its content.Dropdown
: when you add this component to the page, it will also create aButton
and wire it together with Dropdown, so you can just click it, see the dropdown and edit its content.Grid Row
: for example adding a grid row with 4 columns will set sensible defaults for columns width for each device (i.e. small 12/12, medium 6/12, large 4/12).Orbit Slider
: adding this component will also add 3 child nodes with dummy images.Form Container
: adding this component will create sample responsive form for you, incl. all grid row components, labels inside etc.
See Settings.yaml for full
Assistance Nodes
configuration (M12.Foundation:assistanceChildNodes
section). -
Background image support (both from Media library and using external image) for many components. Thanks to that you can easily create a'la Hero components.
-
Spacing before/after and left/right from Inspector for each component.
-
Semantic tags: ability to define custom, semantic tag (e.g.
section
instead ofdiv
) for most components. -
Ability to define several Foundation common-use classes like
rounded
,radius
, floats, text-align to almost all components (or where applicable). -
Tooltips: ability to use them with many components, incl. default Neos compnents (e.g. Headline).
-
Font Icons: ability to add it to components where it make sense (i.e. Button).
... and many more.
Check the issue tracker to see current work in progress and/or future plans.
Check the releases page to see stable releases for your Neos version.
Usage
The best way is to install it together with M12.FoundationSite site package, which has all CSS/JS in it, including all JS code to work around Neos (e.g. re-initialising Foundation components as soon as they're added to the page).
Note: pay attention to release notes to match the right version with your Neos version.
Include in your main composer.json
the m12/neos-foundation
and m12/neos-foundation-site
dependencies:
"require": {
"other-dependenies-here...": "*",
"m12/neos-foundation": "dev-master",
"m12/neos-foundation-site": "dev-master"
},
and run composer install
neos-protobrew-distribution
Usage with You can try this plugin with ready-to-use, working out-of-the-box
neos-protobrew-distribution.
This is an open-source Neos distribution created for
PrototypeBrewery.io project
and it has M12.Foundation
and M12.FoundationSite
plugins installed
and configured. If you're familiar with Docker, there's also Docker image
with the whole package, so it's very easy to try. See the instructions
in the README there.
Author(s)
- Marcin Ryzycki [email protected]
- Samuel Ryzycki [email protected]
- Dmitri Pisarev [email protected]
Licensed under: The MIT License (MIT)
Sponsored by PrototypeBrewery.io - the new prototyping tool for building fully interactive prototypes of your website or web app. Built on top of Neos CMS and Zurb Foundation framework.