[FEATURE] Add support for extension container_elements

Documentation/Administration/Index.rst

@@ -25,6 +25,7 @@ Extension                        Version tested
 ================================ ================
 pp_gridelements                  1.1.0
 flux_elements                    1.1.0
+container_elements               0.1.0
 ws_flexslider                    1.5.14
 indexed_search                   10.4.1
 news                             8.3.0

Documentation/Introduction/Index.rst

@@ -30,11 +30,10 @@ while maintaining or improving speed and seo performance.
 It provides the following main features:
 
 - Page layouts allowing to add content in side columns with a menu
-- Support for structure elements  powered by `gridelements <https://extensions.typo3.org/extension/gridelements>`__
-  or `flux <https://extensions.typo3.org/extension/flux>`__ through extensions
-  `pp_gridelements <https://extensions.typo3.org/extension/pp_gridelements>`__ or
-  `flux_elements <https://extensions.typo3.org/extension/flux_elements>`__. Example structure elements are: columns,
-  accordion, tabs, card and tile unit
+- Support for structure elements provided by `pp_gridelements <https://extensions.typo3.org/extension/pp_gridelements>`__,
+  `flux_elements <https://extensions.typo3.org/extension/flux_elements>`__ or
+  `container_elements <https://extensions.typo3.org/extension/container_elements>`__. Example structure elements are:
+  columns, accordion, tabs, card and tile unit
 - Support for automatic image scaling in structure elements (see :ref:`integration_templating`)
 - Content element fields to optimize image scaling dependent on the screen size.
 - Scroll animation effects

Documentation/User/Design.rst

@@ -45,13 +45,14 @@ This extension supports the following extensions providing similar structure ele
   `extension gridelements <https://extensions.typo3.org/extension/gridelements>`__
 - `Extension flux_elements <https://extensions.typo3.org/extension/flux_elements>`__ powered by the
   `extension flux <https://extensions.typo3.org/extension/flux>`__
+- `Extension container_elements <https://extensions.typo3.org/extension/container_elements>`__ powered by the
+  `extension container <https://extensions.typo3.org/extension/container>`__
 
 .. tip::
-   Don't work with both extensions in one installation. Choose between `pp_gridelements` and `flux_elements` to
-   minimize maintenance expense.
+   To minimize maintenance expenses it is recommended to just use one extension providing structure elements.
 
-The available structure elements can be found in the new content element wizard under the `Grid Elements` or
-`Flux content` tab:
+The available structure elements can be found in the new content element wizard under the `Grid Elements`, `Flux content`
+or `Container` tab:
 
 .. figure:: ../Images/User/StructureElements_Gridelements.jpg
    :width: 500px
@@ -67,6 +68,14 @@ The available structure elements can be found in the new content element wizard
 
    "Flux content"-tab in new content element wizard
 
+-----------------------------------------------------------------------------------------------------------------------
+
+.. figure:: ../Images/User/StructureElements_ContainerElements.jpg
+   :width: 500px
+   :alt: "Container"-tab in new content element wizard
+
+   "Container"-tab in new content element wizard
+
 
 .. _user-design-contentElement:
 
@@ -108,7 +117,7 @@ count.
 Some times an editor adds additional elements for structuring the content area resulting in a smaller available space
 for images. To deliver the optimal image size under such conditions a scaling can be defined.
 
-As an example consider adding a two column grid element with the first column being 33% and the second column 67% from
+As an example consider adding a two column structure element with the first column being 33% and the second column 67% from
 the content width. Let's assume the two columns to be next to each other for screen sizes bigger than md. Now when
 adding an image to the first column (33% width) the rendered image would be two times bigger than needed (due to the
 system not knowing how much space is available in the column). To deliver optimal sized images the following scaling

Resources/Public/Scss/ThemeMain/Elements/_extensions.scss

@@ -1,12 +1,12 @@
 //---------------------------------------------------------------------------------------------------------------------
-// Tile view with extensions pizpalue, pp_gridelements, flux_elements
+// Tile view with extensions pizpalue, pp_gridelements, flux_elements, container_elements
 //---------------------------------------------------------------------------------------------------------------------
 
 //
 // Outer most border (tile unit or tile alone)
 //
