I'm a beginner coder and am trying to integrate my css into my app. Using Rails 4 + Bootstrap 3.
I wrote out the html + css for the front-end of my app prior and it all worked fabulously. I moved everything to my folder and edited my V + C accordingly.
I have installed the bootstrap-sass gem successfully. Have updated my assets application and js. I have a .scss file importing bootstrap and my Google fonts.
Bootstrap, Bootstrap js, and Google fonts are working selectively/randomly on certain pages, but not fully on a page or they just don't work at all or they are there but all messed up now. (ex. modal not working on one page, but js element on another page works) I am trying to call the css files from where they are locally stored.
My questions:
1. Is there something I would need to edit to integrate the two in addition to the above?
2. Do I have to transition my css into another file?
3. If there is no easy way to fix this, should I just start over with my css?
Would appreciate any tips. Thanks!
A good starting point would be to check your sources under the inspector, to make the that the css and javascript are both being required. Also check the console for whether there are any javascript errors.
Assuming you are on google chrome, and on a mac, that would be cmd+alt+i, and ctrl+alt+i on windows.
You can also check which files are being included through checking page source by right clicking most parts of the page.
If they are being required and styles are not being applied then something else is probably getting in the way( i.e. bootstrap javascript files are being required twice, css is being overwritten because of load order, etc)
Related
I'm trying to figure out whether it would pay off to use Bootstrap on my existing Wordpress site and while researching it, I came up with the idea that the template I'm using might actually already be using Bootstrap.
I can't see any signs of Bootstrap in my functions.php file or through the FTP, but the template is using classes like these: ".col-md-4", ".col-sm-4". Is that because it was created with Bootstrap or is it just a convention?
Sorry if this is complete nonsense.
That's a classic bootstrap class.
You shouldn't check the PHP files but the css ones or javascript.
It may be a sign.
You can check more bootstrap classes Like container, row, and ...
And for being sure you can check asset files like CSS and JS files, if you found bootstrap css and js files you may be sure of using bootstrap in your template.
You can open asset files it may wrote the bootstrap version in it even.
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
Django REST framework uses Bootstrap and has its own CSS files in it. It seems like PyCharm imports those files for code completion popups. The things is, I don't want those as I use different CSS framework and in fact, it's confusing me because all those Bootstrap autocomplete popups when I'm trying to set CSS classes and so on.
So my question is, is there any way I can disable code completion popups from certain CSS files?
I did not face with this problem until now,but I think you should disable these folders is Pycharm, try this :
Settings|Directories -> Use Exclude button on folder
Good afternoon.
Premise: I’m not a web developer and I have little familiarity with all these new names that emerge as mushrooms from one moment to the next. Then I ask you not to give nothing for granted.
My question is very simple: I want to target bootstrap 4 style only on a specific elements (e.g. a div) of my page: the rest of the page hasn't to be involved with this styles.
I notice that a colleague of mine used LESS on an older bootstrap version but I red that it is not support in Bootrastrap 4.
Any ideas?
Thanks,
Sergio
I think to have found the solution but I'd like know if it is the right way.
Here my steps:
I downloaded Bootstrap 4 files using
npm install bootstrap#4.0.0-alpha.6
from dos prompt inside a local folder
Then I modified bootstrap.scss file placed inside node_modules\bootstrap\scss surrounding all code with a class (e.g. .thisismyclass{...})
I then downloaded Koala from this site
http://koala-app.com/
I added the entire local folder (where the boostrap files are) in the Koala UI.
Automatically it create the .css files near the scss files with the reference to my manually added class.
Now, in my page, I added the refernce to my new css and then I added my main class to the div which must use Bootstrap styles.
It's right?
Thanks,
Sergio
I am trying to get SASS source maps and the auto reloading/saving to disk to work. I have everything set up with grunt-contrib-sass and watch task to recompile my .scss on changes, and my source maps are working correctly in Chrome in the way that I can edit the SASS and it gets saved to disk. My problem is that when I edit the SASS, the page reloads as if there is no CSS at all. If I then reload the page, my applied changes are indeed there.
Any idea why this happens?
Before sass-change in dev tools:http://cl.ly/image/1R2o2I113H3y
After: http://cl.ly/image/1m0V3b0J420X
I am using Google Canary 33.0.1738.0
Don't know what is causing it but I have found a nice extension as a work around for something like that. I started useing it becuase I didn't want to reload the entire page every time I made a style update. There is an option under css to reload linked style sheets. Web Developer