Giter VIP home page Giter VIP logo

m12.foundation's Introduction

M12.Foundation: Zurb Foundation components for Neos CMS

Circle CI

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 a Button and wire it together with Reveal 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 a Button 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 of div) 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

Usage with neos-protobrew-distribution

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)

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.

m12.foundation's People

Contributors

dimaip avatar ryzy avatar simonschaufi avatar soee avatar sryzycki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

m12.foundation's Issues

Top Bar: pre-fill default values

To make Top Bar component more easy to use, by default it could have set values:

  • Top Bar Title: Home
  • Top Bar section align: right
  • checked Contain to grid

Attributes set by user are not applied to component

Attributes set by user in the inspector (ie. custom css class, custom id, inline styles) are not applied to some components. This is caused by re-factoring, when we started rendering them using TYPO3.TypoScript:Tag instead of TYPO3.Neos:Content where these attributes are defined.

FEATURE: help messages

Add contextual help messages for new content dialogue window and Inspector (feature available likely in Neos 2.1).

Refactor BlockGrid for Neos 2.0

BlockGrid currently works fine, but we should get rid of these nasty hacks with condition/iterators as we did in Tabs/Orbit.

PS. We need to make sure we won't hit the issue described in #23 - I think this is why initially we used these hacks. Currently, with these hacks it works fine.

Set baseNodeType for `_nodeType` property to limit number of allowed types to change to

Each Neos node can be changed/migrated into another type. Currently we do not set the baseNodeType option for that _nodeType property (which has NodeTypeEditor). As an effect, each node can be migrated to any content node...

To make it more intuitive, we could set baseNodeType to some parent abstract node type, so the list is shorter and more sensible.

Cache issue in Content References

When you change referenced node(s), content rendered by Content References is not updated.

TYPO3.Neos.NodeTypes:ContentReferences does NOT have any @cache entry… But I guess it would have to have it, moreover, with some rules to invalidate it when referenced nodes have changed (i.e. nodes listed in TYPO3.Neos.NodeTypes:ContentReferences.properties)?

Accordion: add 'active' class to active item

For each item in accordion template we should check if item property 'isAccordionItemActive' is set to TRUE, and if yes <li class="accordion-navigation"> element should get class 'active'.

Sub Nav: current markup triggers W3C validation error

The error:

Element dl is missing a required child element.
Content model for element dl:
Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.

Add responsive text align classes

Currently we only have .text-[align] classes in M12.Foundation:AbstractGenericHelpers for classTextAlign property.

This property should be made an array type with ability to select couple of values here.

We need to extend this list with all responsive class names, ie. .small-only-text-left, .small-text-left, .medium-text-left etc, as listed on http://foundation.zurb.com/docs/utility-classes.html

Switching to 'Raw mode' editing mode throws TypoScript exception

Uncaught exception #1 in line 54 of /data/www/neos-projects/Packages/Framework/TYPO3.Eel/Classes/TYPO3/Eel/Helper/ArrayHelper.php: Catchable Fatal Error: Argument 1 passed to TYPO3\Eel\Helper\ArrayHelper::join() must be of the type array, string given in /data/www/neos-projects/Packages/Framework/TYPO3.Eel/Classes/TYPO3/Eel/Helper/ArrayHelper.php line 54

