Skip to content

Content: Replace with data attribute grid system #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: mainframe
Choose a base branch
from
+175 −158
Draft

Content: Replace with data attribute grid system #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a6349a2
Content: Replace with data attribute grid system
nginx-jack Jul 7, 2025
9c1173f
Cards: Replace with data-grid
lamATnginx Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
260 changes: 136 additions & 124 deletions assets/css/v2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,17 +206,26 @@ textarea:not([rows]) {

--flow-gap: 1rem;

/* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* ALWAYS use for fonts */
--font-step--3: clamp(0.576rem, 0.5796rem + -0.0047vw, 0.5787rem);
--font-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
--font-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
--font-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
--font-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
--font-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
--font-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
--font-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
--font-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
/* Step -3: 8.1019px → 8.192px */
--font-step--3: clamp(0.5064rem, 0.5044rem + 0.0098vw, 0.512rem);
/* Step -2: 9.7222px → 10.24px */
--font-step--2: clamp(0.6076rem, 0.5964rem + 0.0563vw, 0.64rem);
/* Step -1: 11.6667px → 12.8px */
--font-step--1: clamp(0.7292rem, 0.7045rem + 0.1232vw, 0.8rem);
/* Step 0: 14px → 16px */
--font-step-0: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem);
/* Step 1: 16.8px → 20px */
--font-step-1: clamp(1.05rem, 0.9804rem + 0.3478vw, 1.25rem);
/* Step 2: 20.16px → 25px */
--font-step-2: clamp(1.26rem, 1.1548rem + 0.5261vw, 1.5625rem);
/* Step 3: 24.192px → 31.25px */
--font-step-3: clamp(1.512rem, 1.3586rem + 0.7672vw, 1.9531rem);
/* Step 4: 29.0304px → 39.0625px */
--font-step-4: clamp(1.8144rem, 1.5963rem + 1.0904vw, 2.4414rem);
/* Step 5: 34.8365px → 48.8281px */
--font-step-5: clamp(2.1773rem, 1.8731rem + 1.5208vw, 3.0518rem);

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* ALWAYS use for horizontal spacing */
Expand Down Expand Up @@ -515,19 +524,6 @@ ol li:last-child {
}
}

.content {
grid-area: content;
justify-self: center;
padding: 0 var(--space-l) 2rem var(--space-l);
max-width: var(--content-max-width);

/* Allow redocly to fill the entire container */
&.content__redocly {
justify-self: unset;
max-width: unset;
}
}

