I am working on a site (React via create-react-app, Sass for all components) whose CSS and data are driven by the URL. The URL is made up like so:
www.mysite.com/:brand-:locale
Each of the 4 brands has its own colors/fonts/bg images/etc. Each locale has its own data file as the site is translated in several languages. Each locale may also have unique styles.
Examples:
www.mysite.com/brand1-en (brand1 styles, English content)
www.mysite.com/brand1-fr-ca (brand1 styles, French Canada content)
www.mysite.com/brand2-pt-br (brand 2 styles, Portuguese Brazil content)
www.mysite.com/brand3-en (brand 3 styles, English content)
Right now my project is built on the following paradigm:
All brand-locale combinations share base (un-branded) CSS (defined in /src per component) as the structure of all the sites is the same
Each brand has a Sass file in /public with brand-specific styles
Each locale has a Sass file that imports the appropriate brand Sass file, and can also have its own unique styles
I am using node-sass to compile Sass after a build runs, and outputs each locale's CSS into its respective folder
The app reads the URL and programmatically adds a reference to the appropriate locale CSS file to the end of at runtime
Each locale has its own data file in a respective folder in /public which gets fetched when the app loads (no issues here, just FYI)
I would like to find a better way of styling the sites based on URL, but I do not know-how. I get FOUC between the app loading (showing un-branded styles) and the addition of the CSS tag to . It seems that there should be a way to have brand variations in components, but I don't see how this would not force the CSS for all brands to load in the browser at once.
Does anyone have any thoughts?
Related
I'm new to Gatsby and I started a project using a starter, Gatsby-starter-ghost. The starter comes with the Casper theme, and now I want to replace Casper with a new theme or build a custom theme.
I can't figure out how to replace Casper or even find where it is in the project folders. There is a lot of documentation available on Gatsby themes and starters but I can barely find any documentation for gatsby-starter-ghost. I've dug through the node_modules and src folders and can't even find where the Casper theme is located. If I install a new theme with npm and put the plugin in the gatsby-config file it breaks my project and I get GraphQL errors galore. I've read that themes should usually be in the content folder, but my content folder contains nothing but two empty folders.
Here is my project structure:
How do I replace the theme in the gatsby-ghost-starter?
Gatsby Themes use a concept called 'shadowing'. You can replace any of the default files for the theme by placing a file with the same path and name in your content folder. This is probably why your folder doesn't have any theme files, the starter is just using all the defaults.
That said, looking at gatsby-starter-ghost, it doesn't look like it's using a Gatsby Theme at all, so shadowing doesn't apply.
If you look at gatsby-starter-ghost/src/components/common/, it has various files which define the components that are being used. Most notably, Layout.js is setting out the base structure for every page, and imports a CSS file from ../../styles/app.css.
This CSS, those common components, as well as the various template files in src/templates are what is defining the HTML structure of the pages, and the CSS that those use. If you adjust those, you should be able to change the design to suit your needs.
Start by looking at app.css and adjusting it a bit, see how far that takes you. But you may need to update the components if you want to introduce new classes or change the HTML structure.
I wanted to play with all different types of styling methods in GatsbyJS. In my project, I have three types of implementing stylings, global CSS, CSS Modules and CSS-in-JS(styled-component). Everything works as expected. But, when I build the project with gatsby build and open one of the index.html where I did CSS-in-js I see that there is a CSS file in data-href tag inside. When I open it, It contains all the CSS stylings of my project. But I didn't even import it to the component where I did CSS-in-js. Why would something like this happen? Why stylings from module.css are being referred inside this file.
A quick note: Since I do not have enough reputations, I cannot create new relevant tags related to ORY Editor. I'm not sure whether this question will reach the right people.
While using react-page currently, we can get a HTML string output by using:
ReactDOMServer.renderToString(
<HTMLRenderer state={editorValue} plugins={plugins} />
)
However, this exports the HTML tags with pre-defined "class" names, which are then styled using the CSS files imported in the code.
I'm trying to implement something, where I use react-page/ORY on a web-page. Export the HTML, and render this is a mobile app, using react-native. CSS files cannot used in mobile app development.
Now there is no easy solution to when it comes to CSS files of react-page/ORY, because all the CSS files are distributed all along the node-modules in separate folders.
I even tried:
- putting a bunch of these CSS files in a single folder,
- creating a .html file, and importing these CSS files in that .html file,
- opening this .html file now on browser clearly shows CSS files weren't applied, maybe because of distributed nature of CSS files.
So, any ideas on getting inline-styled HTML as export from react-page/ORY?
I have a simple project working nicely using JSX / React / Gatsby.
I have a pre-existing page (think landing page) in HTML in another project, quite complex, nicely styled using Bootstrap 4, let's call it LandingPage.html and an associated LandingPage.css.
I would like to add the landing page to my Gatsby site. So that for example when navigating to localhost:3000/LandingPage.html the landing page gets shown, properly styled etc.
I am not clear whether I have to fully convert my pre-existing HTML into a react component / JSX?
Or whether I can just serve the LandingPage.html (and associated styling files) by placing it somewhere sensible in my Gatsby project structure?
Or whether I have to create a react "wrapper" that at "run time" reads in the content of LandingPage.html and LandingPage.css?
Note: I've tried just putting the LandingPage.html and LandingPage.css into the /public folder and actually that does work! So maybe I've answered my own question. But is the the right way to do it?
As of Gatsby v2 (don't know about previous versions), it is maybe more consistent to add the file to the /static folder.
According to the docs, the /public folder is meant to be generated automatically when building the site and should be added to .gitignore.
Files added to the /static folder will be copied to /public when building the site so it should have the same effect. More info here.
In my Extjs app I have kept custom.css file in the resources folder of the root for testing and in the build- resources folder. And add the css path to two both index.html files(test and build). But whenever I make it to convert to build production, index.html file overwrites and custom.css file finds missing. Somewhat problematic it is. I know that this is because I add this file externally. But Is there any permanent solutions to fix this, without violating the Extjs app structure ??
You can add your custom styles via scss. There are several articles around the web about styling your ExtJS app.
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
http://www.rallydev.com/community/engineering/guide-custom-themes-extjs-4 [dead link]
If you only want to add your single custom css file - which i do not recommend - you can do things like that:
Include an existing CSS file in custom extjs theme
http://www.sencha.com/forum/showthread.php?270694-How-to-include-custom-components-CSS-in-build-CSS