[!!!][FEATURE] Streamline Fluid Styled Content and CSS Styled Content
[Packages/TYPO3.CMS.git] / typo3 / sysext / core / Documentation / Changelog / master / Feature-79622-SpaceBeforeAndSpaceAfterClassForFluidStyledContent.rst
1 .. include:: ../../Includes.txt
2
3 ===========================================================================
4 Feature: #79622 - SpaceBefore- and SpaceAfterClass for Fluid Styled Content
5 ===========================================================================
6
7 See :issue:`79622`
8
9 Description
10 ===========
11
12 CSS Styled Content provided the editor the possibility to fine-tune distances
13 between content elements. The concept of CSC relied on that the editor
14 understood what `margins` are, how they are calculated and had to maintain
15 an overview of pixels that where used on the site he is maintaining.
16
17 This lead to different problems not only for the editor but also for the
18 integrator because he has no control about what the editor fills into these
19 fields. Also it was hardly controlable when these distances should be
20 variable and change on certain viewports for mobile usage.
21
22 To regain control for this behaviour we are now introducing a new concept
23 that purely relies on CSS classes, that can be defined by the integrator.
24
25 All CSS classes are by default prefixed by `frame-space-before-` or
26 `frame-spacer-after-` and added to the surrounding frame when available.
27 If the frame if the content element is set to none, placeholder elements
28 are placed before and after to generate that distance.
29
30 The default CSS definitions are placed in the optional static template
31 `Fluid Content Elements CSS (optional)`. If this is not included only the
32 CSS classes will be added but without having CSS rules matching these classes.
33
34
35 Example for before classes
36 --------------------------
37
38 =============   =============   ===============================   =============
39 Name            Value           CSS Class                         Margin
40 =============   =============   ===============================   =============
41 None            (empty)         (No CSS Class added)              (No Margin)
42 Extra Small     extra-small     frame-space-before-extra-small     1em
43 Small           small           frame-space-before-small           2em
44 Medium          medium          frame-space-before-medium          3em
45 Large           large           frame-space-before-large           4em
46 Extra Large     extra-large     frame-space-before-extra-large     5em
47
48
49 Example Output
50 --------------
51
52 .. code-block:: html
53
54    <div id="c43" class="frame ... frame-space-before-medium">
55       ...
56    </div>
57
58 .. code-block:: html
59
60    <a id="c43"></a>
61    <div class="frame-space-before-medium"></div>
62    ...
63    <div class="frame-space-after-medium"></div>
64
65
66 Edit predefined options
67 -----------------------
68
69 .. code-block:: typoscript
70
71    TCEFORM.tt_content.space_before_class {
72       removeItems = extra-small,small,medium,large,extra-large
73       addItems {
74          superspace = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superSpace
75       }
76    }
77
78 .. code-block:: php
79
80    $GLOBALS['TCA']['tt_content']['columns']['space_before_class']['config']['items'][] = [
81       0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superSpace
82       1 = superspace
83    ];
84
85
86 Impact
87 ======
88
89 SpaceBefore and SpaceAfter is now available to all Fluid Styled Content elements.
90
91 .. index:: Fluid, Frontend