@ulu/frontend 0.6.32 → 0.6.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -31,3 +31,54 @@
|
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
|
34
|
+
|
|
35
|
+
<!-- @ulu-demo
|
|
36
|
+
title: Main Content - Aligned Center
|
|
37
|
+
description: A hero section with the main text content vertically centered alongside taller media.
|
|
38
|
+
fullscreen: true
|
|
39
|
+
-->
|
|
40
|
+
<div class="basic-hero basic-hero--main-center">
|
|
41
|
+
<div class="basic-hero__content container">
|
|
42
|
+
<div class="basic-hero__content-main">
|
|
43
|
+
<h1 class="h1">Vertically Centered Content</h1>
|
|
44
|
+
<p class="type-large">Notice how this text block sits perfectly in the middle of the available space created by the image.</p>
|
|
45
|
+
</div>
|
|
46
|
+
<div class="basic-hero__content-media">
|
|
47
|
+
<img src="https://picsum.photos/id/30/400/300" alt="Hero Media">
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- @ulu-demo
|
|
53
|
+
title: Main Content - Aligned End
|
|
54
|
+
description: A hero section with the main text content aligned to the bottom.
|
|
55
|
+
fullscreen: true
|
|
56
|
+
-->
|
|
57
|
+
<div class="basic-hero basic-hero--main-end">
|
|
58
|
+
<div class="basic-hero__content container">
|
|
59
|
+
<div class="basic-hero__content-main">
|
|
60
|
+
<h1 class="h1">Bottom Aligned Content</h1>
|
|
61
|
+
<p class="type-large">This text aligns to the bottom (flex-end) of the container.</p>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="basic-hero__content-media">
|
|
64
|
+
<img src="https://picsum.photos/id/40/400/300" alt="Hero Media">
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<!-- @ulu-demo
|
|
70
|
+
title: Main Content - Aligned Start
|
|
71
|
+
description: A hero section with the main text content explicitly aligned to the top (overriding any global center/end defaults).
|
|
72
|
+
fullscreen: true
|
|
73
|
+
-->
|
|
74
|
+
<div class="basic-hero basic-hero--main-start">
|
|
75
|
+
<div class="basic-hero__content container">
|
|
76
|
+
<div class="basic-hero__content-main">
|
|
77
|
+
<h1 class="h1">Top Aligned Content</h1>
|
|
78
|
+
<p class="type-large">This explicitly sets the alignment to the top (flex-start).</p>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="basic-hero__content-media">
|
|
81
|
+
<img src="https://picsum.photos/id/50/400/300" alt="Hero Media">
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
@@ -30,7 +30,7 @@ $-fallbacks: (
|
|
|
30
30
|
/// @type Map
|
|
31
31
|
/// @prop {CssValue} text-align [center] Alignment of text within hero.
|
|
32
32
|
/// @prop {Color} background-color ["color-hero-background"] Background color of the hero
|
|
33
|
-
|
|
33
|
+
/// @prop {CssValue} main-vertical-align [flex-start] Vertical alignment of the main content
|
|
34
34
|
$config: (
|
|
35
35
|
"background-color" : #fafafa,
|
|
36
36
|
"padding-top": 3rem,
|
|
@@ -38,6 +38,7 @@ $config: (
|
|
|
38
38
|
"gap" : (4rem 2rem),
|
|
39
39
|
"main-max-width" : true,
|
|
40
40
|
"main-min-width" : true,
|
|
41
|
+
"main-vertical-align" : flex-start, // Added setting
|
|
41
42
|
"media-max-width" : 20rem,
|
|
42
43
|
"media-vertical-align" : center
|
|
43
44
|
) !default;
|
|
@@ -82,6 +83,12 @@ $config: (
|
|
|
82
83
|
}
|
|
83
84
|
#{ $prefix }__content-main {
|
|
84
85
|
$min-width: utils.fallback(get("main-min-width"), get("main-max-width"));
|
|
86
|
+
|
|
87
|
+
// Using display flex to allow control for vertical align
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
justify-content: var(--ulu-basic-hero-main-align, get("main-vertical-align"));
|
|
91
|
+
|
|
85
92
|
// Using max/min-width so that we don't need to add selectors to change flex-basis
|
|
86
93
|
// when centered. Using flex-basis: 0 to allow flexbox to decide the items width
|
|
87
94
|
// allows it to expand/shrink within. min(100%... Never larger than parent
|
|
@@ -109,4 +116,16 @@ $config: (
|
|
|
109
116
|
align-items: center;
|
|
110
117
|
}
|
|
111
118
|
}
|
|
119
|
+
|
|
120
|
+
#{ $prefix }--main-start {
|
|
121
|
+
--ulu-basic-hero-main-align: flex-start;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
#{ $prefix }--main-center {
|
|
125
|
+
--ulu-basic-hero-main-align: center;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
#{ $prefix }--main-end {
|
|
129
|
+
--ulu-basic-hero-main-align: flex-end;
|
|
130
|
+
}
|
|
112
131
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ulu/frontend",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.33",
|
|
4
4
|
"description": "A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules optimized for traditional websites and content management systems.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|