sassCore——设计更好的sass库

作者:简水 日期:2013-05-25 点击:7

目前sass库中应用最多的应该就是compassbourbon,但是使用之后会发现compass设计太复杂了,而bourbon有点太简单了。于是只好琢磨着去搞一个使用起来更方便合理的sass库,经过翻阅众多资料、实践及思考,终于有了现在的sassCore,当然到目前为止sassCore还不是非常完善,但是对付日常的工作已经很够了。

之所以说是设计更好,决不会空穴来风,下面我们从几个方面简单说下sassCore的优势。

1、sassCore涵盖范围广,目前涉及了setting,reset,mixin,css3,typography,media-queries,grids,helps八个部分。

2、sassCore采用开关机制,对是否支持ie6/7等众多条件可以通过设置为true或false来搞定。

前端技术

作者:大漠 日期:2013-05-24 点击:16
前端技术

互联网是一个快速进化。我们工作的一个重要部分是前端开发人员,需要跟上潮流和不断学习新工具、趋势和工作流。在互联网上,每一天数以百计的博客和文章发表,但是你没有办法可以都读得过来。我们认为你应该有要有不断更新的方法,所以我们创建了这样的一个网站。在线地址:http://uptodate.frontendrescue.org/ 。

Github地址:https://github.com/frontend-rescue/keep-up-to-date。让我们得到这么好的学习资源,我们应该特别感谢:Guille PazHer MammanaLean Linares给我们提供这么好的资源。省去了我们大量在网上搜索的时间。

Flexbox制作CSS布局易如反掌

作者:大漠 日期:2013-05-24 点击:29

伸缩盒模型(flexbox)是一个新的盒子模型,主要优化了UI布局。作为实际布局的第一个CSS模块(浮动真的应该主要用来制作文本围绕图片这样的效果),它使很多任务容易多。Flexbox的功能主要包手:简单使用一个元素居中(包括水平垂直居中),可以让扩大和收缩元素来填充容器的可利用空间,可以改变源码顺序独立布局,以及还有其他的一些功能。Flexbox一直都存在。它最开始作为Mozilla XUL的一个功能,被用来制作程序界面,如Firefox的工具栏,就多次使用这个属性。该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持。然而有一些事项需要注意。在IE中规范更改了他的语法,因此你将需要使用一个稍微不同的语法。Chrome当前版本仍然需要添加前缀“-webkit-”,而Firefox和Safari仍然还在使用最老版本的语法。Firefox已经更新为最新的规范,但是,在实际项目中目前最好还先别使用最新的规范,直到它被认为没有bug了或者更稳定了,在使用。在这之前,Firefox还是使用最老的语法规范。根据的《Designing CSS Layouts With Flexbox Is As Easy As Pie》所译,再次向大家介绍了Flexbox的使用,以及罗列出Flexbox布局模块在各规范下的属性对比。

Grid

作者:大漠 日期:2013-05-22 点击:19

CSS中的grid属性是网格布局的一个基础。它主要用来解决使用老布局技术还来的一些问题,比如浮动布局(除除浮动)、inline-block布局(间距问题)。通过提供一种新的方式来给Web页面布局。这个想法是把一个元素定义为一个网格。可以想像成电子表格的行与列。然后,你可以把每个子元素定义成一个列和行(类似于单元格)。不需要修改任何标记,直接通过css搞定。随着这个技术的成熟,我们可以使用这个方法解决我们老的布局技巧带来的问题。而有他的主要优点是你可以在一个页面上不改变文档流的顺序重新排列你的布局顺序。

再说CSS3渐变——径向渐变

作者:大漠 日期:2013-05-22 点击:26

上节在《再说CSS3渐变——线性渐变》和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用。今天我们在这一篇中主要和大家一起来了解渐变中的径向渐变新语法以及其基本使用。以及在本文结束尾处一起探讨了一下如何让低版本兼容CSS3的渐变,以及一些兼容方案。不过在下更愿意希望大家放弃兼容性,大敢的去尝试使用,学习使用。如果实在需要使用到项目中,如果用户实在需要兼容性一致,可以在换思路,但对于学习来说,无需顾虑是否兼容。

