lbr-media/typo3-extension-bootstrap

Typo3 template extension with Twitter Bootstrap 5 package.

Maintainers

Details

github.com/lbr-media/typo3-extension-bootstrap

Homepage

Source

Issues

Installs: 50

Dependents: 1

Suggesters: 0

Security: 0

Stars: 1

Watchers: 1

Forks: 0

Open Issues: 7

Type:typo3-cms-extension

12.0.0 2022-10-10 03:24 UTC

Requires

Requires (Dev)

Suggests

GPL-2.0-or-later e1cfffa7df7984a0c83998446b770f3e9d632adf

  • Marcel <mb.woop@lbrmedia.de>

This package is auto-updated.

Last update: 2024-04-07 15:35:35 UTC

README

Typo3 template extension with Twitter Bootstrap 5 package.

Provides page templates and many content elements modified or build for Bootstrap 5.
The basis of the content elements is fluid_styled_content (many are copied from this extension).

Table of contents

Install

There is a basic package at https://github.com/lbr-media/typo3-bootstrap-base which also loads a distribution extension. Maybe use it to get an example page with content or follow these steps to get a fresh and empty installation:

1. Install typo3 as usual with composer.

Use composer create-project "typo3/cms-base-distribution:^11.5" my-new-project or check the composer helper at https://get.typo3.org/misc/composer/helper.

After the backend is running you maybe have to setup the sites configuration.

2. Install this package.

composer require lbr-media/typo3-extension-bootstrap

3. Run the command to copy some assets to fileadmin.

php vendor/bin/typo3 bootstrap:updatefileadmin

4. Clear the cache

Clear the cache in Install-Tool or with php vendor/bin/typo3 cache:flush.

5. Go to the backend, create a new template and include static files from extension

Include the following static templates:

  • General (bootstrap)
  • Content elements (bootstrap)
  • Additional Styles (bootstrap)

Remove the default TypoScript config in setup field.

Now you should be able to call the frontend of the page.

Content elements

All content elements

All content elements have extra or modified fields.

Fields

  • Frame class (select)
    Here you'll find the Bootstrap container* classes like container-xl or container-float.
  • Inner frame class (select)
    Like the frame class but will create an inner div around the content when a value is selected.
    Example:
TCEFORM.tt_content.tx_bootstrap_inner_frame_class.addItems {
    my-inner-frame-class = My Label
}
  • Additional styles (select multiple)
    Many styles are selectable for one content element.
    Use this to configure modifications like indents, etc.
    In TypoScript several styles can be configured.
    You'll find them with the key plugin.tx_bootstrap.settings.form.element.AdditionalStyles.
    Each variant has these properties:
    • label (string; required)
    • value (int; required; used for reference)
    • outerWrap (string)
    • innerWrap (string)
    • additionalClass (string)
    • additionalAttributes (array; key value pairs)
    • additionalOuterClass (string)
    • additionalOuterAttributes (array; key value pairs)

Example:

