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: 53

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-12-07 17:06:16 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

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

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

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

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

Regular nav

Dropdown main

Dropdown link regular

Dropdown toggle link/button

Dropdown link in dropdown

Credits

Many thanks to the people of:

The world would be a sadder place without them.