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?
Related
I tried to take a look around here and on the Liferay forums but I couldn't find a documented solution to my issue.
I am currently using Liferay 6.2 and am very new to the environment. My issue arises from CSS #import functions. Our architecture is one main stylesheet with all supporting stylesheets imported into this document. Those CSS documents in the same directory present no issue - for example #import url(document.css);. We do have a master stylesheet located in another portlet and all other portlets reference this stylesheet with an import call similar to #import url(../../../../folder/folder/document.css);. When using this command, the CSS in this file isn't imported into the portlet. If I place the master stylesheet in the same directory as the CSS for that portlet and adjust the import path accordingly, the stylesheet is imported without any issues. I can also place it one directory up such as #import url(../folder/document.css); and the CSS is imported correctly.
Several team members do not have this issue, while several members do experience this issue - all running the same version of Liferay and on identical machines.
I'm sure my question is fairly vague due to me being new with the environment so if I can clarify or provide any additional details, please let me know!
If all of the portlets reference the same CSS file they shouldn't: Just assume that the necessary CSS is deployed through the theme and add it to the theme once. This is way more elegant than delivering it multiple times, relying on relative paths to not have changed, and potentially not being available (at runtime, nobody guarantees that an appserver even unzipps your warfiles).
Through enforcing the assumption that you're running in an environment that has proper styling, life will be so much easier.
I am optimizing my site and I am following GTmetrix's suggestion to inline a small amount of css. Only I can't find where it is calling for this. I can see it when I view the source but when I check my different index.php files I can't seem to find where to make that edit. Any thoughts? Thanks. My site is www.destinychurchjacksonville.com and the css in question is:
http://www.destinychurchjacksonville.com/media/com_acymailing/css/module_default.css
Like I said, I can see where it calls for the file when viewing the source but my site is built in Joomla which is php.
I've had really good results with JCH Optimize. It's a moderately complex extension so plan on spending time reading the docs and testing the options.
It will combine multiple CSS and JS files and you have some options to inline the CSS.
If you can get most of the extension options working you'll be impressed with your grading improvements. For me, the big gains were from combining the multiple CSS and JS files.
Good luck!
The css file you are referring to is called from within other ccs files in the same folder located at /yourjoomlarootfolder/media/com_acymailing/css using:
#import url("module_default.css");
which seems to be called from mod_acymailing.php located at /yourjoomlarootfolder/modules/mod_acymailing depending on the acymailing skin/theme you are using
or at least that's what i found in a fast search i did on one of my sites using acymailing.
I am making a static website with Flask and using the flask-bootstrap extension to simplify the front-end development. I concurrently have been learning Rails and so I understand that there are a few of these languages that compile down to CSS (LESS/SASS/SCSS). As I understand it, Bootstrap by default uses LESS, and in my Rails app I had to convert LESS variables (with an # symbol at the beginning) into SCSS variables (with a $). This wasn't too difficult, no problem.
I noticed that in Miguel Grinberg's tutorial (Flask Web Development, O'Reilly) Bootstrap is used (Flask-Bootstrap extension), and there is the brief mention of {% block styles %} used to include stylesheets that way, I am confused about how I can go about modifying the existing LESS variables that come by default with Bootstrap so that I can modify the grid structure and not mess things up with my own custom stylesheets. I want to be able to do, for example, is modify the #body-bg LESS variable, or any of the ones here: http://getbootstrap.com/customize
It is very interesting question. I also was interesting in creating styles dynamically. You need follow another ways. It is not possible by the way you have described above.
You mentioned you used Flask-Bootstrap. This extension adopts the Flask project to use the Twitter Bootstrap styles. I have not fond any SASS/LESS functionality.
http://pythonhosted.org/Flask-Bootstrap/#
https://github.com/mbr/flask-bootstrap
If you look at the static folder of the extension you will not find any tracks of SASS/LESS.
As I know Twitter Bootstrap is generated by LESS. There is also a SASS fork. You regenerate styles and replace them in the static folder of the Flask-Bootstrap project.
If you want to do it dynamically you need create your own solution. I do not know a ready extension. It is the very challenging task.
Is there anyway we can override existing theme and its controls to a custom font?
Problem: I can able to override the global font with my custom font, but I can't override each and every controls font since all the controls have their own Font property assigned rather than inheriting from the global.
Any solution?
UI5 Theming and LESS
UI5 is using LESS internally to enable Theming in a comfortable way. LESS is a CSS Precompiler that extends CSS functionality. The implication and drawback is that the delivered UI5 Themes are precompiled already meaning your application is only using the generated, plain CSS.
UI5 Tooling for Themes
Unfortunately the real UI5 tooling behind it wasn't unveiled to us developers so far. The only tooling they provide is Theme Designer. There even is a on-demand version here. With Theme Designer you should be able to achieve easy styling changes as you are looking for.
Hacking UI5 Themes
But still all the ControlName.css files contained in the Themes ARE the uncompiled less files and you can find all the LESS variables UI5 is using in the library.less file. So with a little bit of hacking you should be able to recompile those LESS files into a new library.css file which is used at runtime. All css files of a library are combined and compiled with library.less into a single file - library.css
So if you want more details and understand what's going on behind the scenes check the library.less files
e.g. http://[host][:port]/[path_to_my_application]/resources/sap/m/themes/sap_bluecrystal/library.less
You will find all the UI5 LESS variables in there. Probably most interesting for you is #sapUiFontFamily.
Anyways I would not recommend to change a lot in here since your styling can break very easily with new UI5 versions!
Are you using the UI Theme Designer to generate the CSS files for your custom theme? If not, you should give it a try. It makes adjustments really easy.
To customize a few or all font families, simply choose the "Expert" settings tab on the right hand side of the designer and filter for "FontFamily". It will then list all the relevant attributes.
I am currently working on a project where a programmer who fancied themselves a graphic designer attempted their hand at ASP.Net themes. The CSS is pretty bad, but that is another question altogether.
What I really need help with is the best way to organize ASP.Net Themes and the CSS that lies within them. Imagine that there is a directory structure that looks something like this:
Themes
Theme A
StyleA.css
Common.css
Theme B
StyleB.css
Common.css
Theme C
StyleC.css
Common.css
Each theme has a common stylesheet in it. Unfortunately the author of those style sheets managed to change only a few things here and there in each copy of Common.css. Eventually I will evaluate whether or not those changes are even necessary, but some major cleanup needs to happen first. For now just assume that the changes, ever so small, are necessary for things to look right with each theme.
I would like to know what the best practices are for using themes while also needing some common styles across your application. I want to minimize the number of AppTurns in the page load, but I really want to consolidate common styles into one place in a way that maintains the ease of themes.
You should just include the standard/common css in the website and include it in the head of the masterpage instead of placing it in themes.
I have written a small article about that:
http://www.sambeauvois.be/blog/2010/01/dont-repeat-your-common-css-between-your-different-themes/
I'll complete it with more information later
Yes, just reference the common CSS file directly instead of putting it in the theme folders.
But what if you have a webpage in a sub folder that uses the masterpage? Won't the page to the css file be wrong then?