I need to use a Bootstrap CSS in 4.6 as global level for every page, but on a section of one page, we need to use a 3rd party tool that uses Bootstrap CSS 3.7. Upgrading to 4.6 breaks the 3rd party tool.
Is it possible to make both versions coexist without affecting other sections of the page?
https://github.com/blueimp/jQuery-File-Upload
No, it is not possible.
Frameworks are consistent software that needs CSS + JS working together to get results.
In another hand, BS4 changes a lot against BS3.
So, the short answer is NO.
Related
I know that this question is not more coding based. But this can cause many problems practically.
I have a website with 10 pages. Each page has the same navigation. Now if I want to change the navigation a little to include a hamburger menu, I will have to make this change in each page one by one. Is there any way in which I can make this common change to all the pages at the same time?
I browsed for this on SO but the answers to a similar question asked to use PHP or WordPress. Is there any method or tool other than them for my requirements?
With HTML, I don't think there's any support for that kind of dynamic feature yet.
However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.
You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.
You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.
I have a website that uses Bootstrap. Technically, I'm using Bootstrap 4 at the moment. I want to leverage Accelerated Mobile Pages (AMP) in the publicly-facing parts of my page. However, I have several errors that I can't seem to shake. This has me wondering, can I even use Bootstrap with an Accelerated Mobile Page?
Am I even allowed to use JavaScript in Accelerated Mobile Pages? Bootstrap has JavaScript for the hamburger menu on mobile phones. Yet, when I run the validator, I see errors like:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css'.
The attribute 'rel' in tag 'link rel=' is set to the invalid value
The tag 'script' is disallowed except in specific forms.
So, back to my question. Is it possible to have a Bootstrap 4 site that uses Accelerated Mobile Pages?
Thanks!
Right now you cannot use bootstrap with AMP because it inserts a lot of unnecessary CSS and AMP is optimized for performance, but you can use font-awesome in AMP HTML by including it like so:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
See the original issue on github: https://github.com/ampproject/amphtml/issues/2413
Try this bootstrap 4 CSS prepared for AMP project:
https://github.com/jupeter/bootstrap/blob/v4-dev/dist/css/bootstrap-amp.min.css
This project is based on orginal bootstrap 4 fork.
All components loaded in the CSS file are placed:
https://github.com/jupeter/bootstrap/blob/v4-dev/scss/bootstrap-amp.scss
If you need add custom components, you can add in the "scss/bootstrap-amp.scss" file and recompile using:
$ npm run amp-css
Disclosure: As #Filnor notice, it's forked and modified by me.
You can create a custom bootstrap version from: Customize Bootstrap
Uncheck unnecessary properties and export it. It must be less than 50kb. Remove every "!important" rule and put it in your site as inline css.
I was wondering this too. On the github page for the AMP project it states that
It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML.
So you cannot use custom JS like you are used to doing. Instead you have to build out the pages the AMP way and use custom elements as specified by them.
To get rid of error with maximal size of author's CSS, you can also do following steps when you want to use AMP and Bootstrap together:
put your entire css and bootstraps' css into one css file, lets say entire.css
Download and install https://github.com/purifycss/purifycss
use purify: purifycss entire.css yourpage.html --min --info --out minified.css
if minified.css is smaller than 50k then you can put content of this file in <style amp-custom>
if not, you can use on of online css minifiers / compressors.
EDIT:
There is unfortunately one problem that is hard to workaround. Bootstrap uses in many places !important keyword, which is restricted by AMP. The AMP validator shows this errors first when you got with custom CSS below 50kb.
As per the AMP specification you can only use inline css with a total max size of 50kb. You can use bootstrap css and components with AMP if those components do not rely on bootstrap.js since AMP dosent allow 3rd party JS as of now.
Plus, you need to remove !important wherever it is used in bootstrap css as AMP restricts the use of !important in inline css.
I know this question is old but recently (in 2021), I've found BootAMP
https://www.jssaints.com/bootamp (Bootstrap like CSS framework for AMP HTML).
Using it, it is easy to add AMP HTML support by migrating from Bootstrap to BootAMP
https://www.jssaints.com/bootamp/docs/introduction
They also provide few ready-made AMP-HTML templates
https://www.jssaints.com/bootamp/boilerplate
In using asp.net I have a scenario where the master page is implementing version 2.2 of BootStrap. But there is some content I'd like to use BootStrap 3.3 for. If I try and upgrade or implement 3.3 over 2.2 in any ways, it breaks some of my code. Any ideas for how to "selectively upgrade" HTML/BootStrap to say, everything that's inside a "Div" tag?
You can do'it realy easy by isolating Bootstrap with LESS, there is a good tuto to do this by "Chris Youderian".
https://formden.com/blog/isolate-bootstrap
Depends on how hacky you want to get. If it's just one feature, just copy the part of the .css from bootstrap 3.3 you want in its own css file and import this css file after the 2.2 version is loaded either in your build script or after your 2.2 version in your tag.
If you have a more specific question about which feature (if you're including js files as well) then we'll have to dig deeper.
Warning: You have to be careful with what you're overwriting from the 2.2 as it can break other css parts. And as #DavidG pointed out, I would avoid doing this entirely.
I needed to use use both bootstrap 3 and 4 on my project as a plugin which was written with bootstrap 3 looked terrible in bootstrap 4.
Tried to follow advice in the link shared in Hicham's answer. Couldn't get it to work. But following the cue, did some stuff manually and it worked. It took me 2hrs to finish step 4 though.
Steps:-
Download preferred bootstrap 3 version from https://blog.getbootstrap.com/archive
Put it in custom css folder (or anywhere else) in your project.
Add its link in your header
(CAREFUL with this step) Prepend '.b3 ' without quotes to every selector in the downloaded bootstrap version using ctrl-H command. This will take a long time considering mistaken conversions. (e.g - Conversion of "ol" selector to ".b3 ol" results in conversion of the word "control" to "contr.b3 ol" which needs to be reversed.
Put all your contents which require bootstrap 3 inside a div tag with class="b3"
Done.
I need to add responsive design features to my web application using Twitter Bootstrap. I just want the responsive behavior, I'm not interested in the typography, components or any other stuff included in Bootstrap.
I got a customized Bootstrap version just selecting the grid system. However, when I add the generated CSS to my application, all my styles are messed up (header, links and others). Why is that happening? How can I get a Bootstrap CSS with just the grid system? I would like to avoid a manual modification of the Bootstrap files.
Go to http://getbootstrap.com/customize/ and toggle just what you want from the BS3 framework and then click "Compile and Download" and you'll get the CSS and JS that you chose.
Open up the CSS and remove all but the grid. They include some normalize stuff too. And you'll need to adjust all the styles on your site to box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Checkout zirafa/bootstrap-grid-only. It contains only the bootstrap grid and responsive utilities that you need (no reset or anything), and simplifies the complexity of working directly with the LESS files.
Just choose Grid system and "responsive utilities"
it gives you this: http://jsfiddle.net/7LVzs/
Made a Grunt build with the Bootstrap 3.3.5 grid only:
https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid
~10KB minimized.
If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.
I would suggest using MDO's http://getpreboot.com/ instead. As of v2, preboot back ports the LESS mixins/variables used to create the Bootstrap 3.0 Grid System and is much more light weight than using the CSS generator. In fact, if you only include preboot.less there is NO overhead because the entire file is made up of mixins/variables and therefore are only used in pre-compilation and not the final output.
It looks like you can download just the grid now on Bootstrap 4s new download features.
It's been a while since this question was asked, but maybe now you can forego Bootstrap altogether and use CSS Grid! (it's simpler, neater, more flexible and faster). See this cool article: Stop using Bootstrap — create a practical CSS Grid template for your component based UI
In Bootstrap 4, there are already separated files in their GitHub. You can find them here
https://github.com/twbs/bootstrap/tree/main/dist/css
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm working on a little html/css framework that I can use for most of my websites, at least to have a basis to build on. Here's what I've been using so far:
CSS framework
Reset.css - I use the one by Eric Meyer, www.meyerweb.com.
Typography.css - All main typography styles for the site (from blueprintcss.org)
Forms.css - basic form styles (from blueprintcss.org)
Wireframe.css - Here I set up the wireframe for one, two and three columns plus a header and footer. I used the Holy Grail technique, and implemented it so that by setting a class of 'onecolumn', 'twocolumns' or 'threecolumns' to the container div I can switch between the three.
Basic techniques
Some techniques I have some pre-fab examples of for me to re-use in any website:
Suckerfish dropdown menus - Horizontal and vertical in various versions
Sliding Doors tabs - although I try to use CSS3 where possible
Scripting
jQuery - I try to use it as little as possible (that is, if there's css solutions at hand, like the Suckerfish dropdown menu vs. jQ menus)
Plugins
None, yet. I looked into css3pie yesterday and it looked real promising.
Yet to look into
What I haven't used so far but might be interesting is css and js minifiers. Also, currently I include the 5 css files mentioned above in the main.css with #import, maybe I should have them merge automatically before I upload?
Also there's CSS grid systems of course. I never got the hang of those, but maybe I should give it another try. I know the 960 grid is very popular, but I'm not sure if I want to use classes purely for markup (grid_4, column_5, etc.) To me it's a bit like <span class="red"> to make a text red, that's just as bad as using inline style.
Anyway, this is just a basic setup and there's plenty of problems in websites that are not yet incorporated in this framework. So, what should I really check out to improve my framework? (HTML5 and CSS3 welcome, no flash please :P)
Suggestions
I'll make a list here of suggestions made below that I'll check out.
HTML5 Boilerplate
IE 7/8/9.js
Modernizr
I highly recommend the HTML5 Boilerplate
HTML5 Boilerplate is the professional
badass's base HTML/CSS/JS template for
a fast, robust and future-proof site.
After more than two years in iterative
development, you get the best of the
best practices baked in: cross-browser
normalization, performance
optimizations, even optional features
like cross-domain ajax and flash. A
starter apache .htaccess config file
hooks you the eff up with caching
rules and preps your site to serve
HTML5 video, use #font-face, and get
your gzip zipple on.
Boilerplate is not a framework, nor
does it prescribe any philosophy of
development, it's just got some tricks
to get your project off the ground
quickly and right-footed.
The best thing you can do is use it. That's the only way you're ever really going to build a framework that does everything you're going to need. Afterall, you don't know everything it'll need until you actually need it.
Where I'm working we have our own PHP Framework and it's been a contsantly changing entity where bits get added when they are required because they weren't originally needed in the spec.
As long as you have something that works for your first project you're underway. Just try it out, add to it when you need something, and optimise where and when you can!
If you are looking into minifiers, you're probably willing to run your code through some sort of build script before testing and deploying. If that's the case, I'd suggest looking into LESS for your css: http://lesscss.org/docs
LESS is pure awesomeness.
I don't know how much client-side scripting your projects require, but if it's anything extensive you might want to look into using something like M4 or the C++ preprocessor to add support for includes, ifdefs, etc... this can help keep your code organized and allows you to maintain debug code that doesn't appear in the production build. This post sort of takes that idea to an extreme, but it might give you some ideas.
Out of curiosity, what server-side language are you using?
Drop Suckerfish.
With the growing number of touch-only devices (mobile phones, tablets), using hover-based UI elements will just piss off the users.
I can't believe I forgot (and nobody has mentioned) fontsquirrel. I've used it to embed a few fonts now and it really works like a charm.
From a performance perspective, I'd use Compass and SASS with the built in BlueprintCSS framework, it mainly takes care of all reset needs to render the same cross browser, you get to use mixins instead of inline classes for your grid. And most of all you end up with one tiny css file that loads real quick. I also use modernizr, html5boilerplate, css browser selector only with serverside php, faster rendering. If your torn between SASS and LESS, the blueprint integration with Compass+SASS is spectacular. Hope this helps!
why create one more when there are so many out there already.
I would rather suggest you to contribute to the frameworks you are referring if you feel something is wrong or missing. That way you will also help everybody who are already using it.
I agree with Alex here you should start with using it, this will make sure it has everything you want,
and let me know when it is ready for us to use ;)
The Blueprint CSS grid technique is better than the 960gs in my opinion. The thing I dislike about 960 is that the the gutters between columns are formed by two "half gutters" on the left and right of each column. It's bizarre; you wind up with half-gutters on the left and right of your layout.
There's also the CSS browser selector jQuery plugin. This uses a few simple selectors in your CSS to tell which browser to do what:
.ie .myClass
{
background-color: #f00;
}
.ff .myClass
{
background-color: #00f;
}
I use it on my website and it's a much better solution than having CSS hacks or Conditional Comments.