zurb-foundation | 易学教程

zurb foundation - many duplicate css entries

阅读更多关于 zurb foundation - many duplicate css entries

I've been using zurb foundation for quite a while now. I'm using a bower + compass setup as described here http://foundation.zurb.com/docs/sass.html Today while working I noticed that a page was taking a while to load and while attempting to trouble shoot an issue I noticed that there are a many duplicate directives in the generated css file. I'm sure this is probably me doing something wrong, but I don't know where to start looking and I don't even know what information to provide that might help narrow down the issue. Foundation 5.4.5 --> actually running 5.4.7 Compass 1.0.1 Any assistance

Zurb Foundation 4 - How to create a full height column

阅读更多关于 Zurb Foundation 4 - How to create a full height column

I'm trying to create a floating panel. It needs be detached from the grid and fill the entire height of the document, on the left side like SO: My experiment so far: <div class="row left"> <div class="small-3"> <div class="panel"> Panel HTML </div> </div> </div> <div class="row"> <div class="small-6 columns"><div class="panel">Main - Content</div></div> <div class="small-6 columns"><div class="panel">Main - Content</div></div> </div> Produce the following: I'm not sure what is the best practice when using Foundation, and could not find a reference in their docs. Appreciate the help :) here if

Centering lists in Zurb Foundation

阅读更多关于 Centering lists in Zurb Foundation

I am having trouble centering inline lists when using Zurb's Foundation 4. The prebuilt css classes of 'text-center' and 'centered' work fine for other elements but not with lists. A review of an older question concerning images has similar results. This doesnt work: <div class="row"> <div class="large-12 columns text-center"> <ul class="inline-list"> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> <li><a href="#">Five</a></li> </ul> </div> </div> However, when removing the this does work (but obviously is not preferred

Trying to load Slick Carousel into Foundation 6.5

阅读更多关于 Trying to load Slick Carousel into Foundation 6.5

问题 I'm trying to use slick carousel with Foundation 6.5 and can't seem to get it to work. I put the basic HTMl Markup <div class="slick-test"> <div>your content</div> <div>your content</div> <div>your content</div> </div> I added the js files to app.js, I changed from import to require() which seemed to fix an issue I was having with the slick script. require('../../../node_modules/slick-carousel'); require('../../../node_modules/slick-carousel/slick/slick'); require('./slick-scripts'); In slick

Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

阅读更多关于 Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element

问题 Let's get the fiddles out of the way first (built on the Foundation responsive framework): Fiddle 1: one nav element, but becomes unfixed when side nav slides out Fiddle 2: working but with multiple nav elments Okay so, I have been racking my brain trying to develop and elegant solution for the following: 1) Make a responsive, fixed navigation that switches from stretching across the top to sliding out of the side on smaller screen sizes (ala the Facebook app) 2) I'd like to use the same DOM

How to make Foundation 5 off-canvas navigation menu sticky?

阅读更多关于 How to make Foundation 5 off-canvas navigation menu sticky?

I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? My HTML so far is: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Foundation |

Google Map API in Foundation reveal modal not displaying properly [duplicate]

阅读更多关于 Google Map API in Foundation reveal modal not displaying properly [duplicate]

问题 This question already has answers here : Closed 7 years ago . Possible Duplicate: Google Map API inside a Reveal Modal not showing fully I have a Google Map API located within a Reveal Modal. For those that do not know what that is, it is basically a hidden container that pops up when a button is clicked. I have within this reveal modal the Google Map API, which is displaying, but not displaying all of the map, it is only showing maybe a third of it. How do I get the whole map to display? A

Using fixed position with a grid layout framework

阅读更多关于 Using fixed position with a grid layout framework

So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php . Which uses a twelve column grid. I am having problems positioning the fixed layout and still using the grid at the same time. How can I use a grid layout and fixed elements on a page? <div class="container"> <div class="row"> <div class="four columns relativePosition"> <div class="fixedPosition"> <div class="four columns"> Menu Here </div> </div> </div> <div

Sass importing without compiling

阅读更多关于 Sass importing without compiling

In sass, the way one imports is by using the import command. I will use Zurb Foundation as an example: @import "foundation"; This will then import the whole foundation.scss file and all it's relative imports to the top of the current file. This means that the entire foundation.scss file will be compiled and outputted along with the contents of the file to the final <name here>.css file. Though this is good for customisation, such as custom colors and spacing, it becomes a pain when creating libraries and distributing these libraries as individual droplets for other people to slot into their

Configuring zurb foundation-sass with compass - how do you get it working and use it in a project?

阅读更多关于 Configuring zurb foundation-sass with compass - how do you get it working and use it in a project?

I'm new to sass and zurb foundation (I've used bootstrap/less via codekit in the past) and have been trying to use the sass version foundation-sass but can't successfully get it configured - either via the command line using zurb's gem or by using codekit. If I configure the gem: Foundation works as long as I load all the foundation components via @import "ZURB-foundation"; But if I try to load components separately by uncommenting @import "zurb/buttons"; I see errors: "Undefined variable: "$default-color" - but where do the variables and mixin files live? Also, where do the foundation scss