From 317b95456a789a3dfef8393de7ddcd04d75e7d98 Mon Sep 17 00:00:00 2001 From: Jaydan Urwin Date: Wed, 9 Mar 2022 21:34:55 -0700 Subject: [PATCH 1/5] typo fixes --- site/pages/10--docs/20--basics/90--assets.rocket.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/pages/10--docs/20--basics/90--assets.rocket.md b/site/pages/10--docs/20--basics/90--assets.rocket.md index 1d693ddb..09d95fcd 100644 --- a/site/pages/10--docs/20--basics/90--assets.rocket.md +++ b/site/pages/10--docs/20--basics/90--assets.rocket.md @@ -49,7 +49,7 @@ export default () => html`My Image ## Static Assets -Oftentimes, you have files such as robots.txt, .htaccess (redirects), favicons, etc. that do not need to be in your `src/` directory. For these types of files that simply need to be copied to the built site you will want to place them in your `site/public/` folder. Anything is this folder will be copied over into the built site completely untouched. +Oftentimes, you have files such as robots.txt, .htaccess (redirects), favicons, etc. that do not need to be in your `src/` directory. For these types of files that simply need to be copied to the built site you will want to place them in your `site/public/` folder. Anything in this folder will be copied over into the built site completely untouched. **Note:** Since these files are simply copied over during the build process, anything you place in the `site/public/` directory will not be optimized, bundled, or minified by Rocket. @@ -68,7 +68,7 @@ Here is an example of css file being imported using the `:resolve` function ## Node exports -If you package is `"type": "module"` then you can also add exports. +If your package is `"type": "module"` then you can also add exports. 👉 `package.json` From 486b0db331aad0d986cff4faa3c4fe704206699c Mon Sep 17 00:00:00 2001 From: Jaydan Urwin Date: Wed, 9 Mar 2022 22:08:19 -0700 Subject: [PATCH 2/5] started styles and css guide --- .../30--guides/70--styles-and-css.rocket.md | 67 +++++++++++++++++++ site/pages/pageTreeData.rocketGenerated.json | 32 +++++++++ 2 files changed, 99 insertions(+) create mode 100644 site/pages/10--docs/30--guides/70--styles-and-css.rocket.md diff --git a/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md new file mode 100644 index 00000000..c301a265 --- /dev/null +++ b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md @@ -0,0 +1,67 @@ +```js server +/* START - Rocket auto generated - do not touch */ +export const sourceRelativeFilePath = '10--docs/30--guides/70--styles-and-css.rocket.md'; +import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; +export { html, layout, setupUnifiedPlugins }; +/* END - Rocket auto generated - do not touch */ + +import { inlineFile } from '@rocket/engine'; +import { createRequire } from 'module'; +import path from 'path'; + +const { resolve } = createRequire(new URL('.', import.meta.url)); +``` + +# Styles And CSS + +Styles with Rocket can be as simple or as complex as you'd like them to be. In this guide we'll go through a few of the different approaches available to you when it comes to styling a site built with Rocket. + +## Approaches to Styling + +### 1. Simple `` Tags and External Files + +... + +### 2. Global CSS Styling + +... + +### 3. Completely Component Scoped Styles + +... + +The best part about these 3 approaches and Rocket is you don't have to pick one over the other. You can mix and match them as needed in your project. + +## Recommendations & Best Practices + +This is where we'll share our recommendations and what we would consider best practices for styles **but by all means choose the approach that works best for your project and your team.** + +### Global Styles + +We would first recommend that you have your global styles (resets, CSS variables, theme colors, etc.) all placed in a .css file or an inline style tag on your base layout. Web components work very well with [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) which is why we a global.css or base.css file would be a great place to set your site's theme colors, global resets, etc. + +Here's an example of some base properties for a theme. + +👉 `global.css` + +```css +:root { + --theme-bg: #ffffff; + --theme-on-bg: #000000; + --theme-primary: #D21B1D; + --theme-on-primary: #ffffff; +} +``` + +These properties could easily be used to set the body's background color and default text color of the site or within a button component to set the background color of the button and the color of the text in the button. + +### Resets + +You'll see many differing opinions online about styles that normalize or reset your styles across different browsers. Some of our favorites would be [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/) and [Normalize CSS](https://necolas.github.io/normalize.css/) but we would recommend you pick what works best for you and your project. (I'm sure you're noticing a trend). + +To include your reset styles you can simply place them at the top of your `global.css` file or import them from external `reset.css` file at the top of your `global.css` file. + +### Typography + + + diff --git a/site/pages/pageTreeData.rocketGenerated.json b/site/pages/pageTreeData.rocketGenerated.json index 1b3bd469..c9860951 100644 --- a/site/pages/pageTreeData.rocketGenerated.json +++ b/site/pages/pageTreeData.rocketGenerated.json @@ -719,6 +719,38 @@ "outputRelativeFilePath": "docs/guides/cross-browser/index.html", "sourceRelativeFilePath": "10--docs/30--guides/60--cross-browser.rocket.md", "level": 3 + }, + { + "title": "Styles And CSS | Rocket", + "h1": "Styles And CSS", + "headlinesWithId": [ + { + "text": "Styles And CSS", + "id": "styles-and-css", + "level": 1 + }, + { + "text": "1. Simple Tags and External Files", + "id": "1-simple-link-tags-and-external-files", + "level": 2 + }, + { + "text": "2.", + "id": "2", + "level": 2 + }, + { + "text": "2. Completely Component Scoped", + "id": "2-completely-component-scoped", + "level": 2 + } + ], + "name": "Styles And CSS", + "menuLinkText": "Styles And CSS", + "url": "/docs/guides/styles-and-css/", + "outputRelativeFilePath": "docs/guides/styles-and-css/index.html", + "sourceRelativeFilePath": "10--docs/30--guides/70--styles-and-css.rocket.md", + "level": 3 } ] } From dee130281157c1efb90b85132dd7476b233cc37a Mon Sep 17 00:00:00 2001 From: Jaydan Urwin Date: Wed, 9 Mar 2022 22:11:10 -0700 Subject: [PATCH 3/5] edited titles --- site/pages/10--docs/30--guides/70--styles-and-css.rocket.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md index c301a265..3b7d2f59 100644 --- a/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md +++ b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md @@ -22,11 +22,11 @@ Styles with Rocket can be as simple or as complex as you'd like them to be. In t ... -### 2. Global CSS Styling +### 2. Global CSS Template Literals ... -### 3. Completely Component Scoped Styles +### 3. Component Scoped Styles ... From 099331d2c0858e2f605bcefbbac38c0f72157f85 Mon Sep 17 00:00:00 2001 From: Jaydan Urwin Date: Thu, 10 Mar 2022 08:22:25 -0700 Subject: [PATCH 4/5] cleaned up this section --- site/pages/10--docs/30--guides/70--styles-and-css.rocket.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md index 3b7d2f59..bff2a32c 100644 --- a/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md +++ b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md @@ -38,7 +38,7 @@ This is where we'll share our recommendations and what we would consider best pr ### Global Styles -We would first recommend that you have your global styles (resets, CSS variables, theme colors, etc.) all placed in a .css file or an inline style tag on your base layout. Web components work very well with [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) which is why we a global.css or base.css file would be a great place to set your site's theme colors, global resets, etc. +Web components work very well with [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) which is why a global.css or base.css file would be a great place to set your site's theme colors, global resets, etc. Here's an example of some base properties for a theme. From 4bdffb5ea651a5f2af3a020556126dc585c94ab3 Mon Sep 17 00:00:00 2001 From: Thomas Allmer Date: Thu, 17 Mar 2022 00:17:10 +0100 Subject: [PATCH 5/5] chore: cleanup code --- .../10--docs/30--guides/70--styles-and-css.rocket.md | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md index bff2a32c..155e90cc 100644 --- a/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md +++ b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md @@ -4,12 +4,6 @@ export const sourceRelativeFilePath = '10--docs/30--guides/70--styles-and-css.ro import { html, layout, setupUnifiedPlugins } from '../../recursive.data.js'; export { html, layout, setupUnifiedPlugins }; /* END - Rocket auto generated - do not touch */ - -import { inlineFile } from '@rocket/engine'; -import { createRequire } from 'module'; -import path from 'path'; - -const { resolve } = createRequire(new URL('.', import.meta.url)); ``` # Styles And CSS @@ -48,7 +42,7 @@ Here's an example of some base properties for a theme. :root { --theme-bg: #ffffff; --theme-on-bg: #000000; - --theme-primary: #D21B1D; + --theme-primary: #d21b1d; --theme-on-primary: #ffffff; } ``` @@ -62,6 +56,3 @@ You'll see many differing opinions online about styles that normalize or reset y To include your reset styles you can simply place them at the top of your `global.css` file or import them from external `reset.css` file at the top of your `global.css` file. ### Typography - - -