TYPO3 Themes - Ispiring people to share design

TYPO3 ThemesIspiring People to share designs

Cristian Buja

TYPO3 Themes - Ispiring people to share design

TYPO3 Themes - Ispiring people to share design

Themes

2013

TYPO3 Themes - Ispiring people to share design

Dipendenze di “Theme Bootstrap” (required extensions)

Themes Bootstrap

Themes Gridelements

Gridelements

Themes

Static Info Tables

Dyncss less

Dyncss

TYPO3 Themes - Ispiring people to share design

Ereditarietà di “Theme Bootstrap”

Themes

Static Info Tables

Themes Gridelements

Gridelements

Themes Bootstrap

Dyncss less

Dyncss

TYPO3 Themes - Ispiring people to share design

Themes

Creare l’oggetto PAGE

Configurazione TypoScript automatica delle lingue

Inclusione automatica di TSConfig, TypoScript

Campi aggiuntivi (icone, behaviour, responsive, variants)

Costanti TypoScript editabili dal modulo backend anche per non Admin

TYPO3 Themes - Ispiring people to share design

Templates “themes”

page = PAGE

page {

typeNum = 0

100 = USER

100 {

userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run

...

settings =< plugin.tx_themes.settings

persistence =< plugin.tx_themes.persistence

view =< plugin.tx_themes.view

}

}

TYPO3 Themes - Ispiring people to share design

Variabili “themes” in css_styled_content (TYPO3 6.2)

KayStrobach\Themes\Frontend\CssClassMapper->mapGenericToFramework

responsiveMapping =< lib.content.cssMap.responsive

responsiveRowMapping =< lib.content.cssMap.responsive.row

responsiveColumnMapping =< lib.content.cssMap.responsive.column

behaviourMapping =< lib.content.cssMap.behaviour

specialBehaviourMapping =< lib.content.cssMap.behaviour.<element>

variantMapping =< lib.content.cssMap.variants

iconMapping =< lib.icons.cssMap

TYPO3 Themes - Ispiring people to share design

Variabili “themes” in css_styled_content (TYPO3 6.2)

ES: tt_content.stdWrap.innerWrap.cObject.default.20 (COA)

40 = TEXT

40 {

dataWrap =

{field:tx_themes_responsive},{field:tx_themes_behaviour},{field:tx_themes_variants}

postUserFunc = KayStrobach\Themes\Frontend\CssClassMapper->mapGenericToFramework

postUserFunc {

responsiveMapping =< lib.content.cssMap.responsive

behaviourMapping =< lib.content.cssMap.behaviour

variantMapping =< lib.content.cssMap.variants

}

}

TYPO3 Themes - Ispiring people to share design

Variabili “themes” in fluid_styled_content (TYPO3 7.6)

KayStrobach\Themes\DataProcessing\ThemesVariantsDataProcessor

KayStrobach\Themes\DataProcessing\ThemesBehaviourDataProcessor

KayStrobach\Themes\DataProcessing\ThemesResponsiveDataProcessor

KayStrobach\Themes\DataProcessing\ThemesResponsiveColumnDataProcessor

KayStrobach\Themes\DataProcessing\ThemesIconDataProcessor

TYPO3 Themes - Ispiring people to share design

Variabili “themes” in fluid_styled_content (TYPO3 7.6)

ES: tt_content.stdWrap.innerWrap.<element> (FLUIDTEMPLATE)

dataProcessing {

30 = KayStrobach\Themes\DataProcessing\ThemesVariantsDataProcessor

40 = KayStrobach\Themes\DataProcessing\ThemesBehaviourDataProcessor

50 = KayStrobach\Themes\DataProcessing\ThemesResponsiveDataProcessor

60 = KayStrobach\Themes\DataProcessing\ThemesIconDataProcessor

}

TYPO3 Themes - Ispiring people to share design

Variabili “themes” in fluid_styled_content (TYPO3 7.6)

Fluid styled content non è ancora completamente

supportata, occorre quindi implementare i

layouts,templates e partials.

TYPO3 Themes - Ispiring people to share design

Variabili “themes” e il mapping CSS

lib.content.cssMap.responsive {

...

medium-default =

medium-hidden = hidden-

md

...

}

…

lib.icons.cssMap {

…

alert = glyphicon glyphicon-

alert

…

}

TYPO3 Themes - Ispiring people to share design

Variabili “themes” e il backend

themes.content.responsive.default {

...

medium.visibility {

default = LLL:EXT:theme_bootstrap/...

hidden = LLL:EXT:theme_bootstrap/…

}

...

}

TCEFORM.tt_content.tx_themes_icon.addItems {

…

}

TYPO3 Themes - Ispiring people to share design

Variabili “themes” e il backend

TYPO3 Themes - Ispiring people to share design

Themes Gridelements

Configurazione “backend layout”

Configurazione “gridelements”

TYPO3 Themes - Ispiring people to share design

Layout di pagina “themes_gridelements”

14 layouts con 4 aree di contenuto

content

colPos = 0

menu

colPos = 1

sidebar

colPos = 2

feature

colPos = 3

TYPO3 Themes - Ispiring people to share design

Contenuti di “themes_gridelements”

11 tipi di contenuti

contenitore

○ 2 colonne

○ 3 colonne

○ 4 colonne

○ ...

○ tabs

○ accordion

TYPO3 Themes - Ispiring people to share design

TYPO3 Themes - Ispiring people to share design

Theme Bootstrap

Implementazione dei templates di pagina e di contenuto

TYPO3 Themes - Ispiring people to share design

Variabili “themes” e il backend

TYPO3 Themes - Ispiring people to share design

Tema derivato “theme_bootstrap_t3conitalia”

TYPO3 Themes - Ispiring people to share design

“theme_bootstrap_t3conitalia”

TYPO3 Themes - Ispiring people to share design

Fluid Templates Manager “ftm”

Extension builder per i temi ?

TYPO3 Themes - Ispiring people to share design

Fluid Templates Manager “ftm”

TYPO3 Themes - Ispiring people to share design

Fluid Templates Manager “ftm”

TYPO3 Themes - Ispiring people to share design

Fluid Templates Manager “ftm”

TYPO3 Themes - Ispiring people to share design

Fluid Templates Manager “ftm”

http://bitbucket.org/interadev/theme_bootstrap_t3conitalia

TYPO3 Themes - Ispiring people to share design

Grazie !