标签: zurb-foundation

我正在使用Zurb Foundation 4(S)CSS框架,我遇到了大量重复样式的问题.这是因为在每一个我的文件@import 'foundation'中,从基金会的所有样式也导入(对于规则body,.row,.button和朋友).这导致SCSS编译时间长,并且Chrome中的Web开发人员控制台难以导航,因为Zurb的所有样式都被声明了四到五次.

为了缓解这种情况,我创建了一个globalsscss文件,其中包含Foundation使用的可重写变量(它是从中复制粘贴的foundation_and_overrides.scss,然后是foundation_and_overrides导入全局变量).仅导入globals.scss文件只能在不使用Foundation mixins 的文件中删除重复.

它位于使用Foundation mixins的文件中:我可以只导入SCSS文件中的mixins,而无需导入具体的Foundation样式吗？

我已经设置了一个新项目来使用Gulp和Sass测试Foundation 6,但它似乎根本没有编译.还有另一篇文章接近这个主题,但我个人认为接受的答案不是正确的解决方案 - 因为它包含了所有组件,实际上与Zurb建议的相反(参见此问题:https://github.com/zurb/foundation-sites/issues/7537).无论如何 ......

我从凉亭安装了Foundation 6.1.1,并添加了我的gulp-sass函数的路径,gulpfile.js如下所示:

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/theme.scss')
        .pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(gulp.dest('css/'))
});

我的theme.scss情况如下:

//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';

body{
  background: red;
}

编译我的scss时我没有错误,但输出theme.css看起来像这样:

/**
 * Foundation for Sites by ZURB
 * Version 6.1.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
body {
  background: red;
}

所以看起来它正在击中文件,因为评论输出但它没有编译任何Sass导入foundation.scss.

我正在使用ZURB基础CSS框架来设计一个网站.目前我正在尝试创建一个将保留在页面底部的页脚.我有以下代码的页脚,但它不会到底,而是它出现在中间.

您能否告诉我如何创建一个将保留在底部的页脚(使用ZURB基础框架)？

<div class="row">
    <div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div>
</div>

我正在尝试将我的Ruby on Rails应用程序从Foundation 4升级到新发布的Foundation 5,并且CSS切换相对平稳.但是,我遇到了切换Javascript文件的问题.

当我切换Foundation.min.js和modernizr.js文件的Foundation 4版本然后重新加载页面时,我在控制台中得到了这个奇怪的JS错误:

Uncaught TypeError: Layer must be a document node foundation.js?body=1:35
  FastClick foundation.js?body=1:35
  FastClick.attach foundation.js?body=1:35
  (anonymous function) foundation.js?body=1:40
  (anonymous function)

我甚至不知道FastClick做了什么,但它似乎包含在Foundation 5中,它正在阻止Foundation加载.反过来,这也导致我所有依赖于Foundation的JS都失败了.

任何帮助将不胜感激,谢谢!

以下代码使用Bootstrap 3.0显示Rails Flash消息:

<%# Rails flash messages styled for Twitter Bootstrap 3.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div class="alert alert-<%= name == :notice ? "success" : "danger" %>">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>

代码来自文章Bootstrap和Rails.

Foundation和Rails一文中的类似代码可以与Foundation一起使用:

<%# Rails flash messages styled for Zurb Foundation 5.0 %>
<% flash.each do |name, msg| %>
  <% if msg.is_a?(String) %>
    <div …

我希望有一个5列row,只有1列用于宽度小于480px的小型设备屏幕.

我是zurb基金会的新手,还在学习它.

小提琴示例http://jsfiddle.net/V7TuY/1/

<div class="row">
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 1]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 2]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 3]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 4]" />
        <p></p>
    </div>
    <div class="small-6 medium-3 large-3 columns">
        <img src="http://placehold.it/480x600&text=[img 5]" />
        <p></p>
    </div>

对于列或列表这种事情是否更好？ ul li

我正在使用Zurb Ink模板发送电子邮件.当我在mailcatcher(来自开发服务器)中查看电子邮件时,一切看起来都不错,但是当我从生产服务器(到我的Gmail帐户)收到电子邮件时,所有的CSS样式都消失了.

CSS全部是内联的,我使用的是Zurb的基本模板.

我是JS的新手,并且找到了前一个问题的答案,这个问题提出了一个新问题,这个问题又把我带到了这里.

我有一个包含Google Map API的Reveal Modal.单击按钮时,弹出"显示模式",并显示"Google地图".我的问题是只有三分之一的地图在显示.这是因为需要实现调整大小的触发器.我的问题是如何实现google.maps.event.trigger(map,'resize')？我在哪里放置这一小段代码？

这是我的测试网站.单击Google Map按钮查看手头的问题. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

显示模型脚本:

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
       });
          });
 </script>

我的Google地图脚本:

<script type="text/javascript">
 function initialize() {
 var mapOptions = {
 center: new google.maps.LatLng(39.739318, -89.266507),
 zoom: 5,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"),
 mapOptions);
 }

 </script>

持有谷歌地图的div:

  <div id="myModal" class="reveal-modal large">
  <h2>How to get here</h2>
  <div id="map_canvas" style="width:600px; height:300px;"></div>
  <a class="close-reveal-modal">&#215;</a>
 </div>

更新2018-05-22

使用Maps JavaScript API版本3.32中的新渲染器版本,resize事件不再是Map类的一部分.

文件说明

调整地图大小后,地图中心将固定

• 全屏控制现在保留了中心.

• 不再需要手动触发resize事件.

来源:https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 从版本3.32开始没有任何影响

根据Foundation关于网格组件的文档,我基本上可以使用它们的偏移类将一个或多个网格列作为空格:

<div class="row">
  <div class="large-1 columns">1st column</div>
  <div class="large-9 large-offset-2 columns">2 spaces to the left of this column</div>
</div>

这将产生1列,然后是2列普通空间和9列.是否可以将这些偏移量放在元素的右边而不是左边？例如,这样的事情？

<div class="row">
  <div class="large-1 columns">1st column</div>
  <div class="large-9 large-offset-right-2 columns">2 spaces to the right</div>
</div>

我想在我的下拉列表中添加一个CSS3效果.(就像Instagram.com中关于"我的个人资料"的那个).

我正在使用Animate.css来获得CSS3效果.

我试过这个,但它不起作用.

HTML

<a href="#" data-dropdown="dropdownalerts" data-options="is_hover:true"><%=fa_icon "bell"%></a>

<ul id="dropdownalerts" class="f-dropdown text-left animated bounceInDown" data-dropdown-content>
   <li><%=link_to "Facebook", "#"%></li>
   <li><%=link_to "Email", "#" %></li>
</ul>

JS

$(document).ready(function(){
    $('a').hover(function(){
        $("ul").addClass('animated bounceInDown');
    });
});

您可以在Zapping.io上找到实时版本