标签: css-frameworks

在过去的一年中,我成为BluePrint.css的粉丝,负责管理更大的Web应用程序项目.我也看了960和YUI的产品.一切都很好(虽然我有一些关于YUI的抱怨).

我现在正在开发移动项目,并且考虑到我们需要适应各种屏幕尺寸,我认为css网格框架是重新开始的方式.

我可能会大量修改BluePrint逻辑和/或从头开始构建一个,但在我这样做之前,我想知道是否有人使用过特定的移动框架并且会为移动设备推荐一个特定的框架.

我看过Less和cssgrid

http://lessframework.com/

http://cssgrid.net/

两者都很好.较少使用一致的列宽并更改列数.Cssgrid使用流体柱来适应屏幕尺寸.另一方面,我正在设想另一种方法,我们使用固定数量的列,然后根据屏幕宽度动态调整宽度.我更喜欢这个选项,因为我发现流体网格很难通过大量嵌套来管理.我应该先看看其他任何选项吗？

澄清:我目前不一定需要一个完整的UI框架.我们肯定会得到一个,无论是jQuery还是我们自己的,但现在的主要目标是找到和/或构建一个CSS框架来处理跨多个移动设备屏幕分辨率和方向的一般页面布局和定位.

我正在寻找一个钟声和口哨CSS框架.我在网上找到了一个处理"网格"的数字,还有一些处理"排版"和其他处理"重置"的数字.

我没有找到的东西将使我的Web应用程序具有一致的可重用样式或主题.

我想它必须有许多预定义元素来做事情,例如:

div.boxed {...}

然后是一些以一致的方式提供这些主题或插件的主题或插件.像ExtJS,YUI和GWT这样的Javascript工具包有它们自己的可穿透性,我想这是我想要的功能集,但独立于任何Javascript库.

(开源是最好的,但我们不介意付费)

编辑: 5个很好的答案,但我已经看到了所有这些框架,但它们还不够我想要的东西.也许我正在寻找的东西不存在.或者我没有正确解释.我会给他们一个好的过去看看.

对于那些仍然不了解响应式设计的人,我建议这个链接

只要它不了解媒体查询,如:

@media screen and (max-width: 1280px)   {
    h1 { font-size: 120px; padding: 10px; color:#999999 !important; }
    h2{font-size:35px;}
}


@media screen and (max-width: 1024px)   {
    h1 { font-size: 90px; padding: 1px; color:#999 !important; }
    h2{font-size:25px;}

}

@media screen and (max-width: 740px)    {
    h1 { font-size: 70px; padding: 1px; color:#999 !important; }
    h2{font-size:16px;}
    .left-col { width: 100%; }
    .sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 478px)    {
    h1 { font-size: …

我不是网页设计师,我没有很多时间进行自定义.我正在创建一个LoB Web应用程序的网站.大多数用户将在桌面上使用IE 9,但在现场的一些iPad/iPhone访问中将需要一些响应页面.

有人可以给我一些理由支持和反对选择Foundation或Bootstrap与Visual Studio 2012中的ASP.NET Web窗体一起使用吗？

有几种方法可以在每个页面中设置元素的样式,在企业应用程序中,CSS Framework大小通常会增加大约1 MB,当用户使用慢速Internet连接时,应该减少css框架大小.

我们可以为我们的元素创建新的CSS,比如.Blah,并在css框架中对它进行评估,并为每个元素执行此操作,这会导致css框架的大小增加,但页面更清晰

<div id="blah" class="blah"></div>

我们也可以在每个视图中使用我们的css框架实用程序来格式化每个元素以保持css框架的大小,但是一个非干净的页面

<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>

上述哪种方法是企业应用程序的最佳方法,同时确保大多数用户使用慢速Internet连接

这是我第一次使用Zurb Foundation进行网络项目.但是,我不确定是否在单独的样式表中使用我自己的样式覆盖它们的样式或直接编辑foundation.css.

例如,这是他们的nav css(内部foundation.css):

.nav-bar {
    background: #4D4D4D;
    height: 40px;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;
}

如果我想改变background和margin-top,我直接编辑.nav-bar从foundation.css或创建自己的样式表(把style.css以下foundation.css),并覆盖它,像这样:

.nav-bar {
    background: #999;
    margin-top: 0;
}

这是好习惯吗？如果没有,最好的方法是什么？

我正在创建一个网站,并希望它具有响应性,所以我使用的是bootstrap 3.但是,隐私政策页面和关于页面的h1标签在小型移动设备上从容器中出来,因为单词太大了.有没有办法让h1标签的尺寸减小到适合小型移动设备的容器？如果有人想查看我在说什么,该网站是muscadinewinerecipe.com.这是关于页面和隐私政策页面.

使用LESS for CSS的最佳方法是什么？

• 基本上,Devs应该编写一个Less文件,然后编译生产
• 我应该链接LESS代码和javascript文件.
• 或者我应该完全跳过LESS溃败并重新制作课程

我正在努力争论一些相当草率的CSS,并希望在做出重大改进之前控制它.我认为拥有网站范围的变量是非常好的所以对于变量和嵌套来说,Less似乎是件好事.

我用css渐变和框阴影替换了很多背景图像,所以我也试图摆脱供应商的前缀.有时候我会看到类似于类重载的东西,但是将很多类附加到元素上是不好的

<div class="comment dark-shadow round-corners"></div>

是否存在与blueprint/yui/960相同的活动/实体跨浏览器css框架,该框架支持基于百分比的液体布局？

我见过Emtastic,但它看起来好像已经活了大约一年了.您如何看待Matthew James Taylor的Liquid Layouts？

是否有一种简单的方法在Zurb Foundation 4中的网格单元之间有间距？我不想搞乱基金会元素的CSS,因为这可能会抛弃其他东西.Grid文档中有一个$column-gutterSCSS变量:

$column-gutter: 1.875em !default;

但是,我不确定这是什么,因为我的列之间看似零空间,而不是1.875em.我是否希望确保单元格内的所有内容都有填充？