search

gkubisa / elm-app-boilerplate

Base project for Elm applications
http://gkubisa.github.io/elm-app-boilerplate/
MIT License
120 stars 16 forks source link

Q: Where to put custom css/less? #6

Closed larryhengl closed 8 years ago

larryhengl commented 8 years ago

Hi, I'm starting to play with this boiler - i'm new to Elm and Semantic UI. Thank you for sharing it. What conventions have you been using to add simple css classes in Elm? Meaning, is there a separate location outside of Semantic's structure to place less or css that can also get built with the same gulp pipeline? I'm not talking about overrides, but rather simple styling to text, for example. Thx!

gkubisa commented 8 years ago

I'm not a Semantic UI expert either. However, after reading all the docs, I'd say that any custom LESS code should be added to the *.overrides files. See http://learnsemantic.com/themes/overview.html#css-overrides and http://learnsemantic.com/developing/customizing.html.

When I start styling my own app based on this boilerplate, I'm going to (in order of preference):

  1. select suitable themes for the components I use by modifying styles/theme.config.
  2. configure the Semantic UI variables in styles/site/**/*.variables.
  3. (optional) add custom LESS code to modify some components in styles/site/**/*.overrides.
  4. (optional) add any other custom LESS code to styles/site/globals/site.overrides.
  5. (optional) turn styles/site into a custom theme and reference it in styles/theme.config, if I wanted to reuse it in another project. I don't know yet how I would keep that theme in sync between the projects though.
gkubisa commented 8 years ago

Updated README.md with recommendation from my previous comment, see https://github.com/gkubisa/elm-app-boilerplate/commit/d09ee1cca76f8c8bb0ca35392de048ce59e940da.