Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit cfb2b17

Browse files
ArtBlueArtBlue
authored
fix(page-grid): fixed layouts for print view and fixed examples (#2595)
1 parent bf234ed commit cfb2b17

File tree

11 files changed

+170
-139
lines changed

11 files changed

+170
-139
lines changed

‎.changeset/quiet-toys-pretend.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": patch
3+
---
4+
5+
fix(page-grid): fixed layouts for print view and fixed examples

‎dist/page-grid/page-grid.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
var(--page-grid-max-width) + var(--page-grid-outside-margins) * 2
1010
);
1111
}
12-
@media screen and (min-width: 512px) {
12+
@media (min-width: 512px) {
1313
:root {
1414
--page-grid-number-cols: 16;
1515
--page-grid-column-gaps: var(--spacing-200);
1616
--page-grid-column-widths: calc(6.25% - var(--spacing-200) + 1px);
1717
--page-grid-outside-margins: 32px;
1818
}
1919
}
20-
@media screen and (min-width: 1280px) {
20+
@media (min-width: 1280px) {
2121
:root {
2222
--page-grid-outside-margins: 48px;
2323
}

‎src/routes/_index/component/page-grid/+page.marko‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
</p>
5959

6060
<highlight-code type="css" code=`
61-
nav { display: none; } main { grid-area: ~"1 / 1 / span 1 / span 8"; } footer { grid-area: ~"2 / 1 / span 1 / span 8"; }${" "}/* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-SM *//* See below for all the references. */@media screen and (min-width: 512px) { nav { grid-area: ~"1 / 1 / span 1 / span 3"; } main { grid-area: ~"1 / 4 / span 1 / span 13"; } footer { grid-area: ~"2 / 1 / span 1 / span 16"; } }${" "}/* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-MD *//* See below for all the references. */@media screen and (min-width: 768px) { nav { grid-area: ~"1 / 1 / span 1 / span 2"; } main { grid-area: ~"1 / 3 / span 1 / span 14"; } }
61+
nav { display: none; } main { grid-area: ~"1 / 1 / span 1 / span 8"; } footer { grid-area: ~"2 / 1 / span 1 / span 8"; }${" "}/* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-SM *//* See below for all the references. */@media all and (min-width: 512px) { nav { grid-area: ~"1 / 1 / span 1 / span 3"; } main { grid-area: ~"1 / 4 / span 1 / span 13"; } footer { grid-area: ~"2 / 1 / span 1 / span 16"; } }${" "}/* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-MD *//* See below for all the references. */@media all and (min-width: 768px) { nav { grid-area: ~"1 / 1 / span 1 / span 2"; } main { grid-area: ~"1 / 3 / span 1 / span 14"; } }
6262
`></highlight-code>
6363

6464
<p>
@@ -97,7 +97,7 @@
9797
</p>
9898

9999
<h3 id="page-grid-vars">
100-
Page Grid LESS/CSS Properties
100+
Page Grid SASS/CSS Properties
101101
</h3>
102102
<p>
103103
We've set up
@@ -106,7 +106,7 @@
106106
</span>
107107
properties and
108108
<span class="highlight">
109-
LESS
109+
SASS
110110
</span>
111111
${" "}constants to provide developers with easy reference for responsive adjustments of UIs. The${" "}
112112
<span class="highlight">
@@ -167,7 +167,7 @@
167167
<p>
168168
Additionally, we've set up
169169
<span class="highlight">
170-
LESS
170+
SASS
171171
</span>
172172
${" "}constants for easier reference of the current breakpoints as well as some other dimension/spacing values.
173173
</p>

‎src/routes/guide-examples/+layout.style.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
// Dependencies common to full page (no site layout) examples
22
@import "../../../src/tokens/evo-core.css";
33
@import "../../../src/sass/page-grid/page-grid";
4-
@import "../static/sass/page-grid";

‎src/routes/guide-examples/page-grid-blog-stretchy-nested/+page.marko‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Page Grid Template: Blog Nested Grid</title>
8+
</head>
9+
<body>
10+
111
<!-- This example uses CSS Subgrid in browsers that support it, falling back to nested grids in those that don't -->
212

313
<!-- CSS Grid Level 2 "stretchy" recreation of: https://getbootstrap.com/docs/4.0/examples/blog/ -->
@@ -97,4 +107,8 @@
97107
</section>
98108
</aside>
99109
</div>
100-
</div>
110+
</div>
111+
112+
<footer>This pen is a "stretchy" CSS Grid recreation of the <a href="CSS Grid recreation of: https://getbootstrap.com/docs/4.0/examples/blog/">Bootstrap Blog Example</a>.</footer>
113+
</body>
114+
</html>

‎src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+layout.marko‎

Lines changed: 0 additions & 108 deletions
This file was deleted.

‎src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+page.marko‎

Lines changed: 97 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,102 @@
77
<title>Page Grid Template: Blog Sub-Grid</title>
88
</head>
99
<body>
10-
<${input.renderBody}/>
11-
<footer>This pen is a "stretchy" CSS Grid recreation of the <a href="CSS Grid recreation of: https://getbootstrap.com/docs/4.0/examples/blog/">Bootstrap Blog Example</a>.</footer>
10+
<!-- This example uses CSS Subgrid in browsers that support it, falling back to nested grids in those that don't -->
11+
12+
<!-- CSS Grid Level 2 "stretchy" recreation of: https://getbootstrap.com/docs/4.0/examples/blog/ -->
13+
14+
<div class="page-grid-container">
15+
<div class="page-grid page-grid--debug">
16+
<header>
17+
<a href="#">Subscribe</a>
18+
<p>Sub-Grid</p>
19+
<a href="#">Sign up</a>
20+
</header>
21+
<nav>
22+
<ul>
23+
<li><a href="#">World</a></li>
24+
<li><a href="#">U.S.</a></li>
25+
<li><a href="#">Technology</a></li>
26+
<li><a href="#">Design</a></li>
27+
<li><a href="#">Culture</a></li>
28+
<li><a href="#">Business</a></li>
29+
<li><a href="#">Politics</a></li>
30+
<li><a href="#">Opinion</a></li>
31+
<li><a href="#">Science</a></li>
32+
<li><a href="#">Health</a></li>
33+
<li><a href="#">Style</a></li>
34+
<li><a href="#">Travel</a></li>
35+
</ul>
36+
</nav>
37+
<article id="hero">
38+
<h2>Title of a longer featured blog post</h2>
39+
<p>Multiple lines of text that form the lede, informing new readers quickly and efficiently about what's most interesting in this post's contents.</p>
40+
<p><a>Continue reading...</a></p>
41+
</article>
42+
<article id="featured-1" class="featured page-grid__subgrid">
43+
<div class="featured__article">
44+
<h2>Featured Post 1</h2>
45+
<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
46+
</div>
47+
<div class="featured__thumbnail">
48+
Thumbnail
49+
</div>
50+
</article>
51+
<article id="featured-2" class="featured page-grid__subgrid">
52+
<div class="featured__article">
53+
<h2>Featured Post 2</h2>
54+
<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>
55+
</div>
56+
<div class="featured__thumbnail">
57+
Thumbnail
58+
</div>
59+
</article>
60+
<main>
61+
<h1>From the Firehose</h1>
62+
<article>
63+
<h2>Sample blog post</h2>
64+
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
65+
66+
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
67+
68+
<p>Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
69+
70+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
71+
72+
<h3>Heading</h3>
73+
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
74+
75+
<h4>Sub-heading</h4>
76+
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
77+
78+
<pre><code>Example code block</code></pre>
79+
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
80+
81+
<h4>Sub-heading</h4>
82+
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
83+
84+
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
85+
Donec id elit non mi porta gravida at eget metus.
86+
Nulla vitae elit libero, a pharetra augue.
87+
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
88+
89+
<p>Vestibulum id ligula porta felis euismod semper.
90+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
91+
Maecenas sed diam eget risus varius blandit sit amet non magna.
92+
Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
93+
</article>
94+
</main>
95+
<aside>
96+
<section>
97+
<h2>About</h2>
98+
<p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
99+
</section>
100+
<section>
101+
<h2>Archives</h2>
102+
</section>
103+
</aside>
104+
</div>
105+
</div>
106+
<footer>This pen is a "stretchy" CSS Grid recreation of the <a href="CSS Grid recreation of: https://getbootstrap.com/docs/4.0/examples/blog/">Bootstrap Blog Example</a>.</footer>
12107
</body>
13108
</html>

‎src/routes/guide-examples/page-grid-blog-stretchy-subgrid/+page.style.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44

55
body {
66
color: #212529;
7-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
8-
"Helvetica Neue", Arial, sans-serif;
7+
font-family:
8+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
9+
Arial, sans-serif;
910
margin: 0;
1011
}
1112

@@ -107,7 +108,7 @@ aside {
107108
}
108109

109110
/* Skin goes from 8 columns to 16 columns at this SM (small) breakpoint */
110-
@media screen and (min-width: 512px) {
111+
@media (min-width: 512px) {
111112
/* Set up subgrid columns */
112113
@supports not (grid-template-columns: subgrid) {
113114
.featured {

‎src/routes/guide-examples/page-grid-pricing/+page.marko‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,24 @@
1111

1212
<!-- this template has two top level containers & grids: one each for main and footer -->
1313

14-
<header>
15-
<div id="logo">Company Name</div>
16-
<nav>
17-
<ul>
18-
<li><a href="#">Features</a></li>
19-
<li><a href="#">Enterprise</a></li>
20-
<li><a href="#">Support</a></li>
21-
<li><a href="#">Pricing</a></li>
22-
</ul>
23-
<button>Sign Up</button>
24-
</nav>
25-
</header>
14+
<div class="page-grid-container">
15+
<div class="page-grid page-grid--debug">
16+
<div class="main-navigation">
17+
<header>
18+
<div id="logo">Company Name</div>
19+
<nav>
20+
<ul>
21+
<li><a href="#">Features</a></li>
22+
<li><a href="#">Enterprise</a></li>
23+
<li><a href="#">Support</a></li>
24+
<li><a href="#">Pricing</a></li>
25+
</ul>
26+
<button>Sign Up</button>
27+
</nav>
28+
</header>
29+
</div>
30+
</div>
31+
</div>
2632
<main class="page-grid-container">
2733
<div class="page-grid page-grid--debug">
2834
<div id="intro">
@@ -84,7 +90,18 @@
8490
</main>
8591
<!-- with flat structure we need to start a new top-level grid -->
8692
<footer class="page-grid-container">
87-
<div class="page-grid grid--debug">
93+
<div class="page-grid page-grid--debug">
94+
<div id="footer-card-1" class="footer-card">
95+
<h2>Stuff</h2>
96+
<ul>
97+
<li><a href="#">Cool stuff</a></li>
98+
<li><a href="#">Random feature</a></li>
99+
<li><a href="#">Team feature</a></li>
100+
<li><a href="#">Stuff for developers</a></li>
101+
<li><a href="#">Another one</a></li>
102+
<li><a href="#">Last time</a></li>
103+
</ul>
104+
</div>
88105
<div id="footer-card-2" class="footer-card">
89106
<h2>Features</h2>
90107
<ul>

0 commit comments

Comments
 (0)