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 !