I've recently started using Foundation (v5), maybe I'm missing something in the documentation but I can't seem to figure out how to apply rounded corners to images. There are the .radius and .round classes, I tried using them on an img tag(also in the parent div) and it doesn't work. Bootstrap has a class ready for this, maybe in Foundation we have to code ourselves, but I'd hate to code something that already exists by default.
Foundation has a $global-radius (3px) which it applies to a lot of its classes (like thumbnails), but no it doesn't have any img-round etc...like Twitter Bootstrap does.
You will need to do your own on this [border-radius] (or if you are using Sass create your own variables).
Related
I'm working on an Android Tv app and have been using Leanback as a theme, however I need to implement a TabLayout for the top nav as I am not using the standard BrowseSupportFragment.
The problem is that I in order to use LeanbackTabLayout I must use Theme.AppCompat, but if I use Theme.AppCompat instead of Theme.Leanback I lose all the Leanback styling and D-pad functionality.
ContextWrapper has been suggested, but the documentation did not
provide much clarity for me. I'm not sure if I should use
Theme.Leanback as my parent application theme and apply
Theme.AppCompat to my LeanbackTabLayout using ContextWrapper or go
about it some other way.
I've tried using Theme.AppCompat.Leanback as my parent application
theme. This allowed me to keep the Leanback styling, but I no longer
have D-pad controls.
Does anyone have any suggestions on how to make ContextWrapper or Theme.AppCompat.Leanback work in this situation or any other workaround?
I have foundation installed with the setup provided by foundation sites for sage (gulp bower). However, when my page loads the JavaScript only fires on the first event. So my carousel will only advance to the second image, and my search bar will appear, but I can’t get it to close. I don’t have any errors in my console, so I’m really stumped with this.
I know foundation is working as the carousel displays correctly and my mobile menu is hidden.
Thanks for any help.
It turns out I was missing a CSS package called motion-ui.
http://foundation.zurb.com/sites/docs/motion-ui.html
Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including Toggler, Reveal, and Orbit. The transitions are powered by special transition classes that the Motion UI Sass creates. For example, here are two instances of Toggler—one using fade classes (.fade-in and .fade-out), and one using slide classes (.slide-in-down and .slide-out-up).
I am currently using sphinx for documenting my django project. And I would like to add documentation that includes animated figures. Is there a way to do that ?
By storing the image in your docs folder somewhere and declaring an image using restructuredText:
.. image:: ../images/your_image.gif
I have used Foundation 4 with Custom Forms before and they work great. With Foundation 5 however I am unable to understand how to use them. Need help!
Going to the URL: http://foundation.zurb.com/stencils.html it gives strange guide on using it which I am not able to understand.
Stensils is a set of tools that helps you to quickly create interfaces in OmniGraffle.
More inforamation about OmniGraffle, here:
http://www.omnigroup.com/omnigraffle
If you need to create some custom forms for web, better to look here:
http://foundation.zurb.com/docs/components/forms.html
As you can see at
http://foundation.zurb.com/docs/upgrading.html#upgrading-the-sass
#import "foundation/components/sections";
#import "foundation/components/custom-forms";
have both been removed from the foundation framework. If you are looking to continue using custom forms as defined in Foundation 4 and as described in their official documentation
http://foundation.zurb.com/docs/v/4.3.2/components/custom-forms.html
Then you should probably switch back to Foundation 4.
As an alternative, you could always use CSS3 and pseudo elements to style the checkboxes and or radio buttons without having to use a javascript plugin to do it.
I've set the $topbar-height variable to a specific value, that is higher than the default value.
For the mobile version I'd like to keep the default value.
How can I do that?
I can't just change the height value of .topbar, as this variable is used by Foundation across many other attribues of the topbar and its children elements (line-height, padding, margin, etc).
I've found out that doing something like that works:
#media #{$small} {
$topbar-height: 85px;
#import "foundation/components/top-bar";
...
}
Maybe is not the cleanest approach (I must check if this produce redundant CSS) but I prefer this what, even though I consider #James answer good as well (probably it's even a cleaner way for what concerns the produced CSS).
I think that an actual top-bar mixin would solve this issue: I'll add it as a suggestion.
This is not possible with Foundation out of the box. I have done two things in the past to get custom functionality such as this:
1) override the CSS classes in app.scss by appending !important to force the changes to take effect.
or
2) copied the mixins and html class generation Sass from the zurb-foundation gem (for example foundation/components/top-bar.scss)
to either app.scss or a new file, then modify app.scss so you no longer use the blanket import by commenting it out
// #import "foundation";
and importing everything else (for development, but only the parts I need for production) with the exception with the file you want to override, in this case
// #import "foundation/components/top-bar";
Once you do that, you can modify the html generation or the mixins or add media queries for whatever you want to do.
Keep in mind if you make a modification like this it could break with future versions of Zurb Foundation.