955bdcb2bc
* Rename all GitHub links from thepracticaldev/dev.to to forem/forem * Use new site name * Rename to Forem * Rename more dev.to to forem * Remove unnecessary redirects * Rename DEV to Forem * Use Forem instead of DEV for branding * Use Forem instead of DEV for licensing * Use seedling instead of DEV logo
25 lines
972 B
Markdown
25 lines
972 B
Markdown
---
|
|
title: Styles
|
|
---
|
|
|
|
# Styles
|
|
|
|
The majority of the CSS in the application is written in
|
|
[SASS](https://sass-lang.com/). There are a few places in the code base that
|
|
have style blocks in ERB templates, for inlining critical CSS (good). There are
|
|
also some styles that live in ERB templates that are not critical CSS (bad).
|
|
That is a bit of refactoring that needs to be done. PRs welcome!
|
|
|
|
Important files when working with SASS in the project:
|
|
|
|
- variables:
|
|
[/app/assets/stylesheets/variables.scss](https://github.com/forem/forem/blob/master/app/assets/stylesheets/variables.scss)
|
|
- mixins:
|
|
[/app/assets/stylesheets/\_mixins.scss](https://github.com/forem/forem/blob/master/app/assets/stylesheets/_mixins.scss)
|
|
|
|
SASS is compiled and served using
|
|
[Sprockets](https://github.com/rails/sprockets-rails) which packages static
|
|
assets in Rails.
|
|
|
|
For more about branding, theming or design in general in regards to Forem, refer
|
|
to the [Design Guide](/design) documentation.
|