47 TYPO3\Flow\Error\ErrorHandler::handleError(4096, "Argument 1 passed to TYPO3\Eel\Helper\ArrayHelper::join() must be of the type array, string given", "/data/www/neos-projects/Packages/Framework/TYPO3.Eel/Classes/TYPO3/Eel/Helper/ArrayHelper.php", 54, array|0|)
46 TYPO3\Eel\Helper\ArrayHelper::join("neos-raw-content-mode", " ")
45 call_user_func_array(array|2|, array|2|)
44 TYPO3\Eel\Context::call("join", array|2|)
43 TYPO3\Eel\ProtectedContext::call("join", array|2|)
42 TYPO3\Eel\Context::callAndWrap("join", array|2|)
41 expression_c0d62ae9ab5b62c62c431a08d91e1d3b(TYPO3\Eel\ProtectedContext)
40 TYPO3\Eel\CompilingEvaluator_Original::evaluate("String.trim(String.pregReplace(Array.join(value,' '),'/\s+/',' '))", TYPO3\Eel\ProtectedContext)
39 TYPO3\Eel\Utility_Original::evaluateEelExpression("${String.trim(String.pregReplace(Array.join(value,' '),'/\s+/',' '))}", TYPO3\Eel\CompilingEvaluator, array|17|)
38 TYPO3\TypoScript\Core\Runtime_Original::evaluateEelExpression("String.trim(String.pregReplace(Array.join(value,' '),'/\s+/',' '))", M12\Foundation\TypoScriptObjects\AttributesImplementation)
37 TYPO3\TypoScript\Core\Runtime_Original::evaluateEelExpressionOrSimpleValueWithProcessor("rawContent<TYPO3.Neos:Page>/bodyTag<TYPO3.TypoScript:Tag>/attributes<TYPO3.TypoScript:Attributes>/class/__meta/process/trimThatWitch/expression", array|3|, M12\Foundation\TypoScriptObjects\AttributesImplementation)
36 TYPO3\TypoScript\Core\Runtime_Original::evaluateInternal("rawContent<TYPO3.Neos:Page>/bodyTag<TYPO3.TypoScript:Tag>/attributes<TYPO3.TypoScript:Attributes>/class/__meta/process/trimThatWitch/expression", "Exception", M12\Foundation\TypoScriptObjects\AttributesImplementation)
35 TYPO3\TypoScript\Core\Runtime_Original::evaluateEelExpressionOrSimpleValueWithProcessor("rawContent<TYPO3.Neos:Page>/bodyTag<TYPO3.TypoScript:Tag>/attributes<TYPO3.TypoScript:Attributes>/class", array|7|, M12\Foundation\TypoScriptObjects\AttributesImplementation)
34 TYPO3\TypoScript\Core\Runtime_Original::evaluateInternal("rawContent<TYPO3.Neos:Page>/bodyTag<TYPO3.TypoScript:Tag>/attributes<TYPO3.TypoScript:Attributes>/class", "NULL", M12\Foundation\TypoScriptObjects\AttributesImplementation)
33 TYPO3\TypoScript\Core\Runtime_Original::evaluate("rawContent<TYPO3.Neos:Page>/bodyTag<TYPO3.TypoScript:Tag>/attributes<TYPO3.TypoScript:Attributes>/class", M12\Foundation\TypoScriptObjects\AttributesImplementation)
32 TYPO3\TypoScript\TypoScriptObjects\AbstractTypoScriptObject::tsValue("class")
31 M12\Foundation\TypoScriptObjects\AttributesImplementation_Original::evaluate()
30 TYPO3\TypoScript\Core\Runtime_Original::evaluateInternal("rawContent<TYPO3.Neos:Page>/bodyTag<TYPO3.TypoScript:Tag>/attributes", "NULL", TYPO3\TypoScript\TypoScriptObjects\TagImplementation)
29 TYPO3\TypoScript\Core\Runtime_Original::evaluate("rawContent<TYPO3.Neos:Page>/bodyTag<TYPO3.TypoScript:Tag>/attributes", TYPO3\TypoScript\TypoScriptObjects\TagImplementation)
28 TYPO3\TypoScript\TypoScriptObjects\AbstractTypoScriptObject::tsValue("attributes")
27 TYPO3\TypoScript\TypoScriptObjects\TagImplementation_Original::evaluate()
26 TYPO3\TypoScript\Core\Runtime_Original::evaluateInternal("rawContent<TYPO3.Neos:Page>/bodyTag", "NULL", TYPO3\TypoScript\TypoScriptObjects\ArrayImplementation)
25 TYPO3\TypoScript\Core\Runtime_Original::evaluate("rawContent<TYPO3.Neos:Page>/bodyTag", TYPO3\TypoScript\TypoScriptObjects\ArrayImplementation)
24 TYPO3\TypoScript\TypoScriptObjects\AbstractTypoScriptObject::tsValue("bodyTag")
23 TYPO3\TypoScript\TypoScriptObjects\ArrayImplementation_Original::evaluate()
22 TYPO3\TypoScript\Core\Runtime_Original::evaluateInternal("rawContent", "Exception")
21 TYPO3\TypoScript\Core\Runtime_Original::render("rawContent")
20 TYPO3\TypoScript\TypoScriptObjects\MatcherImplementation_Original::evaluate()
19 TYPO3\TypoScript\Core\Runtime_Original::evaluateInternal("root<TYPO3.TypoScript:Case>/editPreviewMode<TYPO3.TypoScript:Matcher>", "Exception")
18 TYPO3\TypoScript\Core\Runtime_Original::render("root<TYPO3.TypoScript:Case>/editPreviewMode<TYPO3.TypoScript:Matcher>")
17 TYPO3\TypoScript\TypoScriptObjects\CaseImplementation_Original::renderMatcher("editPreviewMode")
16 TYPO3\TypoScript\TypoScriptObjects\CaseImplementation_Original::evaluate()
15 TYPO3\TypoScript\Core\Runtime_Original::evaluateInternal("root", "Exception")
14 TYPO3\TypoScript\Core\Runtime_Original::render("root")
13 TYPO3\Neos\View\TypoScriptView_Original::render()
12 TYPO3\Flow\Mvc\Controller\ActionController_Original::callActionMethod()
11 TYPO3\Flow\Mvc\Controller\ActionController_Original::processRequest(TYPO3\Flow\Mvc\ActionRequest, TYPO3\Flow\Http\Response)
10 TYPO3\Flow\Mvc\Dispatcher_Original::initiateDispatchLoop(TYPO3\Flow\Mvc\ActionRequest, TYPO3\Flow\Http\Response)
9 TYPO3\Flow\Mvc\Dispatcher_Original::dispatch(TYPO3\Flow\Mvc\ActionRequest, TYPO3\Flow\Http\Response)
8 call_user_func_array(array|2|, array|2|)
7 TYPO3\Flow\Object\DependencyInjection\DependencyProxy::__call("dispatch", array|2|)
6 TYPO3\Flow\Object\DependencyInjection\DependencyProxy::dispatch(TYPO3\Flow\Mvc\ActionRequest, TYPO3\Flow\Http\Response)
5 TYPO3\Flow\Mvc\DispatchComponent_Original::handle(TYPO3\Flow\Http\Component\ComponentContext)
4 TYPO3\Flow\Http\Component\ComponentChain_Original::handle(TYPO3\Flow\Http\Component\ComponentContext)
3 TYPO3\Flow\Http\Component\ComponentChain_Original::handle(TYPO3\Flow\Http\Component\ComponentContext)
2 TYPO3\Flow\Http\RequestHandler::handleRequest()
1 TYPO3\Flow\Core\Bootstrap::run()

