标签: css-frameworks

我是Bourbon/Neat的新手.我有一个关于嵌套的问题:我希望红色框填满整个宽度,它们之间没有沟槽.当对它们使用"@include omega"时,第一个框将删除其边距右边,但右边框仍然有边距,并且不调整其宽度.

你能告诉我如何让它们跨越整个父盒而它们之间没有任何边缘吗？

这是一个演示:http://wuergeengel.net.dd13736.kasserver.com/

这是我的标记:

<div class="container">
  <div class="box box-left"></div>
  <div class="box box-right">
    <div class="box-red-left nested"></div>
    <div class="box-red-right nested"></div>
  </div>
</div>

这是我的风格:

.container
{
  @include outer-container;
}

.box
{
  border: 1px solid black;
  height: 500px;
}

.box-left
{
  @extend .box;
  @include span-columns(4);
}

.box-right
{
  @extend .box;
  @include span-columns(8);

  .nested
  {
    border: 1px solid red;
    height: 400px;


    &.box-red-left
    {
      @extend .nested;
      @include span-columns(3 of 8);
      @include omega;
    }

    &.box-red-right
    {
      @extend .nested;
      @include span-columns(5 of 8);
      @include …

CSS框架内置了很好的样式,并要求你专注于网格,但仍然有一点依赖和它提供的自由缺乏..如果我需要通过查看基于PSD的模型屏幕生成一个网页..我要么使用框架提供的类,但如果实际测量不存在,我需要再次指定我自己的规则,这些规则将添加到我的CSS文件大小,如果性能是一个约束,它总是......你不需要一个大的文件虽然它在kb但是每一滴都很重要.

以最佳方式使用框架的任何意见和建议.

我想知道,哪个css框架最适合ASP.NET MVC 3？我已经尝试了yaml,在我看来它有几个缺点,至少使用ASP.NET MVC 3:

1. 默认情况下使用按钮输入(因此,与jquery ui不兼容,因为jquery ui使用对话框中的按钮).
2. 你需要为ASP.NET MVC 3验证调整css.
3. 我不喜欢他们如何描述形式(这可能只是我对此的主观意见,无论如何,如果你希望坚持yaml css风格,你需要使用自定义编辑器).
4. 一些css类名称不是很直观.

没什么,那将是显示停止者,但也许有更好的选择 - 某些东西,适用于ASP.NET MVC细节,或者可能是ASP.NET MVC项目存根,适用于yaml css框架.

更新:OOCSS看起来不错,重量轻,结构良好,值得一试.
更新2:TwitterBootstrap也越来越受欢迎,你可以在这里获取它的asp.net mvc http://nuget.org/packages/Twitter.Bootstrap

几个星期前,我开始了解LESS CSS.这正是我在编写css代码时应该可以使用的内容.

现在我非常渴望使用它,并希望在生产场景中应用它,但有一个问题.要使用LESS CSS,您有两种选择:
1.在网页中包含less.js.
2. 预编译LESS文件然后使用.

我无法承受的第一个选项,因为我需要使用大小高达43 KB的less.js.当我已经在使用Jquery时,这个adda额外加载.

第二个选项看起来很有希望,但问题是,对于生产中的代码,每次都无法编译LESS以根据更改进行测试.它应该是无形的体验,就像我直接编写CSS时所做的那样.我应该写下来,并立即反映在页面上.

那么有人可以帮我设置这种工作流程吗？

任何其他类似框架的建议表示赞赏.

我正在寻找一个响应迅速,大(超过1000像素)的CSS框架,以及我可以在哪里做的事情:

大型设计:

正常设计:

移动设计:

有什么建议 ？我已经尝试了960.gs,Titan框架,1140 css网格和Golden Grid System,但我不确定我能在其中任何一个中做我想做的一切.

我是GWT的新手,正在考虑使用Twitter Bootstrap来构建CSS框架.但后来我遇到了gwt-bootstrap,它自称是在GWT应用程序中使用Bootstrap的一种方式.

因为我对GWT很新,所以我有点担心/困惑:为什么GWT应用程序不能只使用常规的Bootstrap框架？为什么它甚至需要gwt-bootstrap？

我对CSS的极度沮丧是它无法在不同的浏览器(以及不同版本的浏览器 - 很好地工作 - 是的,我在谈论你的IE).

人们遇到的CSS框架是什么,以及它们的具体优势是什么？我今天听说过面向对象的CSS框架,但我还没有时间研究它.

如何在网格列之间添加分隔符。我尝试添加边框，但它总是破坏布局。请看一下所附的图片，以便清楚地了解。

编辑

看看这里

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

代码

<div class="container_12">
  <div id="footer">
    <div class="alpha grid_3 dabox"> </div>
    <!-- Box 1-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 2-->
    <div class="grid_3 dabox"> </div>
    <!-- Box 3-->
    <div class="omega grid_3 dabox"> </div>
    <!-- Box 4--> 
  </div>
  <!-- footer--> 
</div>

在构建一个相对较大的网站时,CSS结构应该从开始就适当地确定范围和组织.如果没有使用CSS框架,那么所有内容都可以集中到一个大规模的样式表中,但这很快就会出现故障并且可能成为巨大的维护责任.

在过去的几年里,我把我的样式表分成了各种文件,包括:base.css,layout.css,fonts.css,elements.css,但很容易,样式定义可以在文件之间跳转,这种方法需要更多严格.我没有使用过框架,因为我不喜欢CSS代码中的预设列和预定义元素.

您可以建议哪些方法,模式或技巧可以保持组织有序？什么类型的命名约定,可重用性实践和模式是有用的？这是框架应该用于什么的东西吗？

我正在尝试创建一个相当简单的 12 列 CSS 网格框架并允许嵌套网格。

.grid {
    grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
    column-gap: 2rem;
}

我目前遇到的问题是，当增加装订线宽度时，无论其中有什么内容，小数列都会被推出嵌套网格容器。

我尝试在声明列时将 minmax 值设置为 0，但它仍然坚持扩展。我知道这是因为装订线的宽度加起来超过了内容，但是有没有办法在不使用溢出属性的情况下强制它下降？

列被装订线和/或内容推动：

...当列应该容纳装订线时：

代码笔

.grid {
    grid-template-columns: repeat($grid-column-count, minmax(0, 1fr));
    column-gap: 2rem;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  display: grid;
  grid-template-columns: [left-gutter-start] auto [left-gutter-end] minmax(0, 960px) [main-content-end] auto [right-gutter-end];
  overflow-wrap: break-word;
}

.container>.grid {
  grid-column-start: left-gutter-end;
  grid-column-end: main-content-end;
}

.container>.grid.grid-breakout {
  grid-column-start: left-gutter-start;
  grid-column-end: right-gutter-end;
}

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: …