Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There are quite a few ways to accomplish your goal of being able to have user specific color schemes, but they each have their advantages / disadvantages.</p> <p>I'm assuming you are using some framework like Bootstrap with the files that you name.</p> <p><strong>Option 1: Inline CSS for color-specific styles (Preferred)</strong></p> <p>This is my preferred option due to performance and simplicity. You can store each of the customized colors for each user, or even creating a model so you can reuse colors that represent a specific school. It's stored in the database and can scale to an very large number of color schemes without generating a lot of very similar files.</p> <p>Create a <a href="https://docs.djangoproject.com/en/dev/ref/templates/builtins/#include" rel="nofollow">snippet</a> in your template code that has any style that uses the color variable.</p> <p>base.html</p> <pre><code>{% include "color-snippet.css" with main-color="{{ user's main color }}" alt-color="{{ user's alt color }}" %} </code></pre> <p>color-snippet.css (note this file will be in your templates directory as it's being handled by your template engine</p> <pre><code>&lt;style&gt; .some-style { color: {{ main-color }} !important; } &lt;/style&gt; </code></pre> <p>So the big downside to this is you'll need to customize Bootstrap beyond the variables.less. You'll need to grep through the less files to find all the classes that would be generated, and copy the style to your snippet in css and not less. It'll take some investment up front and work when you want to upgrade to a newer Bootstrap, but it'll allow you to separate the color part of the styles to be derived dynamically at runtime.</p> <p>I prefer this approach since you don't have to deal with compilation of less outside your collectstatic step.</p> <p><strong>Option 2: Client side compilation of LESS</strong></p> <p>You can have Django serve a file that is dynamically created and returns the variables you want. Then you can have less.js compile it on the client.</p> <p>This would involve adding to your base template a url path that is handled by Django that isn't part of your static path (e.g. /style/variables), creating a handler in views and then returning text content that would be your less file variables.</p> <p><strong>Option 3: Server side compilation of LESS</strong></p> <p>I use <a href="http://django-pipeline.readthedocs.org/en/latest/index.html" rel="nofollow">Django Pipeline</a> to do my server side compilation of less to css. It takes some setup to get working with your Django application. In development mode, Django Pipeline will compile on every request the associated less files into CSS files. In production mode, it'll point to the appropriate file path to the compiled file. It hooks into <code>collectstatic</code> so your less gets compiled when you <code>collectstatic</code>.</p> <p>The biggest problem with this approach is that the mapping for your static files (what less + css files compile to css) is defined in your settings file. This requires a server restart when you update this. You could base your own server side less compilation off how Django Pipeline works but have logic for the mapping instead of defining it in something that requires a server restart.</p> <p>It's a lot of work and the less compilation of Bootstrap is non-trivial to have to do on every request.</p> <p>If you created your own mapping that doesn't require you to restart your Django server process, you could always just run collectstatic to create the new css files. This would avoid compilation at every request.</p> <p>While this last approach is closest to what you mentioned, it seems a lot more work and error prone than just separating the color-specific styles and using django templating to customize it.</p> <p>The last approach as well works well if your number of schemes is rather low since you can just create all the mappings ahead of time and not let people generate their own at runtime. They can suggest them and you can just update them at some regular cadence.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload