Zurb Foundation Grid for TYPO3Neos

Column.html

{namespace ts=TYPO3\TypoScript\ViewHelpers}
<div{attributes -> f:format.raw()}>
	<ts:render path="content" />
</div>

Grid.ts2

prototype(Sfi.Sfi:Row) < prototype(TYPO3.Neos:Content) {
	templatePath = 'resource://Sfi.Sfi/Private/Templates/NodeTypes/Row.html'
	attributes {
		class = 'row'
	}
	columns = TYPO3.TypoScript:Collection
	columns {
		collection = ${q(node).children()}
		itemRenderer = Sfi.Sfi:Column
		itemName = 'node'
	}
}

prototype(Sfi.Sfi:Grid1) < prototype(Sfi.Sfi:Row){
	templatePath = 'resource://Sfi.Sfi/Private/Templates/NodeTypes/Row.html'
}
prototype(Sfi.Sfi:Grid2) < prototype(Sfi.Sfi:Row){
	templatePath = 'resource://Sfi.Sfi/Private/Templates/NodeTypes/Row.html'
}
prototype(Sfi.Sfi:Grid3) < prototype(Sfi.Sfi:Row){
	templatePath = 'resource://Sfi.Sfi/Private/Templates/NodeTypes/Row.html'
}
prototype(Sfi.Sfi:Grid4) < prototype(Sfi.Sfi:Row){
	templatePath = 'resource://Sfi.Sfi/Private/Templates/NodeTypes/Row.html'
}

prototype(Sfi.Sfi:Column) < prototype(TYPO3.Neos:Content) {
    templatePath = 'resource://Sfi.Sfi/Private/Templates/NodeTypes/Column.html'

    attributes {
		class = ${'columns ' + q(node).property('large') +' '+ q(node).property('medium') +' '+ q(node).property('small') +' '+ q(node).property('largeOffset') +' '+ q(node).property('mediumOffset') +' '+ q(node).property('smallOffset')}
	}
	content = TYPO3.Neos:ContentCollection {
		nodePath = '.'
	}
}

NodeTypes.yaml

#Remove default grid
'TYPO3.Neos.NodeTypes:TwoColumn':
  abstract: TRUE
'TYPO3.Neos.NodeTypes:ThreeColumn':
  abstract: TRUE
'TYPO3.Neos.NodeTypes:FourColumn':
  abstract: TRUE


'Sfi.Sfi:Row':
  abstract: TRUE
  superTypes:
    - 'TYPO3.Neos:Content'
  ui:
    label: 'Grid - Row'
    group: 'structure'
    inlineEditable: TRUE
  

'Sfi.Sfi:Grid1':
  superTypes:
    - 'Sfi.Sfi:Row'
  ui:
    label: 'Grid - 1 column'
  childNodes:
    column0:
      type: 'Sfi.Sfi:Column'

'Sfi.Sfi:Grid2':
  superTypes:
    - 'Sfi.Sfi:Row'
  ui:
    label: 'Grid - 2 columns'    
  childNodes:
    column0:
      type: 'Sfi.Sfi:Column'
    column1:
      type: 'Sfi.Sfi:Column'

'Sfi.Sfi:Grid3':
  superTypes:
    - 'Sfi.Sfi:Row'
  ui:
    label: 'Grid - 3 columns'    
  childNodes:
    column0:
      type: 'Sfi.Sfi:Column'
    column1:
      type: 'Sfi.Sfi:Column'
    column2:
      type: 'Sfi.Sfi:Column'

'Sfi.Sfi:Grid4':
  superTypes:
    - 'Sfi.Sfi:Row'
  ui:
    label: 'Grid - 4 columns'    
  childNodes:
    column0:
      type: 'Sfi.Sfi:Column'
    column1:
      type: 'Sfi.Sfi:Column'
    column2:
      type: 'Sfi.Sfi:Column'
    column3:
      type: 'Sfi.Sfi:Column'