Update README.md with information about migrtion to 1.x

There should be Upgrade section in README.md file with detailed description how to upgrade to latest version from older one. For example upgrade from 0.2 => 1.x.

Such upgrade instruction should contain command that will change package version in composer.json, command to update composer packages, command to flush cache (for Development and Production context), command to run node migration as it is required.

Grid columns: set default column width

As a user, I want to add grid with X column
and have default column width set.

For example. adding 2-col grid, I'd expect to have column sizes set to 6/12 on these 2 columns, so they are rendered correctly right after being added.

[BUG] TopBar home link ignores dimensions

Home link in TopBar NodeType always links to default dimension because href attribute is hardcoded to '/'. We should use neos viehelper to link to root node in current dimensions. There are 2 options:

<neos:link.node node="~">text</neos:link.node>
or
<neos:link.node node="{site}">text</neos:link.node>

Home link in TopBar NodeType should be optional

TopBar NodeType can be used in various ways. When inserted into ContentCollection we can set (or not) home link text through inspector. When this value is empty than link is not generated and this is fine.

Problem is when we define TopBar as a childNode. For example:

'TYPO3.Neos.NodeTypes:Page':
  childNodes:
    navigation:
      type: 'M12.Foundation:TopBar'

now the Home link is always generated because of this condition in TypoScript (Resources/Private/TypoScript/Prototypes/Navigation.ts2):

topBarTitle = ${isDocumentContext ? q(site).property('title') : q(node).property('topBarTitle')}

(page title is always set and we are in Document context).

Maybe some checkbox in element inspector would be a better option do define if we want or not Home link in TopBar?

Accordion: all items should be inactive by default

The main purpose of using accordion is to hide each item content. At the moment if we add new item it's property "Make the accordion item active" is checked by default and it forces us to click on it each time we want to disable it.

I think in most cases only one item will be active so it would be much better to make the mentioned option disabled by default. Thanks! :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.