@anydigital/atomic-bricks 1.0.0-alpha.2 → 1.0.0-alpha.4
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.
- package/README.md +134 -0
- package/dist/atomic-bricks.css +25 -6
- package/package.json +2 -2
- package/src/_base.css +18 -0
- package/src/bricks/_gtm.njk +18 -0
- package/src/bricks/_nav.njk +10 -0
package/README.md
CHANGED
|
@@ -36,6 +36,56 @@ html, body {
|
|
|
36
36
|
|
|
37
37
|
This is automatically applied when you include the stylesheet.
|
|
38
38
|
|
|
39
|
+
### Full Viewport Height
|
|
40
|
+
|
|
41
|
+
Ensures the body element takes at least the full height of the viewport using dynamic viewport height for better mobile support:
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
body {
|
|
45
|
+
min-height: 100dvh;
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
This is automatically applied when you include the stylesheet.
|
|
50
|
+
|
|
51
|
+
### Typography Enhancements
|
|
52
|
+
|
|
53
|
+
Improves text rendering and readability:
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
body {
|
|
57
|
+
hyphens: auto;
|
|
58
|
+
-webkit-font-smoothing: antialiased;
|
|
59
|
+
-moz-osx-font-smoothing: grayscale;
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
- Automatic hyphenation for better text flow
|
|
64
|
+
- Font smoothing for cleaner text rendering across browsers
|
|
65
|
+
|
|
66
|
+
This is automatically applied when you include the stylesheet.
|
|
67
|
+
|
|
68
|
+
### Flexbox Layout
|
|
69
|
+
|
|
70
|
+
Sets up a flexible column layout structure:
|
|
71
|
+
|
|
72
|
+
```css
|
|
73
|
+
body {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
body > main {
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
flex-grow: 1;
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
The body becomes a flex container with column direction, and `main` elements automatically grow to fill available space. This is useful for creating sticky footers and full-height layouts.
|
|
86
|
+
|
|
87
|
+
This is automatically applied when you include the stylesheet.
|
|
88
|
+
|
|
39
89
|
### Breakout CSS
|
|
40
90
|
|
|
41
91
|
Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities for breaking out images and figures beyond their container width. Use the `.breakout` class to allow elements to extend beyond their parent container:
|
|
@@ -48,6 +98,90 @@ Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities fo
|
|
|
48
98
|
|
|
49
99
|
The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. This is automatically included when you import the stylesheet.
|
|
50
100
|
|
|
101
|
+
## Bricks (Template Components)
|
|
102
|
+
|
|
103
|
+
The package includes reusable Nunjucks template macros in the `src/bricks/` directory. These are useful for common web development patterns.
|
|
104
|
+
|
|
105
|
+
### Navigation (`_nav.njk`)
|
|
106
|
+
|
|
107
|
+
A navigation macro that renders a list of navigation links with proper accessibility attributes.
|
|
108
|
+
|
|
109
|
+
**Parameters:**
|
|
110
|
+
- `navPages` - Array of navigation page objects with `url` and `title` properties
|
|
111
|
+
- `currentPageUrl` - The URL of the current page (used to set `aria-current="page"`)
|
|
112
|
+
|
|
113
|
+
**Usage:**
|
|
114
|
+
|
|
115
|
+
```njk
|
|
116
|
+
{% from "bricks/_nav.njk" import render %}
|
|
117
|
+
{{ render(navPages, page.url) }}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
**Example:**
|
|
121
|
+
|
|
122
|
+
```njk
|
|
123
|
+
{% set navPages = [
|
|
124
|
+
{ url: '/', title: 'Home' },
|
|
125
|
+
{ url: '/about', title: 'About' },
|
|
126
|
+
{ url: '/contact', title: 'Contact' }
|
|
127
|
+
] %}
|
|
128
|
+
{% from "bricks/_nav.njk" import render %}
|
|
129
|
+
{{ render(navPages, '/about') }}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
**Output:**
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<nav>
|
|
136
|
+
<a href="/">Home</a>
|
|
137
|
+
<a href="/about" aria-current="page">About</a>
|
|
138
|
+
<a href="/contact">Contact</a>
|
|
139
|
+
</nav>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
**Compatibility:** Compatible with [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually).
|
|
143
|
+
|
|
144
|
+
### Google Tag Manager (`_gtm.njk`)
|
|
145
|
+
|
|
146
|
+
A macro for embedding Google Tag Manager scripts in your pages.
|
|
147
|
+
|
|
148
|
+
**Parameters:**
|
|
149
|
+
- `gtmId` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
|
|
150
|
+
- `bodyFallback` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
|
|
151
|
+
|
|
152
|
+
**Usage:**
|
|
153
|
+
|
|
154
|
+
In your base template's `<head>`:
|
|
155
|
+
|
|
156
|
+
```njk
|
|
157
|
+
{% from "bricks/_gtm.njk" import render %}
|
|
158
|
+
{{ render('GTM-XXXXXXX') }}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
In your base template's `<body>` (right after the opening tag):
|
|
162
|
+
|
|
163
|
+
```njk
|
|
164
|
+
{% from "bricks/_gtm.njk" import render %}
|
|
165
|
+
{{ render('GTM-XXXXXXX', true) }}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
**Example:**
|
|
169
|
+
|
|
170
|
+
```njk
|
|
171
|
+
<!DOCTYPE html>
|
|
172
|
+
<html>
|
|
173
|
+
<head>
|
|
174
|
+
{% from "bricks/_gtm.njk" import render %}
|
|
175
|
+
{{ render('GTM-XXXXXXX') }}
|
|
176
|
+
</head>
|
|
177
|
+
<body>
|
|
178
|
+
{% from "bricks/_gtm.njk" import render %}
|
|
179
|
+
{{ render('GTM-XXXXXXX', true) }}
|
|
180
|
+
<!-- Your content -->
|
|
181
|
+
</body>
|
|
182
|
+
</html>
|
|
183
|
+
```
|
|
184
|
+
|
|
51
185
|
## License
|
|
52
186
|
|
|
53
187
|
MIT
|
package/dist/atomic-bricks.css
CHANGED
|
@@ -9,25 +9,44 @@ html, body {
|
|
|
9
9
|
overflow-x: clip;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
body {
|
|
13
|
+
/* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
|
|
14
|
+
min-height: 100dvh;
|
|
15
|
+
|
|
16
|
+
/* Enable hyphenation and font smoothing for better typography */
|
|
17
|
+
hyphens: auto;
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
-moz-osx-font-smoothing: grayscale;
|
|
20
|
+
|
|
21
|
+
/* Make the body a flex container with column layout; main fills space */
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: column;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
body > main {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
flex-grow: 1;
|
|
30
|
+
}
|
|
31
|
+
|
|
12
32
|
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
13
33
|
|
|
14
34
|
.breakout {
|
|
15
|
-
padding-
|
|
16
|
-
padding-right: 10%;
|
|
35
|
+
padding-inline: 10%;
|
|
17
36
|
|
|
18
37
|
/* Direct children, or wrapped in <p> for Markdown support */
|
|
19
38
|
}
|
|
20
39
|
|
|
21
40
|
.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
|
|
22
|
-
|
|
23
|
-
width:
|
|
41
|
+
width: -moz-fit-content;
|
|
42
|
+
width: fit-content;
|
|
24
43
|
min-width: 100%;
|
|
25
44
|
max-width: 125%;
|
|
26
|
-
transform: translateX(-50%);
|
|
27
45
|
margin-left: 50%;
|
|
46
|
+
transform: translateX(-50%);
|
|
28
47
|
}
|
|
29
48
|
|
|
30
|
-
/*
|
|
49
|
+
/* Respect inline blocks' min-width */
|
|
31
50
|
|
|
32
51
|
.breakout > img:not(does-not-exist),.breakout > picture:not(does-not-exist),.breakout > figure:not(does-not-exist),.breakout > canvas:not(does-not-exist),.breakout > audio:not(does-not-exist),.breakout > p > img,.breakout > p > picture,.breakout > p > figure,.breakout > p > canvas,.breakout > p > audio {
|
|
33
52
|
min-width: auto;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/atomic-bricks",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.4",
|
|
4
4
|
"description": "Framework-agnostic CSS utility helpers for modern web development",
|
|
5
5
|
"main": "dist/atomic-bricks.css",
|
|
6
6
|
"style": "dist/atomic-bricks.css",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"author": "Anton Staroverov",
|
|
27
27
|
"license": "MIT",
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@anydigital/breakout-css": "^1.0.0-alpha.
|
|
29
|
+
"@anydigital/breakout-css": "^1.0.0-alpha.7",
|
|
30
30
|
"postcss": "^8.4.33",
|
|
31
31
|
"postcss-cli": "^11.0.0",
|
|
32
32
|
"postcss-import": "^16.1.1",
|
package/src/_base.css
CHANGED
|
@@ -3,3 +3,21 @@ html, body {
|
|
|
3
3
|
overflow-x: clip;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
+
body {
|
|
7
|
+
/* Ensures body takes at least the full height of the viewport (using dynamic viewport height for better mobile support) */
|
|
8
|
+
min-height: 100dvh;
|
|
9
|
+
|
|
10
|
+
/* Enable hyphenation and font smoothing for better typography */
|
|
11
|
+
hyphens: auto;
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
|
|
15
|
+
/* Make the body a flex container with column layout; main fills space */
|
|
16
|
+
display: flex;
|
|
17
|
+
flex-direction: column;
|
|
18
|
+
> main {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
flex-grow: 1;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{% macro render(gtmId, bodyFallback=false) %}
|
|
2
|
+
|
|
3
|
+
{% if not bodyFallback %}
|
|
4
|
+
<!-- Google Tag Manager -->
|
|
5
|
+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
6
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
7
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
8
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
9
|
+
})(window,document,'script','dataLayer','{{ gtmId }}');</script>
|
|
10
|
+
<!-- End Google Tag Manager -->
|
|
11
|
+
{% else %}
|
|
12
|
+
<!-- Google Tag Manager (noscript) -->
|
|
13
|
+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ gtmId }}"
|
|
14
|
+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
15
|
+
<!-- End Google Tag Manager (noscript) -->
|
|
16
|
+
{% endif %}
|
|
17
|
+
|
|
18
|
+
{% endmacro %}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{% macro render(navPages, currentPageUrl) %}
|
|
2
|
+
<nav>
|
|
3
|
+
{%- for entry in navPages %}
|
|
4
|
+
<a href="{{ entry.url }}" {{ 'aria-current="page"' | safe if entry.url == currentPageUrl }}>
|
|
5
|
+
{{- entry.title -}}
|
|
6
|
+
</a>
|
|
7
|
+
{%- endfor %}
|
|
8
|
+
</nav>
|
|
9
|
+
{% endmacro %}
|
|
10
|
+
{# Compatible with https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually #}
|