bsdist TYPO3 distribution - Bootstrap Kickstart Package

Bootstrap features

The extension bsdist adds bootstrap-related features to content elements and modifies the rendering of specific content types (text/images, menus, table...).

Constants

A few constants are used to define the paths and urls to assets and for main website settings.

  • paths to the directories with the libraries and the website theme files
  • urls (or paths if changed to local files) to bootstrap, jquery and other resources
  • default language settings

The default configuration of ext:bsdist overwrites some of these settings, e.g. to load assets locally.

All constants defined by bsdist. The paths for the baseDir and the libDir match the directory structure of the bsdist distribution assets.


plugin.tx_bsdist {
    theme {
        baseDir = fileadmin/bsdist/theme

        bootstrapCssFile = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
        bootstrapJsFile = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
        jQueryJsFile = https://code.jquery.com/jquery-3.2.1.min.js

        lightboxCssFile = fileadmin/bsdist/theme/css/featherlight/featherlight.css
        lightboxJsFile = fileadmin/bsdist/theme/js/lib/featherlight/featherlight.js

        contentCssFile = typo3conf/ext/bsdist/Resources/Public/Css/content.css
        iconDir = typo3conf/ext/bsdist/Resources/Public/Icons/fileicons/
    }
    website {
        lang {
            locale = en_EN.UTF-8
            localeShort = en
        }
    }
}
  

Config object

Config object properties set by the extension bootstrap_core.


config {
    doctype = html5
    disablePrefixComment = 1
    removeDefaultJS = external
    inlineStyle2TempFile = 1
    absRefPrefix = /
    prefixLocalAnchors = all
    extTarget =
    noScaleUp = 1
    spamProtectEmailAddresses = ascii
    sys_language_uid = 0
    language = {$plugin.tx_bsdist.website.lang.localeShort}
    locale_all = {$plugin.tx_bsdist.website.lang.locale}
    htmlTag_langKey < config.language
    tx_realurl_enable = 1
    admPanel = 0
}
  

Basic page setup

A basic page setup based on FLUIDTEMPLATE, ready for additional page templates, is defined in the bootstrap_core extension. The paths to the html templates match the directory structure of the bsdist extension file package which was copied to fileadmin/bsdist during the installation.


page = PAGE
page {
    typeNum = 0
    10 = FLUIDTEMPLATE
    10 {
        templateRootPaths.10 = {$plugin.tx_bsdist.theme.baseDir}/tmpl/backend_layout
        layoutRootPaths.10 = {$plugin.tx_bsdist.theme.baseDir}/tmpl/backend_layout/Layouts
        partialRootPaths.10 = {$plugin.tx_bsdist.theme.baseDir}/tmpl/backend_layout/Partials

        file.cObject = CASE
        file.cObject {
            key.data = levelfield:-1, backend_layout_next_level, slide
            key.override.field = backend_layout
            default = TEXT
            default.value = {$plugin.tx_bsdist.theme.baseDir}/tmpl/backend_layout/tmpl_default.html
        }
        variables {
            content < styles.content.get
        }
    }
}
  

jQuery and bootstrap

The main assets for bootstrap, jQuery and the lightbox library prettyPhoto are set. The paths or urls are defined as constants (see above).


page {
  #...

  includeCSS {
    bootstrap = {$plugin.tx_bsdist.theme.bootstrapCssFile}
    lightbox = {$plugin.tx_bsdist.theme.lightboxCssFile}
  }
  includeJSLibs {
    jquery = {$plugin.tx_bsdist.theme.jQueryJsFile}
  }
  includeJSFooterlibs {
    bootstrap = {$plugin.tx_bsdist.theme.bootstrapJsFile}
    lightbox = {$plugin.tx_bsdist.theme.lightboxJsFile}
  }
}
  

Image features and rendering

The layout field of image and text/image content elements is modified to show default bootstrap image layout options.

Frames (wrapper)

The frame options are extended with bootstrap-specific default container layouts. The rendering of some of the predefined TYPO3 section frames is modified.

Visibility field

An additional field is added to content elements which allows to define the visibility of the content element based on default bootstrap breakpoints. Based on the selection additional classes are added to the outer div element to hide/show the element on certain device sizes.

Table options and rendering

The flexform for the table content element is replaced to support a few predefined bootstrap supported table layout options. The rendering of tables is modified to wrap the table with

 

<div class="table-responsive">|</div>.

 

Form rendering

The rendering of new forms in TYPO3 8.7 is compatible to bootstrap (css classes).

Menu options and rendering

The menu layout options are changed to provide bootstrap-style navigation layouts (nav pills and co.).