Some Foundation 5 Utility Classes Not Working in Foundation 6 - css

I've searched for answers on Zurb's site as well as other posts here on SO but haven't found anything that appears to address this issue.
I'm working with Foundation 6 (tried both sites and Zurb templates). Many of the utility classes are working such as top-bar, rows, large, small, medium-column, classes, etc. The default template works as well and shows the different callout elements, buttons, etc.
Some utility classes that were available in Foundation 5 aren't working in 6 such as text-left, text-right, float classes such as right and left or color classes such as white, black, etc. I'm sure there are others but these are the classes I've run across thus far.
I've checked app.scss to ensure nothing is commented out. I also checked the gulpfile.js and it's including all the assets, the SASS for foundation-sites and no javascript files are commented out.
For example, this code from the Zurb site, under v5.5.3 does not activate the panel class or the right or left floats in Foundation 6.
<div class="panel clearfix">
<a class="button right">Float Right</a>
<a class="button left">Float Left</a>
</div>
In my default.html layout, I have the following stylesheets:
<link rel="stylesheet" href="{{root}}assets/css/foundation.min.css">
<link rel="stylesheet" href="{{root}}assets/css/app.css">
and the following javascript files:
<script src="{{root}}assets/js/jquery.min.js"></script>
<script src="{{root}}assets/js/what-input.min.js"></script>
<script src="{{root}}assets/js/foundation.min.js"></script>
<script src="{{root}}assets/js/app.js"></script>
Am I missing a file reference, is there something else I can check to get these classes to work or are these utility classes no longer available in Foundation 6?

The answer apparently is some class names changed and others were possibly removed. Until there is updated F6 documentation outlining the classes, it'll require searching the css for classes that serve the purpose or adding custom classes.
EDIT: For further clarification, I found that the colors listed on this page - http://foundation.zurb.com/sites/docs/global.html, are referring to the colors used but the classes don't work.
For example, adding "alert" as a class to elements should color them red that's listed on the above-referenced page.
Their example, which adds "secondary" to the button element.
To color a component, add the name of the color as a class.
<button class="button">Primary Action</button>
<button class="secondary button">Secondary Action</button>
It doesn't change the color as ".secondary" is not a css class in Foundation 6. What I found by looking at the _settings.scss file is those are actually SASS global variables that are applied to different classes throughout. This is the same for .success and others. ".alert" is a class but only styled when applied in conjunction with other colors.
Looks like it's best to check the _settings.scss file if you're not finding the classes you're looking for or if something isn't working.

Related

Bootstrap jumbotron not working properly in ruby on rails app

