Ispiring people to share designs

1. TYPO3 Themes - Ispiring people to share design
TYPO3 Themes
Ispiring People to share designs
Cristian Buja

2. TYPO3 Themes - Ispiring people to share design

3. TYPO3 Themes - Ispiring people to share design
Themes
2013

4. 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

5. TYPO3 Themes - Ispiring people to share design
Ereditarietà di “Theme Bootstrap”
Themes
Static Info Tables
Themes Gridelements
Gridelements
Themes Bootstrap
Dyncss less
Dyncss

6. 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

7. TYPO3 Themes - Ispiring people to share design
Templates “themes”
page = PAGE
page {
typeNum = 0
100 = USER
100 {
userFunc = TYPO3CMSExtbaseCoreBootstrap->run
...
settings =< plugin.tx_themes.settings
persistence =< plugin.tx_themes.persistence
view =< plugin.tx_themes.view
}
}

8. TYPO3 Themes - Ispiring people to share design
Variabili “themes” in css_styled_content (TYPO3 6.2)
KayStrobachThemesFrontendCssClassMapper->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

9. 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 = KayStrobachThemesFrontendCssClassMapper->mapGenericToFramework
postUserFunc {
responsiveMapping =< lib.content.cssMap.responsive
behaviourMapping =< lib.content.cssMap.behaviour
variantMapping =< lib.content.cssMap.variants
}
}

10. TYPO3 Themes - Ispiring people to share design
Variabili “themes” in fluid_styled_content (TYPO3 7.6)
KayStrobachThemesDataProcessingThemesVariantsDataProcessor
KayStrobachThemesDataProcessingThemesBehaviourDataProcessor
KayStrobachThemesDataProcessingThemesResponsiveDataProcessor
KayStrobachThemesDataProcessingThemesResponsiveColumnDataProcessor
KayStrobachThemesDataProcessingThemesIconDataProcessor

11. 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 = KayStrobachThemesDataProcessingThemesVariantsDataProcessor
40 = KayStrobachThemesDataProcessingThemesBehaviourDataProcessor
50 = KayStrobachThemesDataProcessingThemesResponsiveDataProcessor
60 = KayStrobachThemesDataProcessingThemesIconDataProcessor
}

12. 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.

13. 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
…
}

14. 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 {
…
}

15. TYPO3 Themes - Ispiring people to share design
Variabili “themes” e il backend

16. TYPO3 Themes - Ispiring people to share design
Themes Gridelements
Configurazione “backend layout”
Configurazione “gridelements”

17. 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

18. TYPO3 Themes - Ispiring people to share design
Contenuti di “themes_gridelements”
11 tipi di contenuti
contenitore
○ 2 colonne
○ 3 colonne
○ 4 colonne
○ ...
○ tabs

19. TYPO3 Themes - Ispiring people to share design

20. TYPO3 Themes - Ispiring people to share design
Theme Bootstrap
Implementazione dei templates di pagina e di contenuto

21. TYPO3 Themes - Ispiring people to share design
Variabili “themes” e il backend

22. TYPO3 Themes - Ispiring people to share design
Tema derivato “theme_bootstrap_t3conitalia”

23. TYPO3 Themes - Ispiring people to share design
“theme_bootstrap_t3conitalia”

24. TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”
Extension builder per i temi ?

25. TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”

26. TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”

27. TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”

28. TYPO3 Themes - Ispiring people to share design
Fluid Templates Manager “ftm”
http://bitbucket.org/interadev/theme_bootstrap_t3conitalia

29. TYPO3 Themes - Ispiring people to share design
Grazie !