plugin.tx_bootstrap.settings.form.element.AdditionalStyles {
    10 {
        label = Indent left
        value = 10
        innerWrap = <div class="indent-left-inner">|</div>
        additionalClass = indent-left
        additionalAttributes {
            data-render = indent-left
        }
    }
}
  • Color (select; one of the text-{color} classes)
  • Background color (select; one of the bg-{color} classes)
  • Space before (select; one of the space_before_class')
  • Space after (select; one of the space_after_class')

The defaults of space_before_class and space_after_class will be replaced with Bootstrap space classes. So you don't need extra classes for the space between content elements.

Adjust to your needs:

plugin.tx_bootstrap.settings.form.element {
    SpaceBeforeClassReplacements {
        extra-small = mt-3
        small = mt-4
        medium = mt-5
        large = mt-6
        extra-large = mt-7
    }

    SpaceAfterClassReplacements {
        extra-small = mb-3
        small = mb-4
        medium = mb-5
        large = mb-6
        extra-large = mb-7
    }
}

All headers

All headers of all content elements have extra or modified fields.

Fields

  • Header (multiline string)
  • Header layout aka Type (select)
    The tag that will be generated (h1 to h5).
  • Layout (select)
    The basic css-class that will be used for the tag. The default Bootstrap classes from display-1 to display-6, h1 to h6 and lead.
  • Variant or Predefined header (select)
    Only one variant is selectable for one headline. Use this to produce some variants of headers.
    In TypoScript several variants can be configured.
    You'll find them with the key plugin.tx_bootstrap.settings.form.element.PredefinedHeader.
    Each variant has these properties:
    • label (string; required)
    • value (int; required; used for reference)
    • outerWrap (string)
    • innerWrap (string)
    • additionalClass (string)

Example:

plugin.tx_bootstrap.settings.form.element.PredefinedHeader {
    10 {
        label = My fancy headline
        value = 10
        outerWrap = <div class="h-fancy border bg-dark text-light rounded">|</div>
        innerWrap = <span class="h-fancy-inner">|</span>
        additionalClass = mb-0
    }
}
  • Color (select; one of the text-{color} classes)
  • Position (select; either start, center or end)
  • Date (Date)
  • Additional styles (select multiple)
    Many styles are selectable for one headline. Use this to configure modifications like uppercase, no space below, etc. In TypoScript several styles can be configured.
    You'll find them with the key plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles.
    Each variant has these properties:
    • label (string; required)
    • value (int; required; used for reference)
    • outerWrap (string)
    • innerWrap (string)
    • additionalClass (string)

Example:

plugin.tx_bootstrap.settings.form.element.AdditionalHeaderStyles {
    10 {
        label = VERSAL
        value = 10
        additionalClass = text-uppercase
    }
    20 {
        label = italic
        value = 20
        innerWrap = <em>|</em>
    }
    30 {
        label = -line-through-
        value = 30
        innerWrap = <del>|</del>
    }
}
  • Link (TypoLink)
  • Subheader (string)
  • File icon
    • Icon (File reference)
    • Size (select; the bootstrap font sizes or just inherit)
    • Alignment (select; each device from xs to xxl; top, top-left, top-center, top-right, left, left-top, left-middle, left-bottom, etc.)
  • Icon-Set
    • Set (select; required; at this time only bootstrap icons)
    • Name (string; readonly with visible selected icon)
    • Alignment (select; each device from xs to xxl; top, top-left, top-center, top-right, left, left-top, left-middle, left-bottom, etc.)
    • Size (select; the bootstrap font sizes or just inherit)
    • Color (select; one of the text-{color} classes)

TypoScript constants

Key Default Desription
header_pattern ###TAG_START######HEADER######TAG_END### Header pattern
header_subheader_pattern ###TAG_START######HEADER###<small class="d-block">###SUBHEADER###</small>###TAG_END### Header subheader pattern
header_date_pattern <span class="d-block" datetime="###DATE_DATETIME###">###DATE###</span>###TAG_START######HEADER######TAG_END### Header date pattern
header_subheader_date_pattern <span class="d-block" datetime="###DATE_DATETIME###">###DATE###</span>###TAG_START######HEADER###<small class="d-block">###SUBHEADER###</small>###TAG_END### Header subheader date pattern
header_date_datetype FULL Header date format
See: https://www.php.net/manual/de/class.intldateformatter.php
header_date_timetype NONE Header time format
header_icon_wrap outside Header icon wrap.
Should the icons be 'outside' the h-tag or 'inside'?

Accordion

Bootstrap styled Accordion component.
CType: bootstrap_accordion

One accordion content element has one or many accordion items.
Each accordion item may have one or many Text & media (grid) content elements.

Settings for all items:

  • Keep items open on opening other items (boolean)

Settings each item:

  • Opened on load (boolean)

Carousel

Bootstrap styled Carousel component with images.
CType: bootstrap_carousel

Settings:

  • Animation (select; either slide or fade)
  • Autoplay (boolean)
  • Color scheme (select; either light, dark)
  • Show controls (boolean)
  • Show indicators (boolean)
  • Interval (int; required; milliseconds)

Image properties:

  • Header (string)
  • Title (string)
  • Alternative (string)
  • Description (multiline string)
  • Link (TypoLink)
  • Link text (string)
  • Crop (each device from xs to xxl)

Cards

Bootstrap styled Cards component in a grid system.
CType: bootstrap_cards

Settings

  • Presets (select multiple)
    In TypoScript tt_content.bootstrap_cards.flexform_presets one or more settings could be grouped and labeled for selection.
  • Grid:
    • Cols (select; each device from xs to xxl; col* classes)
    • Gutter space x (select; each device from xs to xxl; g-* classes)
    • Gutter space y (select; each device from xs to xxl; g-* classes)
    • Align x (select; each device from xs to xxl; alignment classes)
    • Align y (select; each device from xs to xxl; alignment classes)
  • Cards:
    • Image position (select; one of above, below, start, end)
    • Background color (select; one of the bg-{color} classes)
    • Text color (select; one of the text-{color} classes)
    • Border-Options:
      • Border edge (select; one of the border-{side} classes)
      • Border width (select; one of the border-{size} classes)
      • Border color (select; one of the border-{color} classes)
      • Rounded (select; one of the rounded classes)
      • Shadow (select; one of the shadow classes)
    • Button color/style (select; one of the btn-{color} and btn-outline-{color} classes)
  • Image optimizing (produced percentual window width from xs to xxl)

Card-item properties

  • Header (string)
  • Title (string)
  • Image (File reference)
  • Text (multiline string, RTE)
  • Link (TypoLink)
  • Link text (string)
  • Footer (string)

Media grid

Images and videos in an adjustable grid system. Masonry is also provided.
CType: bootstrap_mediagrid

Settings

  • Presets (select multiple)
    In TypoScript tt_content.bootstrap_mediagrid.flexform_presets one or more settings could be grouped and labeled for selection.
  • Use masonry grid (boolean)
  • Grid:
    • Cols (select; each device from xs to xxl; col* classes)
    • Gutter space x (select; each device from xs to xxl; g-* classes)
    • Gutter space y (select; each device from xs to xxl; g-* classes)
    • Align x (select; each device from xs to xxl; alignment classes)
    • Align y (select; each device from xs to xxl; alignment classes)
  • Border for each media item:
    • Border edge (select; one of the border-{side} classes)
    • Border width (select; one of the border-{size} classes)
    • Border color (select; one of the border-{color} classes)
    • Rounded (select; one of the rounded classes)
    • Shadow (select; one of the shadow classes)
  • Image optimizing (produced percentual window width from xs to xxl)

Tabulator

Bootstrap styled Tabulator component.
CType: bootstrap_tabs

One tabulator content element has one or many tabulator items.
Each tabulator item may have one or many Text & media (grid) content elements.

Settings for all items

  • Layout (select; either default, pills horizontal or pills vertical)
  • Navigation alignment (select; only on horizontal; one of start, center, end, nav fill, nav justified)

Settings each item

  • active (boolean)
    Only one can be active. The first found with active state is used. If no one is active, the first item is marked as active.

Text + Image

A content element to create fast a grid with one image and text. Positions, space and alignment is adjustable.
CType: bootstrap_textimage

Settings

  • Presets (select multiple)
    In TypoScript tt_content.bootstrap_textimage.flexform_presets one or more settings could be grouped and labeled for selection.
  • Order (select; either first image or first text)
  • Image alignment (select; either top or bottom)
  • Text alignment (select; either top or bottom)
  • Header position (select; either above all, above text or above image)
  • Space between text and image (select; each device from xs to xxl; g-* classes)
  • Border for the image:
    • Border edge (select; one of the border-{side} classes)
    • Border width (select; one of the border-{size} classes)
    • Border color (select; one of the border-{color} classes)
    • Rounded (select; one of the rounded classes)
    • Shadow (select; one of the shadow classes)

Text & Media (float)

A text which floats a media grid. Full adjustable grid and floating settings. Some presets are available to the editor.
CType: bootstrap_textmediafloat

Settings

  • Presets (select multiple)
    In TypoScript tt_content.bootstrap_textmediafloat.flexform_presets one or more settings could be grouped and labeled for selection.
  • Header position (above all or above text)
  • Media area:
    • Position (select; each device from xs to xxl; either centered above text, left or right)
    • Width (select; each device from xs to xxl; additional float classes)
    • Space x (select; each device from xs to xxl; space classes)
    • Space y (select; each device from xs to xxl; space classes)
  • Use masonry grid
  • Grid for the media items:
    • Cols (select; each device from xs to xxl; col* classes)
    • Gutter space x (select; each device from xs to xxl; g-* classes)
    • Gutter space y (select; each device from xs to xxl; g-* classes)
    • Align x (select; each device from xs to xxl; alignment classes)
    • Align y (select; each device from xs to xxl; alignment classes)
  • Border for each media item:
    • Border edge (select; one of the border-{side} classes)
    • Border width (select; one of the border-{size} classes)
    • Border color (select; one of the border-{color} classes)
    • Rounded (select; one of the rounded classes)
    • Shadow (select; one of the shadow classes)
  • Image optimizing (produced percentual window width from xs to xxl)

Text & Media (grid)

A text column and a media grid column. The most flexible content element.
CType: bootstrap_textmediagrid

Settings

  • Presets (select multiple)
    In TypoScript tt_content.bootstrap_textmediagrid.flexform_presets one or more settings could be grouped and labeled for selection.
  • Default order of text- and media-area (select; either first image or first text)
  • Order per each device (select; each device from xs to xxl; either first image or first text)
  • Header position (select; either above all, above text or above media area)
  • Grid for the text- and media-columns:
    • Cols text-column (select; each device from xs to xxl; col* classes)
    • Cols media-column (select; each device from xs to xxl; col* classes)
    • Gutter space x (select; each device from xs to xxl; g-* classes)
    • Gutter space y (select; each device from xs to xxl; g-* classes)
    • Align x (select; each device from xs to xxl; alignment classes)
    • Align y (select; each device from xs to xxl; alignment classes)
  • Text-column:
    • Align self (select; each device from xs to xxl; alignment classes)
    • Inner space (select; each device from xs to xxl; space classes)
  • Media-column:
    • Use masonry grid
    • Align self (select; each device from xs to xxl; alignment classes)
    • Inner space (select; each device from xs to xxl; space classes)
  • Grid for the media items:
    • Cols (select; each device from xs to xxl; col* classes)
    • Gutter space x (select; each device from xs to xxl; g-* classes)
    • Gutter space y (select; each device from xs to xxl; g-* classes)
    • Align x (select; each device from xs to xxl; alignment classes)
    • Align y (select; each device from xs to xxl; alignment classes)
  • Border for each media item:
    • Border edge (select; one of the border-{side} classes)
    • Border width (select; one of the border-{size} classes)
    • Border color (select; one of the border-{color} classes)
    • Rounded (select; one of the rounded classes)
    • Shadow (select; one of the shadow classes)
  • Image optimizing (produced percentual window width from xs to xxl)

Two columns text

Create fast two columns text.
CType: bootstrap_twocolumnstext

TypoScript constants

Key Default Desription
ce_bootstrap_twocolumnstext_row_classes row g-0 g-sm-3 g-md-4 CSS-classes GRID-ROW
ce_bootstrap_twocolumnstext_col_classes col-sm-6 CSS-classes GRID-COL

Alert

Bootstrap alert boxes.
CType: bootstrap_alert

Settings

  • Header (string)
  • Text (multiline string, RTE)
  • Alert Color (select; one of the alert-{color} classes)
  • Text Color (select; one of the text-{color} classes)
  • Background color (select; one of the bg-{color} classes)
  • Icon-Set
    • Set (select; required; at this time only bootstrap icons)
    • Name (string; readonly with visible selected icon)
    • Position (select; top, top-left, top-center, top-right, left, left-top, left-middle, left-bottom, etc.)
    • Size (select; the bootstrap font sizes or just inherit)
    • Icon Color (select; one of the text-{color} classes)
  • Border-Options:
    • Border edge (select; one of the border-{side} classes)
    • Border width (select; one of the border-{size} classes)
    • Border color (select; one of the border-{color} classes)
    • Rounded (select; one of the rounded classes)
    • Shadow (select; one of the shadow classes)

Markdown

Just like the regular text content element - but instead using a rich text editor you use Markdown markup. In frontend it will be transformed to HTML.
CType: bootstrap_markdown

Bullets

A list in Bootstrap-style.
CType: bullets

Settings (like Typo3)

  • unordered list
  • ordered list
  • definition list

Div

Just a line.
CType: div

TypoScript Constants

Key Default Desription
ce_div_hr_classes bg-dark opacity-75 my-3 my-md-4 CSS-classes HR-tag

Header

Just a header.
CType: header

Table

Adjustable with all the Bootstrap table classes.
CType: table

Uploads

Realized with Bootstrap card component.
The default Typo3-fields are available.
CType: uploads

TypoScript Constants

Key Default Desription
ce_uploads_row_classes list-unstyled row g-3 row-cols-1 row-cols-sm-2 row-cols-lg-3 align-items-stretch CSS-classes GRID-ROW
ce_uploads_col_classes col CSS-classes GRID-COL
ce_uploads_card_classes card h-100 CSS-classes CARD

Copied fluid_styled_content content elements

  • HTML
    CType: html
  • List/Plugin
    CType: list
  • Menu*
    CTypes:
    • menu_abstract
    • menu_categorized_content
    • menu_categorized_pages
    • menu_pages
    • menu_recently_updated
    • menu_related_pages
    • menu_section
    • menu_section_pages
    • menu_sitemap
    • menu_sitemap_pages
    • menu_subpages
  • Shortcut
    CType: shortcut
  • Text
    CType: text

Navigation

TypoScript Constants

PID

Key Default Desription
nav_dropdown_excludeUidList Page-UIDs to exclude (excludeUidList)

Regular nav

Key Default Desription
nav_ul_classes list-unstyled CSS-classes UL
nav_li_classes nav-item CSS-classes LI
nav_link_spacer_classes nav-link spacer CSS-classes LINK: Spacer
nav_link_current_classes nav-link active CSS-classes LINK: Current
nav_link_active_classes nav-link active CSS-classes LINK: Active
nav_link_inactive_classes nav-link inactive CSS-classes LINK: Inactive

Dropdown main

Key Default Desription
nav_dropdown_ul_classes navbar-nav me-auto mb-2 mb-lg-0 w-100 justify-content-end CSS-classes UL in level 0
nav_dropdown_ul_target_classes dropdown-menu dropdown-menu-dark dropdown-menu-end CSS-classes UL target in level 1 containing the children
nav_dropdown_li_dropdown_classes nav-item CSS-classes LI regular (which has no children and it is not in a dropdown)
nav_dropdown_li_dropdown_toggle_classes nav-item dropdown CSS-classes LI toggle (which has children)
nav_dropdown_li_dropdown_target_classes CSS-classes LI target (which is a child in dropdown)

Dropdown link regular

Key Default Desription
nav_dropdown_spacer_classes nav-link text-nowrap CSS-classes LINK REGULAR: Spacer
nav_dropdown_current_classes nav-link text-nowrap active CSS-classes LINK REGULAR: Current
nav_dropdown_active_classes nav-link text-nowrap active CSS-classes LINK REGULAR: Active
nav_dropdown_inactive_classes nav-link text-nowrap CSS-classes LINK REGULAR: Inactive

Dropdown toggle link/button

Key Default Desription
nav_dropdown_toggle_spacer_classes nav-link text-nowrap dropdown-toggle CSS-classes LINK TOGGLE: Spacer in level 0 with children
nav_dropdown_toggle_current_classes nav-link text-nowrap active dropdown-toggle CSS-classes LINK TOGGLE: Current in level 0 with children
nav_dropdown_toggle_active_classes nav-link text-nowrap active dropdown-toggle CSS-classes LINK TOGGLE: Active in level 0 with children
nav_dropdown_toggle_inactive_classes nav-link text-nowrap dropdown-toggle CSS-classes LINK TOGGLE: Inactive in level 0 with children

Dropdown link in dropdown

Key Default Desription
nav_dropdown_child_spacer_classes dropdown-divider CSS-classes LINK CHILD: Spacer in level 1 in dropdown
nav_dropdown_child_current_classes dropdown-item text-nowrap active CSS-classes LINK CHILD: Current in level 1 in dropdown
nav_dropdown_child_active_classes dropdown-item text-nowrap active CSS-classes LINK CHILD: Active in level 1 in dropdown
nav_dropdown_child_inactive_classes dropdown-item text-nowrap CSS-classes LINK CHILD: Inactive in level 1 in dropdown

Credits

Many thanks to the people of:

The world would be a sadder place without them.