After going through many articles in the web, we've concluded that there are some different ways to custom twitter bootstrap:
Using the http://getbootstrap.com/customize/ site , to predefine settings , before downloading bootstrap
Modifying bootstrap less files after downloading bootstrap to our app.
Add our own custom.css file which will override the bootstrap css files.
Our question is what's the difference between them, In which case is each of them useful?
Thank you!
The only answer I can offer that isn't purely opinion-based would be minimizing and maximizing your performance overhead. By pre-configuring your Bootstrap CSS to your specific needs you omit the need to write additional classes or have additional CSS that overrides existing Bootstrap specifications.
That plays out, ultimately, to fewer HTTP requests. It also reduces the chance that you'll have inconsistent CSS (ie. an override that works on one component, but not another).
...
On the flip side; if you keep with the out-of-the-box Bootstrap you can easily link to it via CDN, which increases the likelihood that your user will already have a cache of the asset on hand.
And at that point we really delve into opinion-based, which isn't really suitable for SO.
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.
Bootstrap 3 CSS is typically used site-wide or application-wide. Knowing this, I designed a tool that HAPPENS to use Bootstrap in a sample application. This is after going through requirements processes. The explicit design was "It happens to use Bootstrap in this example, but the target user would likely provide their own styling rules."
However, the results looked great and the powers that be have asked, "can this tool be included on any arbitrary page and still look like this?"
The short answer of course is "no". Bootstrap's styles do all kinds of things like using border-sizing: border-box on a wildcard (*) selector. This is going to mess with people's existing CSS if it's not already built on Bootstrap.
Is there a way to encapsulate Bootstrap styles so that they're restricted only within that particular tool/widget? So in the div <div class="bootstrappy">, everything is affected by Bootstrap classes and outside of there, nothing is? The goal is to be able to include my Bootstrap-styled widget on a page that didn't previously include Bootstrap, without modifying what was there previously.
It's OK if I have to do this as part of a build process (I am using Grunt right now, so that'd be the best option for me); what I'm looking to avoid is manually combing through Bootstrap in order to cull or modify element-level rules so that they don't stomp over a whole page.
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.
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.
Would it be possible to optimize for the critical rendering path (similar to what Google and Facebook are doing) if I am using Bootsrap 3?
Facebook just inlined the styles that are related to the header and sidebars.
Google inlined all the styles because they do not have much styles for the homepage.
The issue here is that let's say I want to inline styles related to my header, it would consist of over 10 classses used from bootstrap (container-fluid, row, col-lg-10, col-lg-offset-2, etc..).
And inlining bootstrap is a bad idea because it is over 100kbs
I want to load above the fold content, really quick.
Is there a smart way of doing it? Do you have any recommendations?
This technique is independent of your framework, Bootstrap in this case.
You have to come up with a way to figure out your critical CSS which you can extract and inline into your HTML file.
There are many ways to do so:
Custom critical CSS file (created manually)
Type annotations in your CSS file, which could be extracted on compile/build time: https://css-tricks.com/annotating-critical-css/
Automated using headless browser like Puppeteer
This topic is way too big to answer in a short thread so feel free to read up on the topics listed above:
https://web.dev/extract-critical-css/
Tools:
Critical
criticalCSS
Penthouse
I wouldn't start doing in-line styles just yet, there are many optimisations that can be done before you'd ever need to go down that route. Plus there is a massive trade off, performance of the duplicated styles in the HTTP request (could be a double edged sword) and a maintenance nightmare.
Load CSS in head.
Load JS at end of body.
Customize bootstrap to only include the minimum required styles.
http://getbootstrap.com/customize/
Bundle & minimize your header related files in a separate bundle, think about segregating bootstrap components. Bundling gives caching and minification.
Single paged application, be smart about your initial load page and use modules/web components to ajax in templates of html.
Use CDN's as there are maximum http connections per host.
More can be found at https://developer.yahoo.com/performance/rules.html
Short answer is that you shouldn't have to add extra inline code for performance reasons. Your best bet to minimize loading time would be (as suggested above) to use the bootstrap customiser to remove whatever classes you won't be needing and also minify and gzip (if possible) before sending. Most of the times you'll need a lot less than the 100kbs bootstrap css.
However, rendering the elements in the browser is more costly than applying classes to them. You can only minimize load times up to a point.
You haven't told us what kind of performance you expect; but if it was a life-or-death kind of situation to super extra fast load the header, yes you should use inline code.