Bootstrap Package delivers a full configured theme for TYPO3, based on the Bootstrap CSS Framework.
MIT License
Bot releases are hidden (Show)
Published by benjaminkott almost 2 years ago
Published by benjaminkott almost 2 years ago
images
(#1046)Published by benjaminkott almost 3 years ago
Published by benjaminkott about 3 years ago
Published by benjaminkott about 3 years ago
images
(#1046)Published by benjaminkott about 3 years ago
Published by benjaminkott about 3 years ago
@extend .form-control, .is-invalid
instead. https://sass-lang.com/documentation/breaking-changes/extend-compound (#1023) (#1025)@extend .form-control, .is-invalid
instead. https://sass-lang.com/documentation/breaking-changes/extend-compound (#1023)Published by benjaminkott over 3 years ago
Published by benjaminkott over 3 years ago
Published by benjaminkott over 3 years ago
Published by benjaminkott over 3 years ago
Published by benjaminkott over 3 years ago
Published by benjaminkott over 3 years ago
Published by benjaminkott almost 5 years ago
Published by benjaminkott almost 5 years ago
Published by benjaminkott about 5 years ago
Published by benjaminkott about 5 years ago
Published by benjaminkott over 5 years ago
This is the first release to support TYPO3 10.x and will extend its support until the upcoming TYPO3 LTS version in April 2020. That also means we are dropping support for TYPO3 8.7 and older for upcoming releases.
Bootstrap 3 support and the Less Parser will be dropped with the next major version (12.x).
Please plan your upgrades to Bootstrap 4 and SCSS.
Supported TYPO3 Versions for the 11.x Release-cycle of the Bootstrap Package:
Logos in the Bootstrap Package were traditionally handled as plain src strings that were passed into the fluid image view helper.
Example:
<img class="navbar-brand-logo-normal" src="{f:uri.image(src: settings.logo.file)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
This had several drawbacks since we are lacking the full capabilities of a file object. For this, a new processor was introduced to convert static strings into file objects. These objects are now used for the logos displayed in the header.
Processing Configuration:
page {
10 {
dataProcessing {
1553883874 = BK2K\BootstrapPackage\DataProcessing\StaticFilesProcessor
1553883874 {
files {
normal = {$page.logo.file}
inverted = {$page.logo.fileInverted}
}
as = logo
}
}
}
}
New Usage:
<img class="navbar-brand-logo-normal" src="{f:uri.image(image: logo.normal)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
If you have customized the usages of the navbar, for example, you need to adapt your template to make use of the new file objects logo.normal
and logo.inverted
. The setting settings.logo.file
and settings.logo.fileInverted
is not set anymore and will throw an exception if still passed to the image uri view helper.
Replace the following:
<f:if condition="{settings.logo.file}">
> <f:if condition="{logo.normal}">
<f:if condition="{settings.logo.fileInverted}">
> <f:if condition="{logo.inverted}">
{f:uri.image(src: settings.logo.file)}
> {f:uri.image(image: logo.normal)}
{f:uri.image(src: settings.logo.fileInverted)}
> {f:uri.image(image: logo.inverted)}
By popular request, we are now adding high-resolution options to the existing responsive image rendering. The Bootstrap Package does not activate them by default, but it can be added relatively easily by configuration.
Example configuration to enable high-resolution support for the default variant for devices with a minimum device pixel ration from 1.5 and 2.
lib.contentElement.settings.responsiveimages.variants {
default {
sizes {
1\.5x {
multiplier = 1.5
}
2x {
multiplier = 2
}
}
}
}
The data for image rendering is now extended with a sub-set for high-resolution variants. If you did not overwrite the default templates, it will just work as soon as you add the configuration. If you have overwritten the default templates, it will still work as before but you need to add the new support for high-resolution images yourself.
Please check the new updated templates and adjust your code if you want this support.
There is now a new key called sizes in every variant that should be rendered. This data-set consists of several entries each with a default key for a normal rendering (1x). This key will be added automatically and is always available. It is not possible to store sizes smaller than 1. Each size contains a multiplier, which is calculated with the base size.
Example:
Base: 1000px
Minimum Device Pixel Ratio = 1.5
Multiplier = 1.25
Result: 1250px
Minimum Device Pixel Ratio = 2
Multiplier = 1.5
Result: 1500px
See: https://github.com/benjaminkott/bootstrap_package/pull/678
You are now able to also set the time of an event in the timeline 😂. This is enabled by default.
If you do not want to show the time as before you can simply change the date format back to the original configuration.
plugin.bootstrap_package_contentelements {
timeline.date.format = %B %e, %Y
}
The timeline also got more easy to customize, we added some new options. You will figure out ;)
$timeline-item-spacing: 1.5rem !default;
$timeline-item-padding: 1.5rem !default;
$timeline-item-border: 1px solid currentColor !default;
$timeline-item-border-radius: 0 !default;
$timeline-item-shadow: 0 1px 0 0 rgba(0, 0, 0, .15) !default;
$timeline-item-headline-color: $primary !default;
$timeline-item-headline-size: 1.5rem !default;
$timeline-item-date-size: .8rem !default;
$timeline-item-color: $body-color !default;
$timeline-item-bg: #ffffff !default;
$timeline-item-caption-bg: #f2f2f2 !default;
$timeline-icon-color: $body-color !default;
$timeline-icon-bg: #ffffff !default;
$timeline-icon-size: 46px !default;
$timeline-icon-space: 10px !default;
$timeline-icon-border: 3px solid currentColor !default;
$timeline-icon-border-radius: 50% !default;
$timeline-icon-border-opacity: .25 !default;
$timeline-marker-size: 16px !default;
$timeline-marker-bg: $timeline-icon-bg !default;
$timeline-marker-border: $timeline-icon-border !default;
$timeline-marker-border-radius: $timeline-icon-border-radius !default;
$timeline-marker-border-opacity: $timeline-icon-border-opacity !default;
$timeline-path-border: 2px dashed currentColor !default;
$timeline-path-opacity: .25 !default;
Example:
plugin.bootstrap_package.settings.scss {
timeline-item-headline-size = 2rem
timeline-item-date-size = 1rem
timeline-item-border = 2px solid currentColor
timeline-item-border-radius = 50% 2%/2% 50%
timeline-icon-color = #ffffff;
timeline-icon-bg = $primary
timeline-icon-border-radius = 50% 40%/40% 50%
timeline-icon-border-opacity = 1
timeline-marker-bg = #fafafa
}
OK, that one needs explanation. To deliver the best results possible, the bootstrap package has a strict type checking before passing assets to the correct renderings. Even if your system was capable of rendering images from PDFs it was not allowed by default through those type checkings, since a PDF is in the mimetype group application. That means we were not able to simply allow these application group since that would also mean that the system would try to generate a image from a zip file, like in fluid styled content.
Examples:
<img src="/fileadmin/my.pdf" />
<img src="/fileadmin/my.zip" />
Since there is still a huge demand for PDF previews, we made the decision to extend the current typechecks. TYPO3 allows you to configure imagefile_ext
and mediafile_ext
in its configuration. We are now also allowing the processing of files with extensions configured in the according lists.
See: https://github.com/benjaminkott/bootstrap_package/commit/77549d30922bb980db4e4b62ce30749cfe60f40e
The element had more potential than it was made use of, so it got a spec upgrade and is now much more versatile and useful and reduces the necessity for custom adjustments. You can now add links, add more text through the RTE, select the number of columns and choose the icon position.
Examples:
https://typo3.com/about-typo3/why-typo3-cms#c6282
The Inline SVG-Viewhelper now also can add a css class to the svg tag. Yupp - thats it.
<bk2k:inlineSvg
class="my-css-class"
image="{item.icon}"
width="32"
height="32" />
<svg class="my-css-class" height="32" width="32">...</svg>
The Bootstrap Package also cared about meta-data in the past, since we have dropped 8.7 support and TYPO3 now ships its own implementation we added a requirement to the new SEO extension.
Published by benjaminkott over 5 years ago
Published by benjaminkott over 5 years ago
This release contains aside from bugfixes also some library updates. In addition, we decided to make some features available in this branch since they were more or less missing in the previous versions and are non-breaking.
Read more below.
The following libraries have been updated:
The Social-Icons now also include RSS
and VK (Vkontake)
, you can now find them in the TypoScript constants and you can set the URLs to your profiles. Enjoy.
It is now possible to make content columns slide without touching the templates. The typoscript lib for content selection now accepts a slide parameter, that can be used to define the data collection behavior.
Allowed Values:
-1 = back up to the site root
0 = default, no slide
1 = only the current level
2 = up from one level back
TypoScript Constants Example:
page.theme.pagelayout.<pagelayout>.colPos.<colPos>.slide = -1
page.theme.pagelayout.default.colPos.9.slide = -1
Fluid Example:
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '9', slide: '-1'}" />
The Icon Group Content element was too static to be useful. We make some simple adjustments to make it a bit more flexible, it has now an Options
tab where you can also adjust the alignment
also the elements that should be displayed in a row.
You can now set a link to each item of an icon group, this was much requested, to avoid that everyone is implementing this on its own - it was decided to ship this feature.