.footer {
grid-area: footer;
padding: var(--space-l);
Expand Down Expand Up @@ -848,11 +844,82 @@ nav {
/* MARK: Main content
*/

.content-layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
z-index: 1;
.content {
grid-area: content;
justify-self: center;
padding: 0 var(--space-l) 2rem var(--space-l);
max-width: var(--content-max-width);

& > *,
& > ul,
& > ol {
display: grid;
grid-template-columns: 1fr;
/* These gaps determine the spacing between all content. Be careful!! */
gap: var(--space-m) var(--space-m);

/* Handles some strangeness where single-line codeblocks caused
horizon */
ol:has(.highlight-v2),
ul:has(.highlight-v2) {
min-width: 0;
max-width: 100%;
}

> *:not([data-grid]),
> li:not([data-grid]) {
grid-column: 1;
}

[data-grid="wide"] {
grid-column: 1;
}
[data-grid="first-third"] {
grid-column: 1;
}
[data-grid="last-third"] {
grid-column: 1;
}
[data-grid="halve"] {
grid-column: 1;
}

@media (min-width: 55rem) {
max-width: var(--content-max-width);
grid-template-columns: repeat(var(--grid-columns), 1fr);

> *:not([data-grid]),
> li:not([data-grid]) {
grid-column: 1 / 8;
}

[data-grid="wide"] {
grid-column: 1 / -1;
}

[data-grid="first-third"] {
grid-column: 1 / 4;
}

[data-grid="first-two-thirds"] {
grid-column: 1 / 8;
}

[data-grid="last-third"] {
grid-column: 8 / -1;
}

[data-grid="halve"] {
grid-column: span 6;
}
}
}

/* Allow redocly to fill the entire container */
&.content__redocly {
justify-self: unset;
max-width: unset;
}
}

#searchbox {
Expand All @@ -862,30 +929,7 @@ nav {
}

.breadcrumb-layout {
grid-column: 1 / -1;
}

.text-content {
grid-column: 1 / -1;
display: grid;
grid-template-columns: var(--grid-content-mobile);
column-gap: var(--grid-column-gutter);
margin-top: 2rem;
grid-auto-rows: max-content;
row-gap: var(--flow-gap);
justify-content: center;
}

.text-content > :not(.wide) {
grid-column: 1 / -1;
}

.text-content .wide {
grid-column: 1 / -1;
}

.text-content table {
width: 100%;
padding-top: 1rem;
}

main {
Expand All @@ -897,29 +941,6 @@ main {
display: unset;
}

.text-content {
grid-template-columns: var(--grid-content) var(--grid-side-callout);
grid-template-rows: 3rem max-content;
column-gap: var(--grid-column-gutter);
}

.text-content > :not(.wide) {
grid-column: 1;
}

.content-layout {
display: grid;
grid-template-columns: 1fr minmax(
auto,
calc(
var(--grid-content) +
var(--grid-side-callout) +
var(--grid-column-gutter)
)
) 1fr;
column-gap: var(--grid-column-gutter);
}

.navbar atomic-search-interface {
margin: 0;
display: block;
Expand Down Expand Up @@ -1353,14 +1374,18 @@ a:hover {
text-decoration-color: oklch(var(--color-brand) / 0.8);
}

/* MARK: Typography */

h1 {
font-size: 2rem;
margin: 0 0 1rem 0;
font-size: var(--font-step-3);
}

h2 {
font-size: 1.5rem;
margin: 1rem 0 0.75rem 0;
font-size: var(--font-step-2);
}

p {
font-size: var(--font-step-0);
}

h2:target,
Expand Down Expand Up @@ -1433,7 +1458,7 @@ h6:has(a):hover {
}

/* Landing page cards */
.text-content .card-layout {
.card-layout {
grid-column: 1;

.card-section {
Expand All @@ -1445,65 +1470,53 @@ h6:has(a):hover {
font-weight: 500;
}

/* Hide all the cards past 3 if it is a featured card section */
&.featured-section {
.card-section-content.card-grid
> *:nth-child(n + 4 of div.card-container) {
/* Hide all the cards past 3 if it is a featured card section */
.card-section-content > *:nth-child(n + 4 of div.card) {
display: none;
}
}
}
}

/* Optional grid layout */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
gap: 1.5rem;
.card {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;

.card-container {
border: 1px solid oklch(var(--color-codeblock-border));
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
padding: 1rem;
.card-header {
display: flex;
flex-direction: row;
gap: 0.5rem;

&.featured-card {
/* If there is a need for a featured card, only the featured card should be full length */
grid-column: 1 / -1;
.card-brand-icon {
height: 20px;
width: auto;
}

/* If there is a featured card AND two cards, the last one should be full length */
~ .card-container:nth-child(2n):last-child {
grid-column: 1 / -1;
h2 {
padding: 0;
margin: 0;
font-size: 1rem;
}
}
}

/* If there is no featured card, last card that is the 3rd one should be full width */
&:not(:has(.featured-card)) *:nth-child(n + 3 of div.card-container) {
grid-column: 1 / -1;
}
}

.card-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;

.card-header {
display: flex;
flex-direction: row;
gap: 0.5rem;
/* Optional grid layout */
.card-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: 1.5rem;

.card-brand-icon {
height: 20px;
width: auto;
}
@media (max-width: 68rem) {
grid-template-columns: 1fr;
}

h2 {
padding: 0;
margin: 0;
font-size: 1rem;
}
.card {
border: 1px solid oklch(var(--color-codeblock-border));
box-shadow: 3px 3px 0px oklch(var(--color-shadow));
padding: 1rem;
}
}

Expand Down Expand Up @@ -1637,7 +1650,6 @@ blockquote p:last-child {
/* Maintain the split column for as long as possible */
@media (min-width: 67rem) {
blockquote.side-callout {
grid-column: 2 !important;
align-self: start;
}
}
Expand Down
6 changes: 3 additions & 3 deletions exampleSite/content/test-product/call-out/all-callouts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ This is a plain callout with a default title for its type. It has a [link](#plai

Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage.

{{<call-out "side-callout">}}
{{<call-out sideline="true">}}
This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class.
{{</call-out>}}

When designing effective web layouts, it's important to maintain proper balance between primary content and supplementary elements. Callouts serve as attention-grabbing devices that highlight key information, but they should remain subordinate to the main content flow. This hierarchy helps users navigate your page intuitively, guiding their attention appropriately. A well-designed callout complements the surrounding text rather than competing with it.

Additionally, concise callouts tend to be more effective at capturing user attention. When a callout becomes too verbose, users are less likely to read it entirely, defeating its purpose. The visual weight of callouts should align with their informational importance - brief, impactful statements create better engagement than lengthy explanations. Remember that white space itself is a powerful design element, creating visual breathing room that enhances readability and focus. Ultimately, the most successful callouts follow the principle of "less is more," delivering maximum impact through minimal interruption to the user's reading experience.

{{<call-out "side-callout" "Custom title">}}
{{<call-out sideline="true" title="Custom title">}}
This is a plain side callout with a custom title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `<call-out>` with the `.side-callout` class, and a custom title.
{{</call-out>}}

Expand Down Expand Up @@ -84,4 +84,4 @@ This is `<before-you-begin>`.

{{<see-also>}}
This is `<see-also>`.
{{</see-also>}}
{{</see-also>}}
9 changes: 3 additions & 6 deletions layouts/_default/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
{{ define "main" }}

<main class="content " role="main">
<section class="main-layout">
<section id="maincontent" class="content-layout">
<div data-cms-edit="content" class="text-content list-page">
<section class="breadcrumb-layout wide">
<div class="breadcrumb-layout wide">
{{ if not .IsHome }}
{{ if not (in .Params.display_breadcrumb "false" ) }}
{{ partial "breadcrumb" .}}
{{ end }}
{{ end }}
</section>
</div>
<div class="list-header-container">
<img src="/images/icons/{{ .Params.logo | default "NGINX-product-icon.svg" }}">
<div class="list-header-title">
Expand Down Expand Up @@ -42,8 +40,7 @@ <h2>
{{ end }}

</div>
</section>
</section>

</main>


Expand Down
Loading