-.pp-tile-row, .fe-tile-row,
-:not(.pp-tile-col):not(.fe-tile-col) > .pp-tile {
+.pp-tile-row, .fe-tile-row, .ce-tile-row,
+:not(.pp-tile-col):not(.fe-tile-col):not(.ce-tile-col) > .pp-tile {
   margin-left: -$pp-tile-gutter;
   margin-right: -$pp-tile-gutter;
   &:nth-of-type(1) {
@@ -15,7 +15,7 @@
   &:nth-last-of-type(1) {
     margin-bottom: -$pp-tile-gutter;
   }
-  .pp-tile-row, .fe-tile-row {
+  .pp-tile-row, .fe-tile-row, .ce-tile-row {
     margin: 0;
   }
 }

Resources/Public/Scss/ThemeMain/Elements/_structure_elements.scss

@@ -1,13 +1,13 @@
 //----------------------------------------------------------------------------------------------------------------------
 //
-// gridelements, flux_elements
+// gridelements, flux_elements, container_elements
 //
 //----------------------------------------------------------------------------------------------------------------------
 
 //----------------------------------------------------------------------------------------------------------------------
 // Container
 //
-.pp-container, .fe-container {
+.pp-container, .fe-container, .ce-container {
   .frame-container {
     max-width: none;
   }
@@ -43,13 +43,13 @@
   // Ensure spacing is correct when columns are serialized (two visually subsequent content elements just have one
   // padding). Assumes that all content elements in columns have a frame without spacing before.
   //
-  .pp-col-collapse, .fe-col-collapse {
+  .pp-col-collapse, .fe-col-collapse, .ce-col-collapse {
     > .frame.frame-background-none.frame-space-before-none:not(.frame-has-backgroundimage):first-child {
       @extend .frame-collapsible;
     }
   }
   // Compensate bottom space
-  > .pp-row-collapse, > .fe-row-collapse {
+  > .pp-row-collapse, > .fe-row-collapse, > .ce-row-collapse {
     @each $breakpoint in map-keys($frame-inner-spacing-scaling) {
       @include media-breakpoint-up($breakpoint) {
         $scaling: map-get($frame-inner-spacing-scaling, $breakpoint);
@@ -62,16 +62,16 @@
 //----------------------------------------------------------------------------------------------------------------------
 // Accordion
 //
-.pp-accordion-primary, .fe-accordion-primary {
+.pp-accordion-primary, .fe-accordion-primary, .ce-accordion-primary {
   @include pp-style-accordion-light($primary);
 }
-.pp-accordion-secondary, .fe-accordion-secondary {
+.pp-accordion-secondary, .fe-accordion-secondary, .ce-accordion-secondary {
   @include pp-style-accordion-light($secondary);
 }
-.pp-accordion-complementary, .fe-accordion-complementary {
+.pp-accordion-complementary, .fe-accordion-complementary, .ce-accordion-complementary {
   @include pp-style-accordion-light($complementary);
 }
-.pp-accordion-body, .fe-accordion-body  {
+.pp-accordion-body, .fe-accordion-body, .ce-accordion-body  {
   // No top space for first element in accordion body
   > .frame:first-child {
     padding-top: 0 ;
@@ -89,19 +89,19 @@
   padding: (1.5 * $nav-link-padding-x) 0;
   padding-bottom: 0.5rem;
 }
-.pp-tabs-primary, .fe-tabs-primary {
+.pp-tabs-primary, .fe-tabs-primary, .ce-tabs-primary {
   @include pp-style-tab-light($primary);
 }
-.pp-tabs-secondary, .fe-tabs-secondary {
+.pp-tabs-secondary, .fe-tabs-secondary, .ce-tabs-secondary {
   @include pp-style-tab-light($secondary);
 }
-.pp-tabs-complementary, .fe-tabs-complementary {
+.pp-tabs-complementary, .fe-tabs-complementary, .ce-tabs-complementary {
   @include pp-style-tab-light($complementary);
 }
 .tab-v1 {
   @include pp-style-tab($pp-tab-v1-background);
 }
-.pp-tab-pane, .fe-tab-pane {
+.pp-tab-pane, .fe-tab-pane, .ce-tab-pane {
   // No top space for first element in tab pane
   > .frame:first-child {
     padding-top: 0 ;
@@ -115,7 +115,7 @@
 //----------------------------------------------------------------------------------------------------------------------
 // Cards
 //
-.fe-card, .pp-card {
+.fe-card, .pp-card, .ce-card {
   .card-header, .card-footer {
     *:last-child {
       margin-bottom: 0;
@@ -124,7 +124,7 @@
   > img {
     height: auto;
   }
-  .fec-image-wrap, .ppc-image-wrap {
+  .fec-image-wrap, .ppc-image-wrap, .cec-image-wrap {
     .gallery-row {
       margin: 0;
     }
@@ -135,10 +135,10 @@
       margin: 0;
     }
   }
-  .fec-image-col img, .ppc-image-col {
+  .fec-image-col img, .ppc-image-col, .cec-image-col {
     height: auto;
   }
-  .fec-content-col, .ppc-content-col {
+  .fec-content-col, .ppc-content-col, .cec-content-col {
     display: flex;
     align-items: center;
   }