Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bjrmatos/new-grid-times
https://github.com/bjrmatos/new-grid-times
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/bjrmatos/new-grid-times
- Owner: bjrmatos
- License: other
- Created: 2023-06-12T01:51:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-06-12T01:53:14.000Z (over 1 year ago)
- Last Synced: 2024-10-12T18:08:26.714Z (3 months ago)
- Language: JavaScript
- Size: 12.3 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# New Grid Times — Module 7 workshop
In this workshop, our goal is to build a sophisticated, responsive grid layout for an online newspaper, the New Grid Times:
## Code structure
Like the last few workshops, this is a React / styled-components application.
This application is built using a **mobile-first methodology**. We're starting from a place of having almost-finished mobile styles; your mission is to add that last bit of polish on mobile, and then implement the tablet/laptop layouts specified in the designs.
Some design tokens, including colors, fonts, and media queries have been provided in `src/constants.js`. The colors and fonts have also been applied as global CSS variables in `src/components/GlobalStyles`.
Here's the full list of available CSS variables:
```
--color-white
--color-offblack
--color-gray-100
--color-gray-300
--color-gray-500
--color-gray-700
--color-gray-900
--color-primary <-- dark blue
--color-secondary <-- green
--color-urgent <-- red
--font-weight-normal
--font-weight-medium
--font-weight-bold
--font-family-serif
--font-family-sans-serif
--font-family-logo
```
---
The app is broken into 4 main compartments:
- The header
- The main story grid
- The "specialty" story grid
- The footer
The main story grid holds the big featured story, the secondary stories, and the opinion/editorial stories. The "specialty" story grid holds the market and sports sections.
The data for the stories is held in a JS file, `src/data.js`. In a real app, this would be read from a database.
## Troubleshooting
If you run into problems running a local development server, check out our [Troubleshooting Guide](https://courses.joshwcomeau.com/troubleshooting) on the course platform.
This guide addresses the common `Digital Envelope Routine` error you may have seen.
---
## Exercise 1: Header
Like in the Sole&Ankle workshop, this workshop features a two-step header that changes between desktop and mobile.
This workshop has been created with a "Mobile-first" methodology, and so your goal this time is to create a desktop variant of the header, and ensure the right header is used at both viewport sizes.
---
## Exercise 2: Prep and Polish
Before we start working on the tablet and laptop grid layouts, we need to add a bit of missing polish to the mobile implementation, and prep certain elements to make it easier to create our tablet/laptop grids.
This exercise is split into a few mini-parts:
### Text truncation
In the mockup, our main story's preview text is truncated on mobile after 8 lines of text:
The exact # of lines shown depends on the viewport size. For example, the amount of lines doubles on tablet:
> **Note:** on certain screen sizes, you may see an ellipsis alone on its own line. Don't worry about trying to solve for this.
The syntax for multi-line ellipsis is difficult to remember, so you might wish to [review the lesson from Module 6](https://courses.joshwcomeau.com/css-for-js/06-typography-and-media/03-text-overflow#multi-line-ellipsis).
### Story borders
There are also dividers between the stories that are in lists, like the secondary and opinion stories:
Critically, the borders only run _between_ stories. Not above the top story, or below the last story.
A good place to start is in `MainStoryGrid.js`. That's where all of these stories are laid out.
### Opinion avatar placement
Opinion stories show a picture of the journalist. On mobile, this image is meant to be shifted off to the side:
This same layout is used on laptop, but not on tablet. Update it across all relevant viewport sizes.
---
## Exercise 3: Main story grid
Alright, time to create our first responsive grid!
Update the `MainStoryGrid` component to support the layouts shown in Figma for tablet and laptop.
There are some interesting details that are easy to miss:
### Swapped OpinionStory styles
In the last exercise, we updated our "Opinion" stories so that the avatar was shifted off to the side on mobile and laptop sizes.
In our new tablet grid, the opinion section itself takes on a different layout:
Our stories are arranged horizontally in a row, instead of vertically in a column. The borders between stories disappear.
We'll need to dip into `OpinionStory.js` and make some changes based on the viewport size. A `TabletOnly` query can be used for this case.
### Swapped SecondaryStory styles
Similarly, on tablet, our `SecondaryStory` switches to a new layout.
On mobile/laptop:
On tablet:
### Grid dividers
When our grid grows to have multiple columns, we want to add a thin grey line between the columns:
We discuss strategies for this situation in the [“Grid Dividers” lesson](https://courses.joshwcomeau.com/css-for-js/07-css-grid/11-grid-dividers).
### Optional: Optical alignment
After creating the grid, you may find that certain things don't sit completely right. Compare the output to the design, and look for opportunities to shift things around to match a bit more perfectly.
---
## Exercise 4: Specialty Story grid
Underneath the main grid we've been working on, we have another grid, with specialized items about markets and sports.
On mobile, we can use the [“World Famous” grid snippet](https://courses.joshwcomeau.com/css-for-js/07-css-grid/09-fluid-grids) to arrange both the market cards and the sports stories.
When we get to the larger viewports, though, the sports stories operate a little bit differently: they form a single long line, with overflow to allow us to scroll horizontally:
Finally, on large viewports, we want the market and sports sections to sit side-by-side, with a divider:
---
## Exercise 5: Footer
Last but not least, the footer!
There are some alignment changes between different viewport sizes, like the `TopRow` and `SubFooter`:
We also need to switch from a vertical list to a dynamic grid, for the main nav links:
Finally, we want the columns on desktop to be equally-spaced:
---
## Solution
View the solution on the course platform:
https://courses.joshwcomeau.com/css-for-js/07-css-grid/19-workshop-solution