'Sfi.Sfi:Column':
  superTypes:
    - 'TYPO3.Neos:Content'
  childNodes:
    columnContent:
      type: 'TYPO3.Neos:ContentCollection'
  ui:
    label: 'Grid - Column'
    group: 'structure'
    inlineEditable: TRUE
    inspector:
      groups:
        structure:
          label: 'Structure'
          position: 10
  properties:
    large:
      defaultValue: ''
      type: string
      ui:
        label: 'Large'
        reloadIfChanged: TRUE
        inspector:
          group: 'structure'
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              '':
                label: 'Empty'
              'large-1':
                label: 'Large-1'
              'large-2':
                label: 'Large-2'
              'large-3':
                label: 'Large-3'
              'large-4':
                label: 'Large-4'
              'large-5':
                label: 'Large-5'
              'large-6':
                label: 'Large-6'
              'large-7':
                label: 'Large-7'
              'large-8':
                label: 'Large-8'
              'large-9':
                label: 'Large-9'
              'large-10':
                label: 'Large-10'
              'large-11':
                label: 'Large-11'
    medium:
      defaultValue: ''
      type: string
      ui:
        label: 'Medium'
        reloadIfChanged: TRUE
        inspector:
          group: 'structure'
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              '':
                label: 'Empty'
              'medium-1':
                label: 'medium-1'
              'medium-2':
                label: 'medium-2'
              'medium-3':
                label: 'medium-3'
              'medium-4':
                label: 'medium-4'
              'medium-5':
                label: 'medium-5'
              'medium-6':
                label: 'medium-6'
              'medium-7':
                label: 'medium-7'
              'medium-8':
                label: 'medium-8'
              'medium-9':
                label: 'medium-9'
              'medium-10':
                label: 'medium-10'
              'medium-11':
                label: 'medium-11'
    small:
      defaultValue: ''
      type: string
      ui:
        label: 'small'
        reloadIfChanged: TRUE
        inspector:
          group: 'structure'
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              '':
                label: 'Empty'
              'small-1':
                label: 'small-1'
              'small-2':
                label: 'small-2'
              'small-3':
                label: 'small-3'
              'small-4':
                label: 'small-4'
              'small-5':
                label: 'small-5'
              'small-6':
                label: 'small-6'
              'small-7':
                label: 'small-7'
              'small-8':
                label: 'small-8'
              'small-9':
                label: 'small-9'
              'small-10':
                label: 'small-10'
              'small-11':
                label: 'small-11'    
    largeOffset:
      defaultValue: ''
      type: string
      ui:
        label: 'large-offset'
        reloadIfChanged: TRUE
        inspector:
          group: 'structure'
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              '':
                label: 'Empty'
              'large-offset-1':
                label: 'large-offset-1'
              'large-offset-2':
                label: 'large-offset-2'
              'large-offset-3':
                label: 'large-offset-3'
              'large-offset-4':
                label: 'large-offset-4'
              'large-offset-5':
                label: 'large-offset-5'
              'large-offset-6':
                label: 'large-offset-6'
              'large-offset-7':
                label: 'large-offset-7'
              'large-offset-8':
                label: 'large-offset-8'
              'large-offset-9':
                label: 'large-offset-9'
              'large-offset-10':
                label: 'large-offset-10'
              'large-offset-11':
                label: 'large-offset-11'
    mediumOffset:
      defaultValue: ''
      type: string
      ui:
        label: 'medium-offset'
        reloadIfChanged: TRUE
        inspector:
          group: 'structure'
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              '':
                label: 'Empty'
              'medium-offset-1':
                label: 'medium-offset-1'
              'medium-offset-2':
                label: 'medium-offset-2'
              'medium-offset-3':
                label: 'medium-offset-3'
              'medium-offset-4':
                label: 'medium-offset-4'
              'medium-offset-5':
                label: 'medium-offset-5'
              'medium-offset-6':
                label: 'medium-offset-6'
              'medium-offset-7':
                label: 'medium-offset-7'
              'medium-offset-8':
                label: 'medium-offset-8'
              'medium-offset-9':
                label: 'medium-offset-9'
              'medium-offset-10':
                label: 'medium-offset-10'
              'medium-offset-11':
                label: 'medium-offset-11'
    smallOffset:
      defaultValue: ''
      type: string
      ui:
        label: 'small-offset'
        reloadIfChanged: TRUE
        inspector:
          group: 'structure'
          editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
          editorOptions:
            values:
              '':
                label: 'Empty'
              'small-offset-1':
                label: 'small-offset-1'
              'small-offset-2':
                label: 'small-offset-2'
              'small-offset-3':
                label: 'small-offset-3'
              'small-offset-4':
                label: 'small-offset-4'
              'small-offset-5':
                label: 'small-offset-5'
              'small-offset-6':
                label: 'small-offset-6'
              'small-offset-7':
                label: 'small-offset-7'
              'small-offset-8':
                label: 'small-offset-8'
              'small-offset-9':
                label: 'small-offset-9'
              'small-offset-10':
                label: 'small-offset-10'
              'small-offset-11':
                label: 'small-offset-11'

Row.html

{namespace ts=TYPO3\TypoScript\ViewHelpers}
<div{attributes -> f:format.raw()}>
	<ts:render path="columns" />
</div>