标签: css-frameworks

对于现有应用程序的rails CSS框架,您更喜欢哪一个 - LESS或COMPASS？

我是Web开发的新手,我想要一个框架来构建自定义cms.

从头开始制作一个Web模板与每个浏览器一起工作真的很痛苦.我正在考虑制作一个小框架来满足我的需求,但我现在没有时间.

所以我的问题是使用什么框架.

那里有很多,我真的很困惑.

我刚刚下载了语义CSS并运行了示例,但在Firefox上看到了以下错误

Access to restricted URI denied

file:///C:/semanticcss/examples/fixed/fixed.less 

下面是示例页面中的代码

<!-- Stylesheets -->
    <link rel="stylesheet" href="fixed.less" type="text/less" media="screen" />

<!-- Scripts -->
    <script src="../../js/less-1.1.3.min.js" type="text/javascript"></script>

我怎样才能摆脱这个错误？

有许多网格和框架可供选择.谷歌搜索CSS框架将返回十几篇文章,这些文章本身列出了许多可供选择的框架.

在选择一个时,如果不熟悉所有这些内容,很容易丢失.

选择CSS框架的主要因素是什么？这些选择将如何映射到某些框架？

更一般地说,如何选择CSS框架？

注1:我在这里几乎可以互换地使用"网格"和"框架",但可能有一个我应该使用另一个.对此的更正是受欢迎的.

注2:我很清楚,一些选择将取决于品味,因此,这个问题可以变成"最好的"比赛/主观话题.我试图尽可能地保证它是可以回答的,因为我很确定很多人有这个问题/选择框架的问题和答案,这将有益于社区.因此,欢迎改进这个问题,而不仅仅是关闭它.

我知道Twitter bootstrap在创建一个新项目时有几个用mvc 4滚动的模板,但是有一个使用Semantic UI吗？谷歌搜索与我的相关性很小,在VS2012中的在线模板中搜索时,我也无法找到任何搜索.

这更多的是辩论，而不是问题，但我觉得互联网上没有很多关于这个主题的文章。

例如，Foundation附带了数百个！important标签，这些标签在我眼中不需要它们：

.text-center { text-align: center !important; } 

有很多与此类似的css，在我看来这是不好的做法，我想回答的问题是，为什么css框架完全使用它们？Bootstrap和Foundation是两个都使用它们的主要CSS框架。

一直有人告诉我，在CSS中使用重要标记是非常不好的做法，并且仅应用于IE。

我熟悉使用Bootstrap(v3和v4)开发webapps和网站,但现在我想开始使用Semantic UI.

经过一些实验,我觉得Semantic UI提供的可组合性比Bootstrap少,但我可能会遗漏一些东西.例如,我还不清楚如何将文本静音？Bootstrap有一个text-muted类,但我在Semantic UI中找不到相应的东西

题

你能描述一下必要的范式转变吗？以下是一些可能有助于您确定答案的问题:

• 我应该停止做什么/使用什么;
• 我应该开始做什么/使用呢？
• 是否存在任何服务器端注意事项/限制？

NB:我不是在寻找Semantic UI和之间的详细比较Bootstrap.

当我说CSS Framework时,我不是指重置或网格.我的意思是像xCSS或csscaffold或指南针这样的框架.

我已经做了几年CSS,但没有太多的框架接触.有没有人有与他们合作的经验？有哪些潜在的缺点？哪些框架受欢迎/推荐？

谢谢.

我正在试用Bulma flexbox css 框架- 到目前为止它非常整洁！我发现的唯一障碍是我似乎无法设置移动设备的显示顺序。

<div class="columns">
    <div class="column foo">Foo</div>
    <div class="column bar">Bar</div>  // Would like this to be first on small deviecs
</div>

编辑

这是我的 css 的样子：

body, html {
    background-color: blue;
}

.foo { order: 2; }
.bar { order: 1; }


@media only screen and (min-width: 769px) {
    body, html {
        background-color: red;
    }

    .foo { order: 1; }
    .bar { order: 2; }
}

在bulma.io中重新创建此内容的最佳方法是什么？包括责任感，汉堡包等

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">

    <div class="container">

        <div class="row navbar-first-row">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar-main-collapse">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
                <span class="sr-only">Toggle navigation</span>
            </button>

            <div class="navbar-right navbar-text hidden-xs">
                Logo
            </div>

            <h1 class="h4 navbar-text">Really long application title</h1>

        </div>

        <div class="row navbar-second-row">

            <div class="navbar-right navbar-text hidden-xs">Logged User</div>

            <div class="collapse navbar-collapse" id="navbar-main-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>

        </div>

    </div>

</nav>

--- tl; …