[!!!][FEATURE] Streamline Fluid Styled Content and CSS Styled Content
[Packages/TYPO3.CMS.git] / typo3 / sysext / core / Documentation / Changelog / master / Feature-79622-SpaceBeforeAndSpaceAfterClassForCssStyledContent.rst
1 .. include:: ../../Includes.txt
2
3 =========================================================================
4 Feature: #79622 - SpaceBefore- and SpaceAfterClass for CSS 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 `TypoScript Content Elements CSS (optional)`. If this is not included
32 only the CSS classes will be added but without having CSS rules matching
33 these classes.
34
35
36 Example for before classes
37 --------------------------
38
39 =============   =============   ===============================   =============
40 Name            Value           CSS Class                         Margin
41 =============   =============   ===============================   =============
42 None            (empty)         (No CSS Class added)              (No Margin)
43 Extra Small     extra-small     csc-space-before-extra-small      1em
44 Small           small           csc-space-before-small            2em
45 Medium          medium          csc-space-before-medium           3em
46 Large           large           csc-space-before-large            4em
47 Extra Large     extra-large     csc-space-before-extra-large      5em
48
49
50 Example Output
51 --------------
52
53 .. code-block:: html
54
55    <div id="c43" class="... csc-space-before-medium">
56       ...
57    </div>
58
59 .. code-block:: html
60
61    <a id="c43"></a>
62    <div class="csc-space-before-medium"></div>
63    ...
64    <div class="csc-space-after-medium"></div>
65
66
67 Edit Predefined Options
68 -----------------------
69
70 .. code-block:: typoscript
71
72    TCEFORM.tt_content.space_before_class {
73       removeItems = extra-small,small,medium,large,extra-large
74       addItems {
75          superspace = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superSpace
76       }
77    }
78
79 .. code-block:: php
80
81    $GLOBALS['TCA']['tt_content']['columns']['space_before_class']['config']['items'][] = [
82       0 = LLL:EXT:extension/Resources/Private/Language/locallang.xlf:superSpace
83       1 = superspace
84    ];
85
86
87 Impact
88 ======
89
90 SpaceBefore and SpaceAfter is now available to all CSS Styled Content elements.
91
92 .. index:: Frontend