When i started using bootstrap, I put in a bunch of colors and fonts into their Customize page, then downloaded what ends up being compiled css (from the less).
i've since lost whatever changes i put in there, and they seem to be spread throughout the code. Since it doesn't actually include the less customizations in the download, there doesn't appear to be a way to get the values i changed back out (to upgrade)
is there a utility out there that pulls the custom colors, fonts, sizes, etc out of bootstrap.css so i can reapply on a new version of bs? or better yet re-generate the less so i can keep it separate and compile new bs.css files as they bump versions
Related
Disclaimer: There are a few questions on SO regarding CSS and debates over a single or multiple CSS files but I think this is a bit different
I have a pretty big Angular 7 app using Angular Material 2 and I want to introduce themes. Each theme will be retrieved on user login (the theme is saved on the server and cannot be changed by the user).
The question is mainly regarding whether it would be best to export a single CSS file using top-level classes (body or app container) for each theme, replacing only classes that change for each theme or lazy load a new css file on top of the main css file with only the classes that are getting overwritten.
My biggest concern with the first option is getting a huge single CSS file. The current file is already around 300kb (unminified CSS is about 11k lines of code) and with themes ranging from 200-500 lines each and there could be 10+ themes, the file can easily get double or even triple that amount.
On the other hand, lazy loaded CSS might cause the user to download 2 smaller files but the implications might be worse. For example a lazy loaded CSS file needs to be exported with separate configs in Angular CLI and the name needs to be specific so it can be loaded from Angular on login which means caching might be an issue if something changes and also no versioning (eg. theme-blah-2.17.css) is also not possible in the name of the file. Possibly other implications that I cannot think of at the moment too.
Look at how material handles themes.
Also, take a look at how teradata Covalent handles themes.
I'm new to web development and am developing a website using bootstrap. I've got quite a few .css files that involve bootstrap, an open source bootstrap theme, some style sheets for the plugins I'm using and etc. Thing is, I feel like I'm doing the same thing over and over again, putting a lot of overhead on things.
For example, this is how the styles on the web page I'm developing currently operate:
Bootstrap default theme is loaded
Bootstrap custom theme is loaded, overrides the majority of the default bootstrap css configurations
My own custom css file is loaded, overrides the majority of the custom theme css configurations
I guess it's worth mentioning that my custom css file only overrides colours and borders.
I'm thinking if the theme is open source, should I just edit the theme itself? Or should I still be editing everything within my own custom css file?
Again, I'm very new to web development so apologies if this is quite a silly question. Optimisation is key for me, though. After the development stage I will combine the CSS files using bundles provided by the Microsoft.NET optimization package.
Never modify a library directly (css, js, php etc.). What if a new version come out, fixing some bugs. You can not download it, because it will override all your fabulous work.
You get the right process right now. Import your libraries, then override them with you own file and lines of codes.
In your case, it does not matter at all the number of files you are importing, because you will combine and minify them.
If you really care about performances, I suggest you to look at the "CDN" systeme, for Bootstrap or jQuery it could be interesting and provide some good benefits.
Look at this question and the answers, they will give you some good hints : Single huge .css file vs. multiple smaller specific .css files?
I am making a website with concrete 5.7. and to edit some things i have copied the Elemental theme and created my theme. But there are two things i don't know how to edit:
1)Is there a way to define how the elements are going to be disposed in mobile version or at least at which size the autonav is going to be changed by the menu button?Also in small screens the logo becomes really small and all the elements appear disordered.(attached file shows those problems)
2) When i change the colors of my website,(settings->design->customize) where does this changes store, because for me it would be easier to use a text editor rather than doing it with the tool. I don't want to create a new color preset, only to know where these changes are stored.
Thanks for everything.!
Photo: https://plus.google.com/photos/109724001772064952270/albums/6114581190555851105 The first one is the original and the other is the mobile version.
That's actually a bit complex. In the elemental folder, there's a css folder. Inside that folder there's a bootstrap-modified.css file that is responsible for many things including the grid. As the name suggests, it is minified so hard to read and modify.
You also have a file called main.less and several folders containing a lot of other less files.
main.less gets processed and compiled into a css file on the fly, meaning when the site is visited and the css file was not generated yet or when less files were modified.
Anything you want modified you should modify in the less files.
Look for media queries "#media" to find styles specific to certain screen sizes.
how elements are disposed in mobile version is really something you need to deal with through the use of CSS. It is not really something Concrete5 has control over.
The changes to design made through settings->design->customize are saved in the database.
BUT the things you can modify are defined in the site's css file. You could simply modify the css file directly using any text editor instead of customizing design through the dashboard.
So I'm using the Bootstrap Customize and Download page to generate a version of the Bootstrap files with custom colors. I got the idea that I wanted to add some other colors (e.g. #purpleLight) to make upkeep of the site design easier, so I look through the downloaded contents the site generates, and my customizations don't appear to be anywhere, let alone somewhere for me to add others.
Here's what comes in the bootstrap.zip the site spits out:
css
bootstrap.css
bootstrap.min.css
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
bootstrap.js
bootstrap.min.js
...and that's it.
So, no colors anywhere in these files as far as I can tell. No LESS files included in the download. Am I doing something wrong? Is the site doing something wrong? Am I just not seeing something that is in fact there? To the best of my diffing abilities, the downloads seem identical regardless of the customization options I choose...
And, pending whose messing up here, what would be the alternative best way for me to customize a color palette for my Bootstrap site?
You can't add more LESS variables with the custom download tool. You can only redefine the values of the existing variables. Upon download, the tool compiles with those set variables but since you don't get the LESS files, you won't be able to add more variables afterwards, like #purpleLight you mentioned.
If you want to extend Bootstrap with more LESS variables, you have to download the full source and compile your css from the included LESS files. There's a file variables.less in the less/ folder where can add your #purpleLight.
I'm considering using less in an upcoming project but have been trying to figure out the best way to work with it while in development.
Usually when developing a site I'll write my html and css then start testing it in the browser, see how it looks, refine, reload, and repeat the whole process until I'm happy with how everything looks.
A crucial part of the process is using the Inspect Element feature in the browser to identify the piece of CSS I need to change. Usually just by looking at the line number I know exactly where to go in my CSS file.
But if I use Less (or any other method of combining/compressing my CSS) it makes the line numbers useless. I know I could use Find to search for the section of code but line numbers are much faster.
This is especially true when working on a project that involves other developers or large CSS files.
I just wondered how others deal with this, or maybe there's a better process?
Minified CSS really should only be going out to the production version of your site. When you're performing tests/changes etc, this should all be done in some test or development version of your site in a secondary server area where you can have the line-numbers version of css available. The same would go for JavaScript. On the production viewable copy, you want it minified. In development, you don't.
In any event, you should always have 2 copies of your css. The first copy is the primary source copy that is your development copy. It has all of your properly formatted styles with line-breaks in it. The other is the very latest minified version of your css that went to production. This will allow you to switch between the 2 files rapidly in the event that you need to work something out, assuming your site uses some sort of templated delivery (layout pages, master pages, or whatever).
The minified version will only be useful in the final delivery. All other needs should use the master copy. It might not be a bad idea to put a configuration in server-side portion of your site that determines what style sheet to use. That way you can simply change a configuration setting and go into a "debug" mode.
I agree with Joel - that's how I handle it. A build script minifies the CSS (and JS) before each release is FTP'ed to production. I just have a switch in PHP like:
if ($config->prod()) {
// incldue the minfied css
} else {
// include all the original files
}
Personnaly, I use an ant build script to make a production version:
it "condense" multiple css files in one
then it minify them with YUI compressor
same for scripts
(page recomposition to point to the newly generated files)
this way you divide your http request for those files, and gain some bandwith from 30% to 70% i'd say. depends on gzip also.
in my case, the dev version have:
18 css weighting 178ko
reduced down to 1 css at 96ko in the production version
I personally use tools to minify and inject the CSS into the browser each time i save my Less file. So i see each change immediately. This way it's pretty clear what just happened. I don't need the referencing line numbers that much any more.
I recently started using source maps, to see the correct file and line numbers (of my less files) when inspecting CSS in the browser again. I think that is what you are looking for. I personally don't need this extra fanciness that much.