I see that the jquery UI distribution contains 15 css files. The jquery.ui.all.css file contains two #import statements -- one for jquery.ui.base.css and another for jquery.ui.theme.css.
The jquery.ui.base.css itself contains 11 import statements for jquery.ui.core.css and then each of the widgets.
I also see a single (larger than others in the folder) file called jquery-ui.css.
Am I off in thinking that if I want all the CSS for a given theme then linking the single jquery-ui.css works but if I want to customize the pieces that I download then importing jquery.ui.all.css and customizing jquery.ui.base.css is the way to go?
Am I not understanding something?
You should use the jquery-ui.css. If you don't need certain widgets, you can uncheck them when making your (custom) jQuery UI and they won't be included.
Related
I have 2 different pages sign-in and signup both are in separate folders with their own index.css(1 index.css for 1 page) but they are somehow using each other's CSS. if I make changes in one CSS file it also reflects on another page. I have imported them into their respective pages. I am kinda new to development.. please help.
you should add a specific classname for each tag in your project same classes take same styles
add class names in different files, not make them unique the best practice right now is to use CSS Modules. Check here for more info :
CSS Modules React document
with them, you can have the same name in different files, which react make them unique automatically
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
New to sass I stuck with the problem how to enable the dynamic change of a website theme - lets say a dark and a light theme - through user interaction. The template I use as a base (coreui) has a _custom.scss file in which various variables are defined
...
$navbar-bg: #fff;
...
The values of these variables would need to be set dynamically depending on the user choice of the theme and I have no clue how to get this done. Any pointer how to implement this would be highly appreciated.
SASS is a preprocessor which means essentially it gets compiled down into regular CSS and then shipped to the client. If you want to change themes you'll have to dynamically load different stylesheets using javascript.
Case 1
In the case that you want the user to pick between multiple prepackaged themes. This can easily be done with multiple "theme" style sheets which import the various parts of your style. First import the different colors, then import the main bodies of your sass. For example:
theme1.sass:
#import 'theme1';
#import 'base';
#import 'other';
theme2.sass:
#import 'theme2';
#import 'base';
#import 'other';
Then in javascript you could remove the old stylesheet and add the new one when the user does whatever is needed to change the theme. For example inside the onclick of a button you could put:
document.getElementById('cssTheme').setAttribute("href", "/path/to/theme");
It's probably best to take a bit of care and put the element in the head of the document, but this is a good starting point. That could be made to look a lot nicer with Jquery, but I didn't want to assume you'd have that.
Case 2
In the case that you want the user to dynamically change colors of individual element colors it might be worth looking into CSS Variables. Current support in IE/Edge is crumby but it is pretty interesting. Then as the user changes the fields you could just be changing the css variable in a <style> tag somewhere on the page and it should propagate through the document.
If you want more browser support then I think really the best way would be with OK sure's answer. This one gives you the benefit of just changing a variable and not having to reset each element style that uses that variable.
You have 2 options I think.
Option 1) Recompile the styles whenever a change is made by running a command serverside to generate a new CSS file for the user. This will be potentially very resource hungry and probably not recommended.
Option 2) Take the variables you want to be accessible, find where they are mentioned in the bootstrap source and either generate a file or just inline these styles after the stylesheet is included in the template.
So for your example here, depending what language you're coding in, or templating (this is a twig example) you're using, you could inline the following in the head of your template:
<style>
.navbar {
background-color: {{ user_theme.navbar-bg | default('#eeeeee') }}
}
</style>
It's tough to tell you exactly how to do this without knowing what frameworks/languages/infrastructure you're using.
If you were using Twig & PHP for example, you could send a user_theme object to the template, and have an include file which contains all the styles that need modifying with default values as above.
I am looking to take my styles.less file (which currently contains 3000 lines of stylesheet code for my entire site) and break it apart into multiple stylesheets, i.e. navigation.less, buttons.less, footer.less, etc.
I suppose I would then #import all of these individual stylesheets into a master stylesheet, such as all.less which would compile/minify down to all.css
One issue I am experiencing with breaking this styles up into individual sheets is that variable references are broken. So for example, if I port over my buttons CSS to buttons.less, my buttons CSS contains references to LESS variables that are defined in styles.less. How do I fix this issue?
Is there a better approach to modularizing my CSS code with LESS? 3000 lines of LESS code is getting completely unmanageable for one file and I need to break it up.
Most people handle this by having two particular files, something like variables.less and mixins.less.
Then if these are needed in the modules, you use import-once instead of just import (for versions prior to the at present upcoming 1.4; at which time import by default will act as import-once). You use this in both the module files and in your all.less. That way when they are all brought together inside the all.less file, the imports only occurs once at the top of the final file, and not for each individual module file loaded.
i want to create some css styles for my Django templates. Each view will have a css associated, but there will be zones that are not associated to any views in my template.
How can i load the css files? is there enough having them declared in the Media of my view, and loading them in the header of the html?
Also, is it a correct approach to have styles associated to the divs that are not associated to a certain view?
Thanks!
If you use a word view for a typical django view (a method) it is not good idea to create separate css file for each view (unless you have very specific application).
In general you need to create you css files in such way that:
general styles that can be applied in many templates are not repeated in multiple css files
it is easy for you to manage styles in couple of css files
There is no strict guideline to create css file per view or css file per template in Django as far as I know.
Basically pointing to some css file in head, which contains styles appropriate to a template is enough here. Of course you need to make sure that you provide correct path to this file.
You can make one general css with styles that are used by most of your templates and a series of specific css files that are valid only in some specialized templates.
I also advice to take a look at django-compress if you want to go with your site to broader audience - this app makes your static files (like css) smaller and also it helps to concatenate group of css and js files. This has some positive impact on performance without decreasing readability of your code.