From 4803079e171d6b5ba952b564f130b4f4730b6354 Mon Sep 17 00:00:00 2001 From: Allan Wang Date: Tue, 4 Feb 2020 00:24:26 -0800 Subject: Add docs on inspect element (#1630) * Add docs on inspect element * Update Theming.md --- docs/Theming.md | 30 ++++++++++++++++++++++++++++++ docs/img/inspect_element.png | Bin 0 -> 1000409 bytes 2 files changed, 30 insertions(+) create mode 100644 docs/Theming.md create mode 100644 docs/img/inspect_element.png diff --git a/docs/Theming.md b/docs/Theming.md new file mode 100644 index 00000000..dc027ba6 --- /dev/null +++ b/docs/Theming.md @@ -0,0 +1,30 @@ +# Frost Theming + +Want to contribute to Frost's theme? Read on! + +## Inspect Element + +Browsers have an inspect element panel, which you can use to view the underlying css. +You can usually access this by right clicking an element, followed by inspect: + +![Inspect Element](img/inspect_element.png) + +> Example using https://touch.facebook.com/settings/?entry_point=bookmark + +Within the inspect element panel, we can go to the "Elements" tab, and see that the highlighted element has a white background caused by the css attribute `._1glm`. These elements are generated from Facebook's base theme, which is why they have weird naming schemes, and may change from time to time. + +Frost primarily focuses on three attributes, `background` for background colors, `color` for text colors, and `border-*` for various border colors. + +In the case of providing theme updates, identifying the relevant selectors will help fix unthemed elements. + +## Updating Frost Themes + +It is also useful to apply Frost's existing themes to see what is already configured and what is missing. To do so, I use the following tools: + +* [Visual Studio Code](https://code.visualstudio.com/) as the main IDE +* [CSS & JS Injection](https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa) or any other plugin that allows you to apply CSS to a web page. + +When opening the Frost project, navigating to `app/web` and install the npm packages. Run SASS to generate the files, and focus on `app/web/assets/css/core/core.css`; this is what you'll want to paste into the browser extension to see the updates. To update the theme, modify one of the `app/web/scss/core/_core_*.scss` files, which will update `core.css`. + +If the update works, the selected elements should change. +Note that the core theme is intentionally a mix of weird colors, to make it easier to see changes. diff --git a/docs/img/inspect_element.png b/docs/img/inspect_element.png new file mode 100644 index 00000000..16b102f6 Binary files /dev/null and b/docs/img/inspect_element.png differ -- cgit v1.2.3