zurb-foundation

问题 I am using zurb foundation 4 framework. The following test site looks fine on desktop view for me. On desktop view, I have on the left side: large-7 columns (gray content text box); on the right side: i have: large-5 columns (image 1 green and image 2 blue). Please help me with exact code example. On tablet and phone view, I would like to rearrange the order of the div columns to: image 1 green box first, and then below that is gray content text box, and then below that is image 2 blue box.

问题 I'm trying to make myself a form, but I need to prevent some UX stuff depending on if a form was entered correctly. Is there an api for manually issuing the validation routine to a form's field? I know that I could listen to the post-validation events, but I actually need to start the validation from an external source. Is this possible? 回答1: You can dispatch a change event to the form with jQuery: $("#myForm").trigger("change"); It will trigger validation. 回答2: The accepted trigger on the

问题 I need to position several div rows to the bottom of a container, similar to the image here: My problem lies in that almost every solution on SO requires either absolute positioning or some method which requires modification every time a new element is added. I tried using a display:table-cell and vertical-align:middle, but this broke my row layout (all rows had display:block;). Is there a way to get this done in a way I can keep adding html rows to the layout and it will grow from the bottom

问题 I'm trying to invoke the recalculation of the sticky header when using Foundation 6. However everything i attempt returns We're sorry, '_calc' is not an available method for this element Here's the declaration of the sticky element: <div id="sticky-container" data-sticky-container> <div id="sticky" data-sticky data-margin-top="0" data-top-anchor="the-table" data-btm-anchor="footer:bottom" style="width: 100%"> I've tried: $('.sticky:visible').foundation('_calc', true); $('#sticky-container')

问题 I have been having no end of difficulties in trying to set up Foundation 5 so that I can customise it using SASS. According to Zurb Foundation using SASS is the easiest way to customise it but for some reason there isn't any useful documentation on this. I have searched everywhere and found bits and peices of inforamtion and have finally managed to get something working so that when I amend the main SCSS file it creates a corresponding CSS file. However, whatever variables I add to my SCSS

问题 I'm struggling to install foudation js 6 with webpack. I have an "Unexpected token import". I think it's should be related to babel but I can't find wher's the problem. I use foundation-sites 6.4.1 Here's my webpack.config.js var webpack = require('webpack') var ExtractTextPlugin = require('extract-text-webpack-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var express = require('express') var path = require('path') module.exports = { module: { loaders: [ { test: /\.json$/,

问题 I'm new to webpack and this module bundler stuff and I'm currently just experimenting around what's possible and what isn't. Here, I'm trying the following: //appECommerce.js import eCommerceLogic from './lib/eCommerceLogic.js' //eCommerceLogic.js import name from './eCommerceJSExportTests.js'; module.exports = { productnamesOnclick: function(){ $("#AJAXproductnames").on("click",function(){ getProductnameElements() }) }, productNamesGetter: function(){ async function getProductnameElements(){

问题 I'm unable to make the following SCSS increase the font-size on mobiles and tablets : // Mobile @include breakpoint(medium down) { $global-font-size: 200%; } The generated CSS files isn't even changed after adding the code above. 回答1: Unfortunately it's not possible to define a SASS variable inside a media query. See this Closed issue for a more detailed description (has Foundation as an example). You can do a similar kind of thing like this though: %screen-font { font-size: 100%; @media #{

问题 I'm building a responsive site using Zurb Foundation. I have a PHP script which will resize and caches an image using gdlib if you append a query string with new dimensions in the URL. For example to resize an image to 300px wide: http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300 I am also using some HTACCESS rewrite rules to make this URL pretty and avoid having a query string. So this URL gives the same result as above: http://www.mydomain.com/img/300w/path/to/picture1

问题 I'm having a problem with Foundation 5's recommended SASS installation. http://foundation.zurb.com/docs/sass.html I followed the brief tutorial only a week or so ago and had no problems. Everything seemed to run OK and looked OK. Over the course of the next few days I was making amendments to the project I am working on but only put the changes (CSS) into a custom.css file. I was wanting to ensure my client was happy with my proposed design before getting into the guts of SASS. This evening I