I am developing a PWA using Angular. I am using a centralized color file where I store the primary and secondary color for the app in scss variables.
color.palette.scss:
// other code
$treadwill-pre-login-primary: #2a3b3d;
$treadwill-pre-login-app-foreground: #f4bb56;
// other code
I want to refer to these variables from the manifest.json file.
manifest.json:
{
..
"background_color": $treadwill-pre-login-app-foreground,
"theme_color": $treadwill-pre-login-primary
..
}
Relative file structure:
|
-- ...
-- /app
--index.html
--color.palette.scss
--manifest.json
-- ...
Is there a way to do it?
Related
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
}
}
]
};
How do I ignore this error. I have used the id attribute for some tags in order to reference them by id in javascript, but it shows this error:
CSS id selector '...' not found.
Please tell me how to ignore or disable this error.
maybe your css is not formatted properly.
try:
<style>
#phone {
your css here;
}
</style>
You need to make sure you mark the code with # to show that it's an id and not a class or something else.
Update: First section of answer no longer valid as of the lastest updates since original post which removed the css.validation option. see
If you are using the HTML CSS Support extension by ecmel, you can go to .vscode/settings.json and add
"css.validation": {
"id": false,
"class": false
}
This will turn off css validation for class name and id.
More information on this at the Visual Studio MarketPlace for this extension under Selector Validation here or the Github repository readme Selector Validation Section
Note:
1) Also don't forget to add a comma after the setting that comes before (as JSON format is comma separated).
Example:
{
"java.codeGeneration.generateComments": true,
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
"src/main/resources/static/css/styles.css"
],
"css.validation": {
"id": false,
"class": true
}
}
Sometimes you need to restart / close and reopen vscode after saving changed to the file for them take effect.
There is a way to configure styleSheets. This next bit is taken from their documentation see Additional Styles Section:
Additional Style Sheets
If it is not possible to specify local or remote styles in HTML or via
template inheritance, they can be specified in VS Code settings per
workspace folder in .vscode/settings.json and will suggest for all
HTML files within that workspace folder:
.vscode/settings.json
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
// (2)
"/site.css",
// (3)
"site.css",
// (4)
"./site.css"
]
hello all experienced Sphinx users,
since a few days I'm performing my first experiences with Sphinx for building a small documentation site. I'm playing around using the Alabaster theme. When I try to place a logo in the left upper corner it only works with using an entry in the build configuration file 'conf.py' like this:
html_logo = '_static/images/PJS-small.png'
when I try to use the Alabaster theme configuration like this
html_theme_options = {
'logo': '_static/images/PJS-small.png',
'logo_name': True,
'description': 'one more logo'
}
no logo appears above the sidebar.
I'd like to use the theme configurations because I'm able to place a subtitle and other things like that.
Does anyone have an idea how to use the Alabaster configurations like it is documented?
Thank you very much for helping.
As per the Alabaster installation instructions,
you have to add an html_sidebars setting to the conf.py file:
html_sidebars = {
'**': [
'about.html',
'navigation.html',
'relations.html',
'searchbox.html',
'donate.html',
]
}
This causes Alabaster’s customized sidebar templates to be loaded.
Then you can specify the logo path like this:
html_theme_options = {
'logo': 'images/PJS-small.png',
# etc.
}
The path is automatically prepended with _static/.
In the theme configuration (theme.conf) file, you need to use the following syntax:
logo = images/PJS-small.png
logo_name = true
description = one more logo
Note the absence of the _static directory in the logo path (it is prepended in the theme's HTML template) and the lowercase boolean.
Still, you can set any theme configuration variable through the html_theme_options object in the Sphinx project configuration file (conf.py).
There's a new project for, what it seems to me to be, a way to vulcanise elements in bundles, web-components-shards.
I'm interested in the gulp version, gulp-web-components-shards.
Both projects lack comprehensive instructions in the README, how the file structure should be, what the output should look like and how to use it, or how I can declare which elements are shared between bundles.
Considering this use case:
A sample File Structure
The Polymer elements
./app/elements
shared-element-1/shared-element-1.html
shared-element-2/shared-element-2.html
homepage-element-1/homepage-element-1.html
homepage-element-2/homepage-element-2.html
contact-element-1/contact-element-2.html
contact-element-1/contact-element-2.html
Note: shared-element-1.html & shared-element-2 are used in all routes
The routes:
./app/homepage.jade
./app/contact.jade
How should I set-up my gulp task so that is splits bundles I can use like so:
/* homepage.jade */
link(rel='import', href='/dist/shared-elements/shared-elements.html')
link(rel='import', href='/dist/homepage-elements/homepage-elements.html')
/* contact.jade */
link(rel='import', href='/dist/shared-elements/shared-elements.html')
link(rel='import', href='/dist/contact-elements/contact-elements.html')
Note: I've already opened an Issue - Still I think it would be nice to have an example usage snippet/explanation here as well.
In that web-component-shards seems to be a deprecated/abandoned, I'd take a look at Polymer CLI where this is a little more laid out in the documentation available: https://www.polymer-project.org/1.0/docs/tools/polymer-cli#app It allows us to structure the build of our app in a polymer.json files shaped like:
{
"entrypoint": "index.html",
"shell": "src/app-shell/app-shell.html",
"fragments": [
"src/view-one/view-one.html",
"src/view-one/view-two.html"
],
"sources": [
"src/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}
For you the most important parts would be the "fragments" as it would structure most closely to the app you've described. Then you could use the hooks specifically set up in the CLI to process your JADE and what not as well.
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.