I recently started learning web development and I was playing around with a RoR app, to which I added the bootstrap gem using the command:
bundle add bootstrap
It went fine, I changed the /app/assets/stylesheets/application.css extension to .scss, I then added
#import "bootstrap";
#import "bootstrap-sprockets";
to said file, and restarted the server. Now I could clearly see that the font changed, and started playing around with different properties. I created some colourful buttons, a callout and then I wanted to put a jumbotron at the top of the page.
I realised however, that it had no background colour, even though it should be gray. Everything else seems to work, but I can not get it to have a background for some reason, and there seems to be noone having the same problem which is not a good sign.
This is how it looks
(https://i.stack.imgur.com/R630H.png)
<div class="container">
<div class="jumbotron text-center">
<h1>
This is my header
</h1>
<p>
Hello this should maybe someday be a jumbotron
</p>
</div>
<div class="callout callout-primary">
<h4>Primary Callout</h4>
This is a primary callout.
</div>
<%= link_to "About me", 'about_me', role: "button", class: "btn btn-info"%>
<button class="btn btn-success">Green button</button>
</div>
Bootstrap version: 5.2.2, Ruby version 3.1.2, RoR 7.0.4
I have no clue what is going wrong since the other elements seem to work. Any help is much appreciated. Link to my full repository
I tried using a full html5 template and adding
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
To the files , which did make it work, but the whole point of installing the gem is so I dont have to do that right?
I'm afraid Bootstrap v5.2 does not have a jumbotron anymore as v4 did.
Try this instead: https://getbootstrap.com/docs/5.2/examples/jumbotron/
Also you can check out the available components for v5.2 here: https://getbootstrap.com/docs/5.2/components/accordion/
Happy hacking!

Can anyone tell me why this gridset css isn't working?

I've used gridsetapp.com in the past to create responsive grids, but on the one I've recently tried creating just isn't working and I can't figure out why.
The link to the css is here; https://get.gridsetapp.com/37722/
Just trying to get something basic:
<html><head>
<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" />
</head>
<body>
<div class="d1-d5" style="background:#aaa">ffggg</div>
</body>
</html>
Any thoughts?
Despite an unusual CSS link, the browser should recognize the CSS file your referenced.
However, looking at your reference, you are just trying to apply CSS to the class d1-d5. However, as best I can tell, there is no exact match in the CSS file to Just d1-d5. Use the Development tools (F12 on most browsers); they are your friend. It will show you what CSS is applied at that moment including, any applied through JavaScript or Linked files.
With CSS, you need to make sure that you call out exactly what the browser can identify, but not more (unless going for a higher order of precedence). For example, the most you could call out to select your d1-d5 is:
html body div.d1-d5{...}
Whereas in you linked CSS file, I see a lot of parents or children when searching d1-d5, such as .d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5.
If you wanted the last one in this chain (.d1-d5 .d5), you would need an HTML such as:
<html>
<body>
<div class='d1-d5'>
<div class='d5'>
This text will have the CSS applied.
</div>
</div>
</body>
</html>
The CSS written as .d1-d5 .d5 literally means "select the element with class d5 as a descendent of an element with class .d1-d5". Your HTML doesn't match any of the classes in the CSS file, including the parent and child selectors. If you were to try the above HTML, you would see width:18.05273834%; applied (which isn't a very obvious thing to see... why not try background:yellow; or something like that for an easy verification).
Finally, why are you inline styling when you have the CSS? This is bad form, and only appropriate if you can't control the CSS file.

No wrap of Bootstrap columns

I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.

Popover on data toggle not rendered in a different version of bootstrap

I have used a bootstrap pop over in ng-repeat. Below code snippet for the same
<div class="useBootstrap col-sm-2" data-toggle="popover" data-container="body" data-content="AdditionalContents to be shown" data-trigger="click hover">
{{ row.FileName | limitTo: 15 }}{{row.FileName.length > 15 ? '...' : ''}}
</div>
I have a bootstrap version *!
* Bootstrap v3.3.4 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc. in my application
If I include a lower version of bootstrap - It renders perfectly.The 1st image when including 3.0, 2nd image if i use 3.3, How can i make it work in 3.3 version because I cannot change the version of bootsrap in my application now just for this pop up.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
I see that you are using the Vanilla Bootstrap popovers. I tried using them too, but I never achieved my desired outcome. So, I investigated an alternative, Angular BootstrapUI (otherwise known as BootstrapUI), which solved most of my problems.
This probably isn't the answer you're looking for, but I would suggest trying out the BootstrapUI popovers. I've found the upside to using these popovers makes integrating templates much easier, and they don't rely on extraneous jQuery. The downside is that their style is more difficult to customize. I still haven't figured out how to have popovers with different styles in BootstrapUI. In Vanilla Bootstrap, customizing popover styles is fairly trivial.
I haven't had any problems with Vanilla Bootstrap's JS, but for now you should stick to a version that is most compatible with your app.

Why do my bootstrap buttons design differs from default

I'm using Twitter Bootstrap 3.3.5. When creating a btn-primary in my html like:
<button type="submit" class="btn btn-primary">Button Text</button>
i'm getting a different result as stated on the bootstrap page. I'm talking about the gradient that the button has when I'm using bootstraps button inside my page. When expecting the the element with Chrome's Dev-Console I can see that the gradient comes from the theme.less file and of course I can manipulate it. But shouldn't it be by default like on the bootstrap website?
I found out that removig the
<link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
tag from my html-head helped already.
I've installed bootstrap via bower. Would be nice if one could "opt-out" the theme via config instead of deleting the theme files or the link tag in head manually.

Resources