I am making a hybrid ionic phonegap app.I am using sass to define color variables.
As part of my app I need to be able to change the colors depending on what is defined in an external database.
I know how to connect to the server in my controllers to return Json data.
Is there anyway I could connect to the server using HTTP requests in my sass file?
So that it is possible for the app colors to change depending on what is saved in the database?
Any help is much appreciated.
Short answer is no.
You should be converting your SCSS to CSS so you have whatever you set.
A way that you can achieve something similar is by utilising SCSS themes. How this works is to simply overwrite all your colour vars with different themes.
$black: #000;
$white: #fff;
$red: #e2061c;
$gray-light: #c9c8c8;
$gray: #838282;
$gray-dark: #333333;
$blue: #253652;
You could then use angular (or whatever framework you are using) to switch out the style sheet depending on which theme your users have chosen.
Angular -
<link rel="stylesheet" type="text/css" ng-href="{{user.theme}}.css">
SCSS -
Folder structure
|- _scss/
|-|- _base/
|-|-|- _config.scss
|-|- _layouts/
|-|-|- _l-grid.scss
|-|-|- _l-default.scss
|-|- _modules/
|-|-|- _m-accordions.scss
|-|-|- _m-teasers.scss
|-|-_themes/
|-|-|- _light-theme/
|-|-|-|- light.scss
|-|- application.scss
This atrical goes into great detail on how to theme your applications
Related
I have a question.
I am making an Universal React App and I understand the concept.
We take the best of the CSR and the SSR method to make a commun code for the front-end and the back-end.
We also split the element of a web page (HTML, CSS and JS) to the side who manage it the best.
So I did like this: the HTML is rendered by the back end and the CSS and JS by the front end on the browser.
That is on development mode because i use Webpack for bundle management and on this mode, i use a plugin to inject the css directly to the DOM by style markup (style-loader for HMR support)
But here's the trick, Webpack recommend extracting the css files to separates files on production mode. (by html-webpack-plugin and mini-css-extract-plugin)
So I need to inject the separate css files to the DOM by the link markup.
My question is doesn't it break the whole concept of Universal (Isomorphic) app by giving the CSS to the back end?
What is the configuration of an Universal React App on production mode?
Thanks in advance for your response.
Question
How to quickly test different fonts in a React project?
Overview
I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:
body
font-family: Roboto, Helvetica, Arial, sans-serif
font-size: 16px
Desired outcome
I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.
For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.
What have I looked at?
I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.
I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how.
Thanks for any help showing how I should approach this.
Let me kick my answer off with a warning:
Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.
Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic #font-face declarations, or Kyle Matthew's typefaces packages, for example.
Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.
1. Get a link to embed your fonts client-side
First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:
https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat
2. Embed the fonts on your Gatsby site
To embed the link on your Gatsby site, you have two choices:
using <link>
You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.
In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
<HelmetDatoCms
favicon={data.datoCmsSite.faviconMetaTags}
seo={data.datoCmsHome.seoMetaTags}
>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using #import
You can import a remote font in CSS (or SASS):
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.
In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.
3. Use the fonts in your CSS
Third, no matter if you chose the <link> or the #import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.
You'll want something like this:
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3 {
font-family: 'Great Vibes', cursive;
}
Creating an app with the angular-cli, if I link the Material theme from my index.html (following instructions from https://getmdl.io/started/):
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-amber.min.css">
The complete code is in a github repo on linked-theme-bad branch where the components are not correctly styled with the theme:
However, if I follow the exact instructions in the angular-cli doc to include Angular Material and import the style in styles.scss:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
The complete code on basic-theme-works branch) where the components appear correctly:
My understanding is that the import merges into a single stylesheet and the link in the HTML page will make a separate request for the style theme. The question is why doesn't the linked style sheet approach work.
By the way, I'm running the app with ng serve but this is an isolated example from another app which also seemed to fail in the same way with files that were built with ng build.
You're importing the CSS file from the wrong source (material-design-lite). (and by the way, you're also looking at the wrong documentation. See the link below for the correct docs)
From material.angular.io:
Alternatively, you can just reference the file directly. This would look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
More Information on using a prebuilt theme
I'm trying to find a solution to this problem:
I'm using a template with different css includes based on page, ex:
Login uses login.css
Home uses home.css
If I load both css the login page is broken, because styles are overwritten by home.css
So I need to load or require login.css if the route or the component is Login and the other one when is Home.
If I load both webpack builds a global css with both files, and everything is broken...
I tried to require the css in componentDidMount, but I think that is not the way :)
Thanks in advance
It sounds like both these styles are quite specific to the pages, so why not simply namespace them?
Within your templates, have a .login/.home class, and use this as the namespace within the css. If you're using sass, this is as simple as wrapping all the sass in the class. Otherwise, you can go through and add the class to the beginning of all the elements/clases.
First of all, you shouldn't have any problems if you use different css classes for your views and just style the elements based on those classes.
The best way to load css in react is to do it by components, if you got a component login.jsx, in your styles folder (or whatever folder you're using to hold your styles) create a sass partial _login.scss and add the css selectors and styles for that given component, and do that for every component in your react application.
Then you just include those partials into a main.scss file and that's the file you want to load into your react app.
Here's an example of a main.scss file with some sass partials.
#import 'base/variables';
#import 'base/defaults';
#import 'components/login';
#import 'components/home';
That's a good and clean way to work with styles in react, of course you will need to configure your webpack in order to get sass to work in your application.
Take a look at this and this for more info.
This is a more generic approach to combine CSS files, without depending on technologies like SASS or reactjs.
I assume, if you combine the two CSS files, you are using Grunt or similar tool, to automate that task. So automatically updating the CSS files should be OK for you, even though they are from an external source and you want to use updated versions without making manual changes.
I also assume, you are using classes to style your pages, so there are no tag based styles in your CSS. Because you cannot rename the tags in the CSS file without braking it or make larger changes to your code.
If my assumptions are true, you could use something like grunt-css-prefix. It can add prefixes to your CSS classes for the login page, like in this snippet.
Original CSS file content:
.foo,
.bar,
h1 {
display: none;
}
CSS file content after running the Grunt script:
.login-foo,
.login-bar,
h1 {
display: none;
}
Just use the login-foo like class names in your Login-HTML and you are good to go.
For more details on how to use grunt-css-prefix, please have a look at https://www.npmjs.com/package/grunt-css-prefix.
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