I have a JSON file which will bring the style details .i.e. hexadecimal values of various buttons, font-size etc.
Developing the application in ReactJs.
And I want to use those style values in a custom class in React-Bootstrap.
But to define a custom class, a css file is needed.
Question: Any way to define a variable in CSS file which brings the values from JSON?
Any way to define a variable in CSS file which brings the values from JSON?
No, this is not possible with css3.
I haven't worked with react but can't you pass your styles object to component?
If this is not the case why not to use inline style, I don't think performance hit of inline style is that relevant these days.
As a last option you could generate temp file from json and dynamically add it to page.
Related
I'm coming from a Laravel blade background where I can slice a bigger chunk of my codes out, and import them back in one by one like so, and it will behave the same;
Ex.
My codes
https://www.bunlongheng.com/raw/NzgyNGE3MjktMDQ2NS00Y2Q5LTkzNDEtZmUwMDQxMWRiZGI0
Sorry: I tried to post it here, but it's too huge for snippet allow, please see my current codes on above link.
My vue file now is reaching ~2000 lines of codes now, and it' getting very hard to work with.
Can someone please show me how to slice out some codes and import it back in and achive the same functionality?
As per my understanding you want to reduce the number of lines of code from the single file. If Yes, I am here giving you an example of how you can do that for CSS styles. For JavaScript/Components, you can achieve by breaking the large feature/functionality into chunks by creating a separate utility/components.
Styling with external CSS files
You can include external CSS files and apply them globally to your app. Let me explain with an example, You have common theme for the application then you can add all the styles for that theme in a theme.css file in the src/assets directory. Files in this folder get processed automatically by Webpack.
Next, in your src/main.js file, import the theme.css file like so :
import '#/assets/theme.css';
The theme styles should be applied to the app now. Hence, no need to add the styles inside the components separately.
Why scoped styles ?
If You want to add any customization in the style at component level then you can add scoped styles. To keep the style definitions close to the component we can add a element inside it with scoped attribute.
<style scoped>
</style>
As per the author comment - I have issues with similar HTML codes and when I don't know how to move them over properly and include them back in without missing variables errors
Best practice is to construct your application in small, modular blocks of code. It makes the application easier to update as it grows in complexity. You can create a small .vue components which contains their own HTML <template>, <script>, and <style> tags and can be implemented in other components instead of putting whole functionality code into a single .vue file.
The answer would be to extract sub-components from your big-component and import them in your big component to make it shorter.
A good rule of thumb in programming in general, is that if code repeats it can be modularized. In the case of Vue, this can be achieved by putting repeating pieces of code in components.
The parts that slightly differ can be made into props that you can pass into these components.
Another rule would be that if you have a huge v-if/v-else that both render huge parts of code under each, the contents under each can be extracted as separate components.
I would suggest you read more of the following:
https://vuejs.org/guide/essentials/component-basics.html
https://vuejs.org/guide/components/props.html
I would like to develop a Javascript code which would get data from a Web Service and render html for displaying details.
Users need to just place this Javascript on any page on their Website to use this feature.
The problem I will face is that the html generated by my Javascript will have a different CSS to that of the Website which is using my Javascript. Is there any way that the html generated by my Javascript would inherit the CSS of the Website where my Javascript is being used.
If you are creating a script to run on any websites, you should expect the developer of that website to work on the styling of your generated HTML. Just simply display the HTML there, maybe with basic class names and styles.
A lot of cookie legals displaying that way on multiple websites.
Example: https://policy.app.cookieinformation.com/6f7f86/cubiscan.dk/declaration-da.js
That script is to put on any websites, to display few tables of cookie usage information.
If you want to overwrite their CSS, use iframe or inline styles, inline CSS.
I have a .NET core application with a jquery pageguide in it. The colors of the application, for example the menubars, can be configured by the user.
To achieve this, I add a HtmlString with a <style> tag from a Controller. In the tag are the user specific colors in classes.
var primaryColor = "rgb(28,67,104)"; //will be configurable
return new HtmlString(($".primarycolor{{background-color:{primaryColor}; }}"));
I want to make the colors of the jquery pageguide configurable by the user, but the color values in the pageguide.css file can't obviously be modified. I read about LESS, but i cant (and shouldn't) compile it on runtime.
How can I add dynamic color support to the pageguide? Is there an relative easy way to do this with js or server side code?
Read the users input by sending it to your .NET application
when rendering your page, overwrite it by generating a CSS-file or <style> tag which you can then implement on your HTML file. That CSS overwrites the default colors.
I want to create a site like any other. I want the "thing" at the top (home downloads and stuff) to be on all my pages. Do I need to copy and paste the same code over and over again?
put the common part in your header/some specific file and use ,since you will be using header/some specific file on all pages so the desired content will also be loaded.
Learn Psd to html conversion For batter understanding the divs and styles modification and customization.. your divs and tags can be easily maintained with your stylesheet by giving id and classes you can also give one dive multiple classes and ids,
you are talking about master page i think
that is one in style and in that page you're showing other page, likely we can say one template page and many functionality see this and
see this
As far as I'm concerned pretty much all the intelligent options for solving this problem are mentioned in this question
Use a server-side template (e.g.php), use a client-side template (e.g. handlebars), use javascript, or you could use a static site generator like Jekyll.
I have two div in my html file and I am using two external javascript files.but the problem is when I am using both the js file together I am not getting the required functionality.so I want to restrict the use of js file to particular div
e.g: div1 should only use js1 file and div2 should only use js2 file so that no clash happens and I get the required functionality.
I am making a web app which is using lot number of widgets and these widgets are getting loaded from the database.there is one admin panel where a admin can add widgets.i am fetching all the widget's code from the database in a same page.so in future it may happen that after adding lot many widgets and there related js files they clashes and create problme.so i want to restrict there use to certain widget
Within a page (browsing context), there is only one JavaScript environment. To get the kind of isolation you're referring to, you'd have to create a separate browsing context by using an iframe or similar.
no what you are saying isnt possible. but what instead you can do is use diff scope for diff javascripts. If they are your own written js files
1. then simply change all the variables to be the properties of a global variables.
2. do not be dependent on the window variable
3. if your are using DOM manipulation using class names / tag names / attribute values which are common for both of the divs change them and also change the respective value on the div. So that you can access them sperately.
if they are one of the popular js libraries like jquery / _js / backbone
use the default no conflict option provided to load separate versions and then use them separately on the two separate divs.
I am not sure if you are using jquery or plain javascript.
if it is jquery then you can use jquery noconflict.
Create separate aliases to use jquery for div1 & div2
<script>
var div1Alias = $.noConflict();
var div2Alias = div1Alias.noConflict();
jQuery(document).ready(function(){
alert(div1Alias( "#div1" ).html());
alert(div2Alias( "#div2" ).html());
});
</script>
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
How do I implement JQuery.noConflict() ?