再说CSS3渐变——线性渐变

作者:大漠 日期:2013-05-22 点击:28

渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异。

事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中。另外,在实际应用中可扩展性差,还直接影响页面性能。

值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐变图片的效果。而且渐变属性慢慢得到了众多现代浏览器的兼容,甚至烦人的IE,在IE10版本也支持了这个属性。

git——简易指南

作者:大漠 日期:2013-05-22 点击:28
Git对于我来说,只知道是一个版本控制器,类似于乌龟的svn。其中也仅仅会几个常的命令,比如说“更新git pull”、“提交git push”等等,因为记得当初使用的时候,师傅告诉我,对于你不懂这个不要紧,记住几个常用的命令就足够使用了。 师傅的话没有错,有这些命令是足够使用了,但往有时候还是很难完成我们工作中的需求,比如如何安装、分别何创建库等,这就几个命令无法实现的了。只可惜自己太懒,以致于每次使用的时候都需要去查找相关的资料,真是无颜面对江东父老呀。 今天邮件中收到一个有关于git指南的资源,真是清新悦目呀,几句话就把git说的清清楚楚,可谓是应该讲的都讲了,而且是简单明了。并且发现其有中文版本,特意将其中文版本搬到小站上,与大家分享。

CSS3 Grid Layout

作者:大漠 日期:2013-05-21 点击:26

Web页面的布局,我们常见的主要有“浮动布局(float)”、“定位布局(position)”、“行内块布局(inline-block)”、“CSS3的多栏布局(Columns)”、“伸缩布局(Flexbox)”以及“网格布局(Grids)”等,在众多布局方法中,大家最为熟悉的就是浮动布局和网格布局,并且使用不同的细节能得到不同的布局效果。虽然这些布局能让大家实现常见的布局效果,但在实际中还是存在不少的问题,比如说浏览器的兼容性、修改显示顺序需要调整文档结构等。那么有没有什么更好的,更理想的布局方法?这也就是今天要和大家一起学习的一个布局模式——CSS3 Grid Layout

关于HTML语义和前端架构

作者:大漠 日期:2013-05-20 点击:46

关于HTML语义化大家讨论的很多,熟不知如何写一个具有语义化的结构。同时前端的架构要怎么布。这些都是做为前端人员应该去考虑的问题?由Jekst根据Nicolas的英文文章原名《About HTML semantics and front-end architecture》进行翻译,Nicolas把他喜欢的思想,经验和主意,还有在过去的一年里,我试验过的想法汇集起来。它们包括HTML语义,前端构架的元素与途径,类命名模式和HTTP压缩。希望这篇译文对大家有所帮助——我们探索的脚步将永无止境,直到回到最初的起点,到那时 我们才会第一次,真正了解 自己出发的地方。

IE10中的Flexible Box("Flexbox")布局

作者:大漠 日期:2013-05-13 点击:47

经过这一系列对Flexbox的介绍,我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来,虽然Flexbox功能强大(特别是弹性布局),但还是很多同学不敢使用,也不想尝试性使用。我想主要原因出于他的语法版本众多,浏览器对其兼容性等。在《“老”的Flexbox和“新”的Flexbox》一文中,让我们了解了如何识别Flexbox的语法版本,而在《使用Flexbox:新旧语法混用实现最佳浏览器兼容》和《跨浏览器的Flexbox》能实现浏览器的完美兼容性。既然有方案能让Flexbox布局模块在众多浏览器下实现兼容,那我们今天要说什么呢?从浏览器的兼容性中可以看出,Flexbox布局模块的最新语法“display:flex”在Chrom25.0+、Opera12.1,Firefox22+、IE11+都得到了支持,但我们还有很多用户并不像我们这些前端人员会及时更新自己所用浏览器的版本。那么就存在Flexbox的兼容性问题。说了一大堆的废话,还未进来主题,真有点对不住读者,接下来也不浪费大家宝贵时间,我们一起进入今天的主题——IE10中的Flexible Box("Flexbox")布局

页面