网站制作9个励磁开源萨斯框架

每一个CSS开发者应该知道萨斯,看看它提供。CSS的这种超已经彻底改变了样式很像的jQuery JavaScript的革新。

而与许多CSS的UI框架,我们也有SCSS /萨斯前端框架。其中大部分是相当新的,但很快获得牵引力。

我们已经策划了最好的免费SCSS框架9在这里,所以如果你是一个无礼的用户,那么你就一定要检查这些了。

1.内华达

在塞拉利昂框架被吹捧为市场上最轻的和最小的SCSS框架之一。目前在V2.0它的重量共37KB的。

这可能不是字面上最小的选项摆在那里,但即使是精缩引导样式表总计〜120KB所以塞拉利昂是相当轻。它也与以混入,按钮,表格,排版等常见的网页元素单独的文件组织。

此文件分离是无礼的发展标准和定制的框架时,它使你的工作更容易。

你会发现所有的主要元素的完整现场演示Sierra的主页上与设置文件一起在GitHub上。所以它绝对值得一试,如果你很好奇我会在前三名全部萨斯框架率这一点。

网站建设

网站建设

2.滑板车

该团队在Dropbox的放在一起叫自己的前端框架的滑板车。因为它是为前端原型创建这个比最简单得多。

Dropbox的其实有很多在GitHub开源的东西,其中包括自己的风格指南格式化CSS / SCSS代码。这一点资源可以证明非常有用,如果你想潜入踏板车和鼓捣默认源。

大多数的滑板车的风格实际上是从Dropbox的像他们在上的按钮借用想法部件页。这提供了一个很酷的方式,同时使用一个尝试和测试,UI风格为原型自己的webapps在萨斯。

网站建设

网站建设

3.开球

对于东西多一点详细的你可以尝试的开球库。这将运行在萨斯基地,有自己的命名方案增加新的变数。

但开球一切混合一点点从CSS网格更加复杂的JS组件的所有交付和维护,通过Gulp.js。

如果你还没有使用咕嘟咕嘟那么这个框架有一个学习曲线。但整个代码库是非常未来为中心,重点是ES2016和Flexbox的。

这是一个只有8.6KB的CSS样式表和JavaScript的进账2KB极瘦。开球是指作为样板在那里它只是一个起点,这样你就可以打造出来的一样苗条或详细所必需的任何项目的东西。

采取偷看他们的在线演示,看到了它在浏览器中。

网站建设

网站建设

4. MATERIALISE公司

大家都知道谷歌的材料设计和如何快速蔓延在整个网络。这导致许多开发人员创建自己的样式模仿谷歌的指导方针和一些这些样式是网上免费。

Materialise的是谷歌的指引特别建立了一个CSS /萨斯框架的一个例子。该框架在技术上仍处于beta版本0.9在写这篇文章的。

但我要说它是生产足够的网站,并完全有在萨斯选择权的介绍页面。所以,你可以下载基本的CSS / JS文件或获取CSS +萨斯的进一步发展。

这是如此受欢迎,它可以在CDN的,所以你甚至不需要在本地下载CSS。

任何符合谷歌的材料款式绝对应该与Materialise的库开始。你会发现,沿网站上完整的文档的展示的运行Materialise的网站。

网站建设

网站建设

5.戏法

在骗人的框架并不认为自己的框架,而是一个起动器的设计新项目套件。

这个UI套件restyles网页上的所有默认的HTML元素,它有一个很好响应网格对齐这些元素。当然整个事情依赖于萨斯这使得开发过程变得简单许多。

戏法感觉更像是对立面来引导。你不会在直播网站直接使用。但是,你会以此为出发点,以原型和快速构建思路。虽然它可以很好的基础,因为它运行在工作了正常化。

从前期风格的表,按键和自定义表单元素,戏法增添了简约触摸到所有的默认浏览器的风格。

网站建设

网站建设

6. GRIDLE

该Gridle框架是,你会发现最定制SCSS电网框架之一。它是由萨斯供电,它配备了几十个专门为这个网格系统进行自定义的混入和功能。

你会找到一个实时预览演示页面在这里免费托管在GitHub上。还有一个完整的安装向导在主回购,讨论了如何定义从非常简单的网格更复杂。

需要注意的是Gridle确实需要电网系统的一些现有的知识和它肯定不是灵丹妙药。

但它会为您节省数小时的时间手工编写一个从无到有的电网,更何况它的可重复使用的几乎你设计的任何项目。

06-gridle-grid-system

7. IOTACSS

其中一个用于构建CSS的最佳方法是OOCSS风格。在此之前,一个对象结构,你设计出更多的类和关系,而不是嵌套的特异性。

iotaCSS是少数OOCSS框架之一,它是真正易于使用。您可以通过浏览小型预览的源代码,看看命名约定以及如何使用BEM / OOCSS语法。

关于丝毫一个独特的区别是,它没有专门的UI套件。相反,它是一个框架,以帮助您创建一个UI套件仅通过萨斯。这意味着它不是一个即插即用的解决方案,但它也提供了更大的定制。

该在线文档是惊人的,所以这是打造出了从无到有自己萨斯供电的样式表一个奇妙的框架。

07-iota-css-framework-scss-oocss

8.查找

现代CSS正在向模块化和灵活的结构,Flexbox的。这似乎是新的常态和布尔玛是领导负责。

这个免费萨斯框架,可以用Flexbox的工作完全从头开始创建充分响应电网系统。这意味着容易垂直+水平定心的,固定高度格框和一大堆默认样式。

你可以找到在现场演示的主网页与安装说明一起在GitHub上。

默认情况下,布尔玛只是一个CSS文件,它甚至上承载的CDN是免费的。但鼓励开发者下载的文件的Sass和工作与变量添加自己的功能。

08-bulma-css-scss-library

9.与SUSY

与Susy是一个负责任的Sass工具包,从头开始构建布局。这是一个独特的库,因为它不使用默认的网格设置或样式表准备发射。

相反,与Susy提供一系列的工具与教程,您可以按照创建自己的网格布局。

这些不同的工具可以让你定义变量定制断点,定制网/排水沟设置,并在各种混入良好的措施的折腾。您可以快速样式嵌套的元素和目标只用几行代码非常具体的页面元素。

因为这不拿出一个默认样式它不是一个现成的解决方案去。但如果你是一个开发人员的Sass希望节省时间,然后通过略读与Susy的文档,看看你的想法。

09-susy-breakpoint-scss-stylesheet

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259322.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论