I tried out styling the components this time. I copy pasted
1) Styling a component using CSS Modules
2) Building a new page using CSS Modules
Seemed interesting. The working of props and imported variables are kind of cool.
import React from "react"
import styles from "./about-css-modules.module.css"
import Container from "../components/container"
console.log(styles)
const User = props => (
<div className={styles.user}>
<img src={props.avatar} className={styles.avatar} alt="" />
<div className={styles.description}>
<h2 className={styles.username}>{props.username}</h2>
<p className={styles.excerpt}>{props.excerpt}</p>
</div>
</div>
)
export default () => (
<Container>
<h1>About CSS Modules</h1>
<p>CSS Modules are cool</p>
<User
username="Jane Doe"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
excerpt="I'm Jane Doe. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
<User
username="Bob Smith"
avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
excerpt="I'm Bob Smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
/>
</Container>
)
I managed to find out some random new npm packages and other tools for different purposes eventhough i only cover a small portion of gatsby.
- Surge
- Deployhq
- Netlify
1)Surge-Static web publishing for Front-End Developers
npm install --global surge
2)Deployhq - Build, deploy, and manage
modern web projects
3)Netlify - Build, deploy, and manage
modern web projects(Extra stuffs)
Top comments (0)