webexcess/basetypes

Basic NodeTypes for Neos

WebExcess.BaseTypes

Basic NodeTypes for Neos CMS., _(*1)

Installation

composer require webexcess/basetypes

Compatibility and Maintenance

Ready to use

Content NodeTypes

• Heading
• Paragraph
• Responsive Image (srcset)
• SVG-Image
• Button
• Responsive Iframe
• Grid (two-, three- and four-column)

Document NodeTypes

• Home
• Page

Rules:, _(*2)

• Each first code-line of a file contains a comment with the respective css class, e.g. # basetype-paragraph
• Properties are always namespaced with the BaseType Name, e.g. paragraphText - not only text

Structure:, _(*3)

• Each NodeType is composed out of Mixin parts. For the Paragraph these are:
  • WebExcess.BaseTypes:Content defines the NodeType as a Content-Element
  • WebExcess.BaseTypes:Paragraph.ui makes the NodeType an needed Inspector Groups visible
  • WebExcess.BaseTypes:Paragraph.properties.paragraphText--inplace enables the Property paragraphText with inplace settings
• Each Property is available in three modes:
  • WebExcess.BaseTypes:Paragraph.properties.paragraphText the basic property settings
  • WebExcess.BaseTypes:Paragraph.properties.paragraphText--inspector .. including the inspector settings
  • WebExcess.BaseTypes:Paragraph.properties.paragraphText--inplace .. including the inplace settings

Hint:, _(*4)

• Import your initial content with ./flow site:import --package-key WebExcess.BaseTypes

Usage / Extending

BaseTypes is replacing and extending existing Neos NodeTypes and enables you to easily build and extend your own custom NodeTypes., _(*5)

Example:, _(*6)

Create in your Theme Package a Teaser-NodeType which includes an image, an inplace editable heading and text.., _(*7)

NodeTypes.Teaser.yaml, _(*8)

'WebExcess.Theme:Teaser':
    superTypes:
        'WebExcess.BaseTypes:Content': true
        'WebExcess.BaseTypes:Heading.ui': true
        'WebExcess.BaseTypes:Heading.properties.headingText--inplace': true
        'WebExcess.BaseTypes:Heading.properties.headingTagName--inspector': true
        'WebExcess.BaseTypes:Paragraph.ui': true
        'WebExcess.BaseTypes:Paragraph.properties.paragraphText--inplace': true
        'WebExcess.BaseTypes:Image.ui': true
        'WebExcess.BaseTypes:Image.properties.imageAsset--inspector': true
        'WebExcess.BaseTypes:Button.properties.buttonUrl--inspector': true
        'WebExcess.BaseTypes:Button.properties.buttonStyle': true
    ui:
        label: 'Teaser'
        icon: icon-file-text-o

NodeTypes.Teaser.fusion, _(*9)

prototype(WebExcess.Theme:Teaser) >
prototype(WebExcess.Theme:Teaser) < prototype(WebExcess.BaseTypes:Image) {
    content = Neos.Fusion:Array {
        heading = WebExcess.BaseTypes:HeadingObject
        heading.@position = 'after image'

        text = WebExcess.BaseTypes:ParagraphObject
        text.@position = 'after heading'
    }
}

That's all, _(*10)

Think about

1. "Copy-paste is much better than DRY in a lot of cases... Bad abstraction is much worse than no abstraction." Dmitri Pisarev
2. "Any problem in computer science can be solved with another layer of indirection. But that usually will create another problem." David Wheeler

by webexcess GmbH, _(*11)