Skip to content

Commit 3ca5647

Browse files
danielschmitzMichaelDeBoeymcansh
authored
feat: add picocss example (#180)
* feat: Adding picocss template * Update picocss/package.json Co-authored-by: Michaël De Boey <[email protected]> * Update picocss/app/root.tsx Co-authored-by: Michaël De Boey <[email protected]> * Update picocss/app/root.tsx Co-authored-by: Michaël De Boey <[email protected]> * Update picocss/README.md Co-authored-by: Michaël De Boey <[email protected]> * Update picocss/README.md Co-authored-by: Michaël De Boey <[email protected]> * Update picocss/README.md Co-authored-by: Michaël De Boey <[email protected]> * Update picocss/README.md Co-authored-by: Michaël De Boey <[email protected]> * Update picocss/app/root.tsx Co-authored-by: Michaël De Boey <[email protected]> * chore: format Signed-off-by: Logan McAnsh <[email protected]> * chore: format Signed-off-by: Logan McAnsh <[email protected]> * Delete prettier.config.js --------- Signed-off-by: Logan McAnsh <[email protected]> Co-authored-by: Michaël De Boey <[email protected]> Co-authored-by: Logan McAnsh <[email protected]>
1 parent 023a250 commit 3ca5647

File tree

13 files changed

+695
-0
lines changed

13 files changed

+695
-0
lines changed

‎picocss/.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('eslint').Linter.Config} */
2+
module.exports = {
3+
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
4+
};

‎picocss/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
3+
/.cache
4+
/build
5+
/public/build
6+
.env

‎picocss/README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Remix Example with PicoCSS
2+
3+
Welcome to Remix+PicoCSS Template
4+
5+
PicoCSS is a Minimal CSS Framework for Semantic HTML
6+
7+
## Install
8+
9+
```
10+
npx create-remix@latest --template examples/picocss
11+
```
12+
13+
## Preview
14+
15+
Open this example on [CodeSandbox](https://codesandbox.com):
16+
17+
[![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/remix-run/examples/picocss/tree/main/picocss)
18+
19+
## Related Links
20+
21+
- [Remix Docs](https://remix.run/docs)
22+
- [PicoCSS Docs](https://picocss.com/docs/)
23+
24+
## Wanna install PicoCSS in your existing project?
25+
26+
```console
27+
$ npm install picocss@latest
28+
```
29+
30+
Create a `app/style.css` file with:
31+
32+
```css
33+
@import url("@picocss/pico");
34+
35+
# more css here...
36+
```
37+
38+
Import `app/style.css` into your `app/root.tsx` file:
39+
40+
```ts
41+
//imports
42+
import styles from "./styles.css";
43+
44+
// ...code...
45+
46+
export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
47+
48+
// ...code...
49+
```

‎picocss/app/root.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import type { LinksFunction, MetaFunction } from "@remix-run/node";
2+
import {
3+
Links,
4+
LiveReload,
5+
Meta,
6+
Outlet,
7+
Scripts,
8+
ScrollRestoration,
9+
} from "@remix-run/react";
10+
11+
import styles from "./styles.css";
12+
13+
export const meta: MetaFunction = () => ({
14+
charset: "utf-8",
15+
title: "Remix + PicoCSS Template",
16+
viewport: "width=device-width,initial-scale=1",
17+
});
18+
19+
export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
20+
21+
export default function App() {
22+
return (
23+
<html lang="en">
24+
<head>
25+
<Meta />
26+
<Links />
27+
</head>
28+
<body>
29+
<Outlet />
30+
<ScrollRestoration />
31+
<Scripts />
32+
<LiveReload />
33+
</body>
34+
</html>
35+
);
36+
}

0 commit comments

Comments
 (0)