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` 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..155e90cc --- /dev/null +++ b/site/pages/10--docs/30--guides/70--styles-and-css.rocket.md @@ -0,0 +1,58 @@ +```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 */ +``` + +# 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 Template Literals + +... + +### 3. 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 + +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. + +👉 `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 } ] }