The default font is a bit large for my target application.
I saw that loadTheme could change the primary theme color, but is there a way to change the default font size across all components?
IFontStyles has a variety of sizes specified, so is there a way to set the font size for all the fabric react components to "small" (FontSizes.small)?
I have tried to set the css font-size to something smaller directly in the outer containers and inside the Fabric component, but the components still seem to render around 14px (ms-font-size-m) once rendering goes inside the Fabric component.
The theme code is fairly confusing to me but it looks like fabric-react uses a combination of fabric-core scss, fabric-react scss and glamor (runtime js->css) to generate stylesheets as needed and return the classnames to react code for className property. There does not appear to be use of inline styles.
loadTheme can override font-szie.
Related
If I create style sheet for all my components like this (so 1 component = 1 stylesheet file) would this approach to writing it make some performance issue?
My goal is to have access to theme properties but if this approach can make performance issue in the future I need to consider another approach.
import { StyleSheet } from "react-native";
import { useTheme } from '#react-navigation/native'
const dashboardStyles = (props) => StyleSheet.create({
progress: {
backgroundColor: props.colors.background,
},
});
function useStyles() {
const { colors } = useTheme();
const styles = React.useMemo(() => dashboardStyles({ colors }));
return styles;
}
export default useGlobalStyles;
Performance issues may come in several shapes and flavors depends on your current situation. In our case I think performance issues could be in the following categories:
Size - a large compressed application file may result in higher loads in terms of bandwidth for both client (waiting longer for app to start) and server (more resources required which usually means a higher cost)
UX - we want to deliver the best user experience possible meaning actions perform by user will be processes as fast as possible
Let's start with the easy on - UX. Since the react styling commands are injected to the browser's DOM as styling properties the performance gap between this process comparing to simply use fixed css files should be insignificant. So at least here we are certain that the user experience will not be affected.
When we are talking about size (which has an immediate effect on bandwidth) - we aim to make our app bundle as lightweight as possible. Our endgame is a working application that will also be as lightweight as possible.
From my experience with react you can reduce the size of styling follow these steps:
For each component create 1 css file containing the fixed styling (from some odd reason many developers use react to apply static styles) and set only the dynamic styles in your react file (very similar to the code you've already posted in your question)
When several components use the same basic style (or when you feel you are copy-and-paste styles across components) - create higher-level stylesheet files that will be re-used. This will help you to write less and use more and therefore - reduce the total size of your app bundle file
These should keep you app as lightweight as possible meaning less bandwidth and less memory consumed by your end-clients browsers (less memory allocations and more references to shared styles).
Technical note: please use general styling commands in your css files and more specific commands in your code (e.g. background or border when using fixed style and backgroundColor or borderWidth when using synamic style in your code). This will help you to better ensure that your dynamic style will always overwrite the fixed default (if there is any) in your fixed styling. More information and useful operators on this topic can be found here
I would structure my files as such:
theme.js
contains only styles, definitions of color palette, font types, and
sizes, widths and heights, things that'll be used globally, I use react-native-paper theme on this page.
commonPageStyles.js
contains only styles that are repeated in multiples pages, such as
page header, page description, anything..
ComponentX.js
the component that is reused with their style on the same page, e.g
a submit button
MyUniquePage.js
the style that is unique to this page
Very important note: a lot of the styles I declare end up being unused, and I lose track of them, and the style files'd only get bigger and uglier. so what I ended up doing. Is if the styles file doesn't need to live on an independant .js page, I'd include it in the component page and then use this VS code plugin "remove unused styles by xixi" to clean the unused styles page.
Don't Repeat Yourself(DRY) is best for boost your performance.. Yes, your approach of creating a globalStyles files and import that file and using it in your project is a good concept..
I would only suggest that while using your globalStyles don't
import allGlobalStyles from '../GlobalStyles';
Instead use
import {progress, errorStyle, pannelStyle} from '.../GlobalStyles';
which will only import a section of code to your component rather than importing entire file...
This is also useful while importing from npm packages too...
Like
import {isEmpty, isObject} from 'loadsh';
I'm the beginner of react-native.
I'm going to provide change global font size function in my app.
User could change the font size in setting page, them the whole app font size will be adjusted.
After doing some research, it seems can't do it. So my idea now is create multiple global style sheet and apply it base on the user setting saved in storage.
But I found that it seems not work, because after create global style sheet, it need to import at the beginning of the app page.
How can I apply change the app global style or font size in react-native?
You might want take a look at useContext hook, it will give you a good way to handle app global style, suck as light or dark theme, your case, font is also not a problem.
Another way is using react-redux, create a global state for your font, and all your component will listen to the font value stored in the store.
Let's keep it abstract. How I would do it: create and assign a theme for your app where you define classes with different font-sizes etc. Save the preferences as classes in the async storage. After loading the up retrieve saved preferences from async storage and set those to your components as classes. Job done.
I am using vue-apexcharts in my vuejs project. I have around 15 pages where I am using charts and I want to change the font family everywhere. How to achieve this generically? Is there any general approach to change the fonts all together?
https://apexcharts.com/docs/options/chart/fontfamily/
This is the example where it's written how to change it in a specific way.
You can set global options just after you've imported and registered vue-apexcharts.
import VueApexCharts from "vue-apexcharts";
Vue.use(VueApexCharts);
window.Apex.chart = { fontFamily: "MuseoModerno, Arial, sans-serif" };
This will then be applied to all charts.
Of course, remember that you'll also need to make sure that the font is globally available in your Vue project by for example importing it.
So I have a site and I'm using Bootstrap 3.3.7 and sass. I'm being asked to have a "dark theme" page and the ability to set different types of color themes based on certain pages.
There might be a page with white-label branding, or a dark theme, or a blue theme.
I'm being asked to keep everything else the same.
I'm thinking about having those pages add a class to the body tag that changes the CSS colors, but what are the best practices for changing all colors in a bootstrap 3.3.7 sass style controllers.
Bootstrap colour code are present under variables file(bootstrap/**/_variables.scss) were we can play on it.
But when it comes to theme development best way to handle the colour is we can have separate scss for colour code, where the folder or file structure can be followed like bootstrap or as per the developer style.
I am using a bootstrap theme for my application in Xpages (using the Xpages Bootstrap theme included). The size of everything seems way too big to me; this app is for web (and maybe the Lotus XPiNC client.
How can I change the size without changing modifying any of the Bootstrap css?
You can override the default font size with some CSS, by changing the font size set on the body element:
body.xsp {
font-size: 14px;
}
But that won't cover everything. There are likely to be a number of other font sizes you need to override for other elements, e.g. buttons
.xsp .btn {
font-size: 14px;
}
This will be noticably easier to do using Bootstrap 4 when it is released. In v4 there is a font-size set on the html element (default is 16px). Then every font-size set in the rest of the Bootstrap CSS uses rem values (root em). This sets the font-size of everything relative to the font size of the root html element. Thus you can easily change the font size throughout your application by making one CSS change to alter the font size of the html element. This will also allow for responsive typography, so you can scale your font size up/down depending on the device size. Check out this link for more info about this feature in Bootstrap 4; look for the "New Unit (rems) for Typography" section.