I was thinking about a convenient way to create and use themes in HTML / CSS / JS. One possible solution I was thinking of was specifying the path to the theme file as a variable and importing the theme file in the main stylesheet via said variable so something along these lines:
:root {
--theme: url("default-theme.css");
}
#import var(--theme);
This way, if later the theme needs to be changed (for instance for Halloween or for the holiday season etc), the theme can be updated by either manually updating the value of the CSS variable or by using JS / TS to programmatically update the value.
I have tried a couple of different iterations of this including:
:root {
--theme: "default-theme.css";
}
#import var(--theme);
and
:root {
--theme: "default-theme.css";
}
#import url(var(--theme));
But sadly, nothing seems to work. I have also read through the documentation for CSS custom properties and CSS import and so far I have not really found anything.
Here is some editable sample code on StackBlitz. If anyone has any advice or suggestions or some wisdom to share, I will be extremely appreciative.
Problem
When I build my gatsby website with "gatsby build", the size of the generated HTML and CSS files is fairly large (approx. 200kB; even though there is close to zero real text-content in it).
When looking into the generated HTML-file, it turns out, that in each and every generated HTML-file, the complete global CSS is (in text-form) included. So it is completly redundant.
In my case: I use bootstrap as frontend framework, so all the bootstrap-css-classes (used and unused ones) are
100% included in the generated HTML-files
AND additionally: in the seperate "styles.ac6d....css" file.
To clarify: What I get after the gatsby built:
index.html 210 kB
about.html 210 kB
imprint.html 210 kB
....
style.css 200 kB
Expected Behaviour
What I would have expected after the gatsby built:
index.html 10 kB
about.html 10 kB
imprint.html 10 kB
....
style.css 200 kB
I would like to have small HTML-files without any unused CSS in it OR at least not to have the CSS redundently in 20 different files.
Questions
Is it possible to get gatsby built HTML-files without all CSS redundently included in every file?
AND / OR: Is it possible to have only the needed CSS-classes in the file (especially in the case of bootstrap)?
Am I doing something wrong here?
Additional Infos
How do I import the bootstrap CSS?
in global.scss:
#import "./node_modules/bootstrap/scss/bootstrap
in gatsby-browser.js
import "./src/styles/global.scss"
How does the compiled HTML look like?
The compiled HTML in index.html (and about.html, ...) from gatsby looks like so:
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.ac6d966df9cf852917cd.css" id="gatsby-global-css">/*!
* Bootstrap v4.6.0 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;
<!-- .... [ALL THE REST OF BOOTSTRAP CSS] -->
Edit: Conclusion for me
To inject the full global CSS in all the HTML files seems to be a normal behavior from the gatsby build process according to the comments. So just in case anybody else wonders about this gatsby behaviour...
I would go the SCSS way by importing a global styles.scss in which you only import the needed parts of the bootstrap distribution.
/*----------------------------------------------------
Overriden Bootstrap Variables (by me!!!!!)
------------------------------------------------------*/
$primary: #00B056;
$secondary: #bf9571;
$body-bg: #fff;
$body-color: #5a5a5a;
/*----------------------------------------------------
Import Bootstrap SCSS
------------------------------------------------------*/
// use this one only for debugging purposes. This is the whole package
//#import "../../../node_modules/bootstrap/scss/bootstrap";
// Required
#import "../../../node_modules/bootstrap/scss/functions";
#import "../../../node_modules/bootstrap/scss/variables";
#import "../../../node_modules/bootstrap/scss/mixins";
// Optional
#import "../../../node_modules/bootstrap/scss/reboot";
#import "../../../node_modules/bootstrap/scss/type";
#import "../../../node_modules/bootstrap/scss/images";
// add more bootstrap stuff as needed
There are of course more partial scss bootstrap packages available. Check their documentation for scss handling or check your node_modules path.
Of course you need to install bootstrap via npm/yarn to have it available. Also you need gatsby scss plugins like gatsby-plugin-sass and node-sass.
Among not using Bootstrap as #George suggested in #Logemann's answer, which in my opinion should be always avoided because tend to overload the applications and the same effect can be easily applied using own custom CSS.
I would suggest only importing the mandatory Bootstrap modules, rather than all the dependency to save some KB.
In addition, if get rid of Bootstrap is not an option I will try to look at some purging plugin, such as gatsby-plugin-purcecss to remove some duplicated styles in specific files.
// gatsy-config.js
module.exports = {
plugins: [
`gatsby-plugin-stylus`,
`gatsby-plugin-sass`,
`gatsby-plugin-less`,
`gatsby-plugin-postcss`,
// Add after these plugins if used
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true, // Print removed selectors and processed file names
// develop: true, // Enable while using `gatsby develop`
// tailwind: true, // Enable tailwindcss support
// whitelist: ['whitelist'], // Don't remove this selector
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
}
}
]
};
For some reason my Angular app doesn't use the styles I'm defining at my component's .less file. It simply ignore it.
As I am very newbie with CSS, I don't any way to debug it.
My layout is consisted by a lot of defined styles being imported by other less files. I am using trying to modify the style of a mapboxgl.
This is how the map current looks like:
And it's defined on HTML by:
<div eds-tile class="column xl-3">
<eds-tile-title>Location</eds-tile-title>
<eds-tile-actions>
<div class="action">
<eds-icon icon="maximize">
</eds-icon>
</div>
</eds-tile-actions>
<div class="map" id="map"></div>
</div>
On this component's less I have:
#import "~#eds/vanilla/variables/light";
#import (reference) "~#eds/vanilla/font/styles";
#import (reference, multiple) "~#eds/vanilla/variables/global";
#import "./map/map";
And on ./map/map.less I have a lot of theme stylization:
https://pastebin.com/b8CpakH9
My trouble is that there's some classes that are indeed being used by Angular, like this one:
.map {
min-height: 200px;
width: 100%;
height: 100%;
a {
color: #text;
}
}
But others are not, like this (you can see on image below that there's nothing related by that definition on browser's styles inspection):
.mapboxgl-ctrl-bottom-left {
display: none !important;
}
What is happening on my case?
I'm following another example that it's working fine. On the component.less file it uses:
#import (reference) "~#eds/vanilla/font/styles";
.dark {
#import "~#eds/vanilla/variables/dark";
#import (multiple) "./map/map";
}
.light {
#import "~#eds/vanilla/variables/light";
#import (multiple) "./map/map";
}
And the map.less file is the same except the by the min-height value.
The example:
You can clearly see that on this example it's using ".light .map {}" to set the style. Different that my case, that converts to ".map[_ng-content-c5] {}" for some reason. I don't have any clue of what this means.
Sorry by being so vague about the problem description. It's simply because I'm don't have enough experience even to name it.
I think I know what the problem is.
If you open your generated css file you see that there is no .mapboxgl-ctrl-bottom-left {
You will instead see something like: .mapboxgl-ctrl-bottom-left[_ngcontent...] {
That's how angular works, it adds some attributes to ensure a style only applies to one component.
You can control if styles are encapsulated or not with ViewEncapsulation
Most likely this happens because the content (in this case the map) is getting rendered with JS after the DOM is loaded and is not handled by angular itself, therefore it doesn't get the attributes.
Without any more information I can't help you any further since I don't know all the details. I don't know exactly which map you are using, maybe there is a tutorial on how to integrate it with angular somehow.
I am trying to make a global theme for a polymer app.
I've defined some variables inside a theme file like this.
#global-theme.html
<style is="custom-style">
:root {
--default-primary-color: #00BBD3;
--primary-background-color: #FFF;
}
:root paper-button.primary {
color: var(--primary-background-color);
background-color: var(--default-primary-color);
}
</style>
Then in another element I use a paper-button with the .primary class... but no .primary class style is applied.
<paper-button class="primary" id="search" on-click="onSearch">Search</paper-button>
If I just put paper-button.primary definition in a normal .css file then it works except that I obviously can't use the variables when it's not inside the polymer system which defeats the purpose.
This all works fine when in development but doesn't work when vulcanized for production
How do I define the global styles correctly so that any paper-button with .primary class has my custom styles applied from within the custom-style definition that also works when vulcanized?
----- update -----
I've looked into my vulcanized html file (that is built with the default yeoman/polymer starter kit gulp tasks) and replaced my custom styles that were flattened there with a link to the actual element like <link rel="import" href="../custom/my-polymer-theme/my-polymer-theme.html"> it works!!
Why would flattening/vulcanization cause this to happen when it's exactly the same code and how would I get around it?
---- FIXED ----
Problem was a boundary between a mixin & variable when vulcanized...
:root {
/* dark theme mixin */
--dark-theme-colors: {
color: #fff;
background-color: var(--secondary-text-color);
};
--dark-theme-secondary-text-color: var(--divider-color);
...
}
When this was flattened to vulcanized html file it doesn't work any more.
To fix it was as simple as closing off the :root bracket and opening a new one.
I am using 'Read the Docs' Sphinx theme for my documentation. In the original theme, given below
Read the Docs Sphinx Theme
the content or main layout width is designed to be mobile friendly. However, for my project I would like this to be a bit more wide. I do not know HTML and hence would appreciate if any one could give me some clues to increase the content (layout) width.
Another option is to create a stylesheet in source/_static with just the css you want, e.g.
.wy-nav-content {
max-width: none;
}
or
.wy-nav-content {
max-width: 1200px !important;
}
Make sure the directory is referenced in source/conf.py - I believe by default there's a line to do this, i.e.
# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']
Then create a custom layout in source/_templates/layout.html and do something like this to include your stylesheet
{% extends "!layout.html" %}
{% block extrahead %}
<link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}
Assuming you called your stylesheet style.css
In case someone is searching for a simpler answer...
combining the ideas from
https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/
and the above suggestions, I found the easiest way of getting a custom window-width is the following:
In conf.py, add a function that adds a custom stylesheet:
def setup(app):
app.add_css_file('my_theme.css')
In conf.py, state/adjust:
html_static_path = ['_static']
Create a _static folder/directory if it doesn't exist.
Create a file called my_theme.css in the _static folder that contains the lines:
.wy-nav-content {
max-width: 1200px !important;
}
The HTML option added in Sphinx 1.8.0b1 (released Sep 2018) simplifies the process. The recommendation in Read The Docs Documentation is adding custom css to the theme via the html_css_files option in conf.py.
html_css_files = [
'custom.css',
]
Put the custom.css in the html static path folder (Default is _static folder).
Content of custom.css:
.wy-nav-content {
max-width: 75% !important;
}
First of all I must say, that during my sphinx quickstart I chose the option of separate folder for my sources and for my build.
It's a 3 steps process:
1. Create a document for your styles:
Where?
In the same directory where my conf.py lives, (in my case source), I created a folder for my custom static files (stylesheets, javascripts). I called it custom.
Inside it I created a subfolder for my stylesheets: source/custom/css.
In this subfolder I'm gonna create my custom styles: source/custom/css/my_theme.css.
2. Telling sphinx about it
Now we have to tell sphinx to spit this document inside build/_static/css, the same directory where is the stylesheet included in the Read The Documents theme. We do that adding the following line to conf.py:
html_static_path = ['custom'] # Directory for static files.
Done. Now, if we build, we will have the RTD styles (theme.css), and our custom my_theme.css in the same directory, build/_static/css.
3. Selecting our custom theme
Now we are gonna tell sphinx to use our custom my_theme.css, instead of the RTD one. We do that adding this line in conf.py:
html_style = 'css/my_theme.css' # Choosing my custom theme.
In our custom stylesheet, the first line should import the styles of theme.css with #import url("theme.css");.
And we are ready to start overwriting styles.
UPDATE: THERE IS AN EVEN SIMPLER WAY.
1. Put your customizations inside source/_static/css/my_theme.css.
In your custom stylesheet, the first line should import the styles of theme.css with #import url("theme.css");.
This way, you don't have to worry about messing up the default styles, if your custom stylesheet doesn't work, delete and start again.
2. Add the following line in conf.py:
html_style = 'css/my_theme.css'
The solutions here are somewhat hackish. If you want to include the style, and have a css override and have it work on RTD you will want something like this.
on_rtd = os.environ.get('READTHEDOCS', None) == 'True'
if not on_rtd: # only import and set the theme if we're building docs locally
import sphinx_rtd_theme
html_theme = 'sphinx_rtd_theme'
html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
html_style = 'css/custom.css'
else:
html_context = {
'css_files': [
'https://media.readthedocs.org/css/sphinx_rtd_theme.css',
'https://media.readthedocs.org/css/readthedocs-doc-embed.css',
'_static/css/custom.css',
],
}
I have tested this myself and it appears to work locally and on RTD. Largely plagiarized from https://blog.deimos.fr/2014/10/02/sphinxdoc-and-readthedocs-theme-tricks-2/
source\conf.py
html_theme = 'sphinx_rtd_theme'
html_style = 'css/my_theme.css'
source\_static\css\my_theme.css
#import url("theme.css");
.wy-nav-content {
max-width: 90%;
}
That will be 90% width of your monitor.
I found myself repeating this customization on multiple projects I've worked on (based on the great answers here, of course 😃 ).
So I made an extension just for that, the usage is as follows:
pip install sphinx-rtd-size
And in the conf.py:
extensions = [
...
'sphinx_rtd_size',
]
sphinx_rtd_size_width = "90%"
Hoping this might simplify things for future users...
You can checkout the pypi page and the github repository.
For 'classic' Theme, The solution is as simple and as clean as :
# Add/Update "html_theme_options" like this on your conf.py
html_theme_options = {'body_max_width': '70%'}
Adapt the percentage to your taste.
Reference from sphinx: body_max_width (int or str): Maximal width of the document body. This can be an int, which is interpreted as pixels or a valid CSS dimension string such as ‘70em’ or ‘50%’. Use ‘none’ if you don’t want a width limit. Defaults may depend on the theme (often 800px).
To make the ReadTheDocs theme use the entire width of your screen you can modify the theme.css file, removing the max-width: 800px; property from the wy-nav-content class definition, like so:
.wy-nav-content {
padding: 1.618em 3.236em;
height: 100%;
/* max-width: 800px; */
margin: auto;
}
Some Notes
Source of theme.css is here:
https://github.com/rtfd/readthedocs.org/blob/master/media/css/sphinx_rtd_theme.css
On your filesystem it will be in (assuming you've run:pip install sphinx_rtd_theme):
lib/python2.7/site-packages/sphinx_rtd_theme/static/css/theme.css
To find the absolute path of theme.css on Linux/Mac you can run this on the command line (assuming you have set your $PYTHONPATH environment variable):
for p in `echo $PYTHONPATH | tr ":" "\n"`; do
find $p -type f -name 'theme.css' | grep sphinx_rtd_theme
done
The theme.css file will be minified so you can use a tool like http://unminify.com to make it easier to read.
The results:
Before:
After:
I would modify this in the css. You should search for the file theme.css (it is in the read-the-doc sources at "sphinx_rtd_theme/static/css/theme.css").
Make a copy of that file and put it in your sphinx _static dir. In that css file you can make all the layout changes that you need. (You might have to read a bit on css files if you have never worked with that.)
Hope this helps.