Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Find original css file and expose/document how to customize #1

Open
ceball opened this issue Nov 21, 2017 · 4 comments
Open

Find original css file and expose/document how to customize #1

ceball opened this issue Nov 21, 2017 · 4 comments

Comments

@ceball
Copy link
Member

ceball commented Nov 21, 2017

No description provided.

@philippjfr
Copy link
Member

The original CSS was built by modifying the bokehplots.com template and is available on my fork of the repo (https://github.com/philippjfr/bokehplots.com). Note the CSS is compiled from SCSS files, adding an additional build step.

@ceball ceball added this to the Initial release milestone Nov 25, 2017
@ceball ceball changed the title Find original css file Find original css file and expose/document how to customize Nov 25, 2017
@ceball
Copy link
Member Author

ceball commented Jan 13, 2018

From holoviz/geoviews#106 (comment)

Is there a good place to record how to go about building the CSS with a new color scheme. My process is this:

  1. Pick primary (dark) color (usually from the project logo)
  2. Go to Paletton and add the primary color, choosing a three color palette
  3. Find the closest HTML color names for the three colors: http://chir.ag/projects/name-that-color/
  4. Add the named colors to the variables.scss file: https://github.com/philippjfr/bokehplots.com/blob/master/theme/static/scss/base/_variables.scss
  5. Replace the three colors throughout the scss files like in this commit
  6. Compile the SCSS with compass and grunt

@jbednar
Copy link
Member

jbednar commented Jan 15, 2018

Nice use of Paletton. I'm not sure where to document it, but wherever it is nbsite should presumably link to that discussion.

If you first did:

  1. Pick names for the three site colors that best describe how they are used (something like "nbsite-primary", "nbsite-secondary", "nbsite-tertiary", or perhaps "dominant", "accent1", "accent2")?
  2. Define colors by those names in the variables.scss file as in step 4.
  3. Do step 5 above, but only once for all time.

would it now be possible to make the process be more like the following?

  1. Pick three coordinated site colors "dominant", "accent1", "accent2" . There are many ways one could choose colors, but one way we've found is:
    a. Pick the "dominant" color as a fairly dark color from the project logo (if any) or otherwise thematically associated with the project.
    b. Go to Paletton and add the primary color, choosing a three color palette
    c. Find the closest HTML color names for the three colors: http://chir.ag/projects/name-that-color/
  2. Update the definitions of "dominant", "accent1", and "accent2" in the variables.scss file to your new colors instead.
    https://github.com/philippjfr/bokehplots.com/blob/master/theme/static/scss/base/_variables.scss
  3. Compile the SCSS with compass and grunt

I.e., (a) be careful to separate this particular method of choosing 3 colors from the need to have 3 colors, and (b) avoid replacing named colors throughout files if you are already declaring new colors anyway? And is step 3 required, or optional? If it's optional, state what it provides (presumably smaller files/faster loading).

@ceball
Copy link
Member Author

ceball commented Oct 4, 2018

See also holoviz-dev/nbsite#82

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants