I'm trying to reach the best css practice on my website using my own custom css till I found out I can use css framework such as bootstrap or foundation zurb instead. I thought using such framework directly without the need of making my own custom css is possible, but it turns out that all css frameworks are limited to some point yet I need to add extra custom css so my site look the way I want.
I want to use css framework because of the fact that it is being served over CDN so no extra bandwidth, and also for load speed and performance.
now my question, is it possible to be using only css framework on a website without the need of adding a custom css?
also how about creating my own custom css and using #import to a css framework inside the custom file, is that a good practice?
can anyone enlighten me to an efficient method serving a css file with/without css framework to my website?
You can use a plain framework without writing any custom CSS if you either a) Are happy with how it looks without custom CSS or b) like one of the many themes you can get for such frameworks.
You can #import a framework into your own custom CSS - in fact, many frameworks are available as less and importing them allows you to use variables from the framework in your own CSS as well.
As far as efficiency goes, are you sure this is the performance problem you have? If you haven't measured the performance, you aren't ready to optimise! It will, of course, be a straight economic trade-off between looking exactly as you want, and keeping the page load fast.
using a css framework is always a good option. You can use either bootstrap/foundation. along with the various functionalities on the site it would provide u the animation effects as well. And would help to complete the site faster as they provide the snippets of code. You can use less/sass and have the styling customized in the variables so you wont have to include extra custom css file.
Related
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
I have already built a site using CSS. Now looking back I regret not taking the chance of using Bootstrap. My website is already built and styled. My questions is, is it possible to use bootstrap even though you already have styled you website without having to remove all the CSS?
Bootstrap uses a set of pre-configured classes to implement it's styling rules..
So unless you somehow incorporated the same class names in your site and intended the same styling as was intended by the Bootstrap developers, you are going to have to make the necessary changes on your own.
That said, if your project is intended to be extended in the future, it may still be a good idea do re-work what you did up until now with Bootstrap, in order to save time in the future (I am assuming that the project is not very large in scope).
There are few things you need to know:
Bootstrap uses box-sizing: content-box so if you are not, it will probably impact all your padding/border stuff.
Bootstrap comes with a reset and few helpers with generic names that can interfere with your own style.
That said it's totally ok to add bootstrap to your project and it should be smooth.
I am using insert-CSS node module for adding styles to DOM, internally this adds the embedded approach.
so far my understanding is using external style sheets is best way to do it. But while using insert CSS, css added to the js bundle and dynamically css embedded to the . so this also looks as same using external CSS.. and css will be cached with js and there will be one file(js+css) we can avoid one http request for loading CSS ?
I feel this insert-css is better than traditional approach(external css) am i correct? please suggest me your thought on the same and add some docs to refer.
so my question is which is the best approach among using "insert-css npm" or "external css"
I didn't find useful info on this question and sharing my experience.
My personal recommendation is not to use "insert-css" modules for the simple projects like dealing with forms and minimal amount of components.
"insert-css" - as mentioned above, "insert-css" add the embedded styles, in the network, its passed as base64 format. Though it's less weight in the network, browser needs to convert the base64 format to css and adds the embedded css, this conversion process will happen allays in js side, I guess which will cause the performance issues
We have a legacy application based on EXT-JS.
We like to add new module into the existing application, using AngularJS and bootsrap.
My problem is that bootstrap’s CSS are conflicting with CSS of the legacy code.
The new module, which written using bootstrap and AngularJS, wrapped around by legacy code, so I need to import exists CSS and new CSS on the same page.
I thought of 2 possible solutions:
Having a prefix to bootstrap’s css file and apply it only to inner part of the page content (AngularJS, new module). The problem is that popup, and angular-bootstrap 3rd party component still interrupted by legacy CSS.
Having my whole inner page (AngularJS module) in separate IFrame, embedded into page that contains the legacy CSS.
It seems like using IFrame solves my problem, but I aware that using IFrame is discouraged, and I am looking for optimal solution for my problem.
Do you think that IFrame is a good practice in this scenario?
Do you have other proven solution?
Planning to use iframes just to get around the css conflicts - not a very good idea. Though iframes can come handy in some cases mostly its usage has been abused just to get around some issues easily.
Do you think that IFrame is a good practice in this scenario?
No. The only issue here is the conflicting css styles between bs and extjs. And planning to use Iframe to get around this is really a bad choice. As you are using angularjs I feel using iframe may restrict its usage to some extent. For instance,embedding it in iframe I think the navigation back and forward buttons wont work as expected, in case your are planning to use angularjs routing. And when using Iframe it will be very hard to debug front end issues.
Do you have other proven solution?
Well I do not have a proven solution but you already have mentioned an idea which may work easily. Bootstrap can be customized to any extent you want to using less variables.
For instance for your issue just namespace the bootstrap styles using less.
.bs {
#import "less/bootstrap.less";
}
And don't get into the mindset using less/sass to compile css is complex. Once you get used to it, this will make this will make FE developement much easier than before.
After many fruitless days of trying to get JQuery Mobile and AngularJS routing to work together, I'm considering my alternative options..
Is there a way to use the JQM CSS without relying on JQuery's javascript?
Or is there a substitute CSS package that are recommended? something with all header/footers and lists that is available in JQM?
Of course, there is an CSS file in the package you downloaded. But all the sites functionality and the mobile adaption will be broken. You can rename the classes and the id's or directly use the classes from the css file.
Greets
There are quite a few jQueryMobile functionalities that rely solely on the CSS fole, eg. the grids. You won't get the interactions, but all the buttons looks, shapes and colors are totally useful without the JS.
Still - depends on your expectations.
And when using it like that you need to understand a bit how JQM works to know the classes and html structure that's expected, because some of these are generated by javascript.
[kind of digression]
But maybe you just dislike how big jquerymobile is?
Then you probably want to use: http://jquerymobile.com/download-builder/ to get only stuff you need, and also use tte themeroller here: http://jquerymobile.com/themeroller/index.php to create only one theme (global) and remove other themes (A,B,C)
That's how you get it a lot smaller.
You can reuse the CSS file inside he downloaded JQM package. The file jquery.mobile-1.x.x.css can be included, but make sure to include the images folder as well and have it at the same location at the destination.
If you aren't sure of which classes to include for which purpose, you can simply find it out by inspecting a JQM demo page to find out (View source will not work due to the JQM javascript).
JQS provides support for ui animations and user experience enhancement. Removing libraries will dispart you from accessing css contents created and used by javascript in order to 'manage' a front-end design. –
Yes you can use jquery mobile theme and adapt it to your needs.
Just reading there was adapter releases for your situation : https://groups.google.com/forum/?fromgroups#!topic/angular/oIxRxpkn3L0
Perhaps substitutes to css packages are documented. About heavier JQM templating and using, there are some introduction to what you'll need to take a look at like adobe theme-control-jquery-mobile.html ..