CSS

构建一个垂直规律

排版中的空间就如音乐中的时间。它是无法区分的,但少数的时间间隔比任意数量的选择更有意义。印刷商Robert Bringhurst曾经说过:“常规时间为音乐提供了更好的节奏”。所以在排版中提供有规律的空间比没有规律的要更具有可读性,不会让读者变得迷惘和丢失方向。在Web排版中,垂直规律(Vertical Rhythm)指的是文本的排版和间距,引导读者往下阅读主要包括三个因素:文字大小,行高和外距或者内距。所以这些因素要让垂直规律保持不变。

使用字符串(STRINGS)设置样式

今年在墨尔本(澳大利亚)举办的CSSConf中,我有一个主题需要演讲——"Styling With STRINGS"。该讲座主要介绍的是在组件中如何使用FlexboxcurrentColorem,在浏览器中快速实现Web应用程序所需要的风格。其实这篇文章更是向大家介绍了如何通过修改一个属性就能修改整个组件的大小、颜色。并且简单介绍了如何让你把修改好的文件能直接放置在你的本地目录中。虽然描述短小,但涉及的知识点还是蛮有意思的,希望这篇译文能对你今后的工作略有帮助。

2014年前端将会发生什么

在过去的几年中,Web开发者被迫接受了几大变化:HTML5的兴趣,预处理器的出现JavaScript框架,结合一个庞统的一系列技术的变革,推动了整个设计的趋势。在很短的时间内,移动响应式设计,扁平化(Flat Design)用户界面和深层次的交互页面成为标准做法。那么在2014年Web前端又将会发生什么?如果您对这个话题感兴趣的话,欢迎进入一起讨论与分享。

走过的2013年

在新年将至的当中,大家都在思考,都在回味,都在总结,都在向往。我也同样不能脱俗,一直都在思考,为2013一年,为自己走过的这一年,为w3cplus这一年做一个总结,但一直不知道如何执笔开始。思来想去,有了下面的一些记录,只想让这些记录告诉我,2013看走过的一切,同时让我更好的迎接2014年,迎接新的一年,迎接新的人生。

自从有了W3cplus之后,我热衷于前端技术,喜欢前端的活动,更爱上了前端的技术分享。在2013年当中,在众多朋友一起努力之下,总共发表博文279篇,其中技术博文216篇,CSS3教程61篇,CSS3案例25篇,收集前端各类在线工具近100个,整理jQuery插件近300个。还有前端较为新的技术,包括Sass教程47篇,Grunt教程近10篇,响应式设计近27篇。而且在今年在众多同学的帮助之下,组织翻译外国博文近115篇。看到这些数字,也让自己感觉到在2013年当中没有白混,让我自己更好的准备迎接2014年。

初学Foundation之顶部工具栏

Web页面顶部工具栏是现代Web页面的一部分,特别在移动端页面下,通过顶部工具栏的”三横“直线的ICON效果,点击来控制显示和隐藏菜单。当然在顶部的工具栏中通常还放有其他的Web元件。那么在Foundation框架中也提供了这样的一个插件,让你很方便的实现这样的功能与效果。今天这篇文章,我们主要就是针对Foundation的顶部工具栏进行介绍,希望这篇文章能帮助大家更好的理解Web页面顶部工具栏的功能与效果。

初学Foundation之导航栏

导航的制作是一个Web网站不可或缺的部分,一个站做得好与不好,导航就能体现出来。那么在一个优秀的前端框架里也是一样的,要看这个框架是否优秀,其中看该框架的导航栏是如何处理的。在Foundation框的系列教程中,继《初学Foundation之入门篇》、《初学Foundation之网格系统》之后,我们今天推出初学Foundation系列教程的第三篇——导航栏。在这篇文章中主要来学习Foundation框架中是如何制作导航栏。希望这个简单的教程,能帮助你制作导航的时候带来灵感。

CSS Overlay技巧

设计模式通常是一组最佳实践和技术,主要目的是用来解决一些最常见的设计“问题”,通常是在上下文中提出的设计原则。这些原则之是一“停留在页面”的原则。这一原则是建立在页面刷新都打破用户的心中想要的流程基础上,造成所谓的“变盲”,我们需要用户无论保时何地可以避免打破这种视觉流程。我们可以在保留用户在网页和模型的过程中做出明智的选择。一个方式,让用户在同一页面上试图让内容在当前页面的背景下,通过展示一个“迷你页面”,或一个弹出的对话框。这个轻量级的层就是我们所说的一个“浮层”。

崇拜CSS

公认的拥有一个编写和管理CSS的方法比什么都要更好。尽管如此,一些开发人员的实践是不利于语义化质量和长期的可维护性。我们要讨论一些被提倡的"CSS框架方法”的问题和作为Web开发人员,我们如何可以更好的解决这些问题。今天最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似的技术存在,如BEM。这些方法试图对CSS采用面向对象的编程原则。尽管样式语言和面向对象的软件设计原则在概念之间存在一定的问题,这些微妙的东西对于一个欠缺经验的开发人员来说可能不会立即显现出来。最令人不安的是,这些方法已经可以广泛的看到博客给其冠以"最佳实践"的评价。“abscence”的证据来阐述使用这些方法的好处——选择高流量网站只是一小部分——这反应了我的观点,他们代表了一种误导和盲目的崇拜

初学Foundation之网格系统

在学习Foundation系列文章中的上一篇,我们大概讲述了可以用这个框架来干什么,框架本身又可以做什么和如何自定义符合自己需求的框架。那么此文章就将深入地研究学习“网格系统”,过程中我将使用实例来演示。到最后,为了做出一些震撼的效果,我们还会学习对各种内容都可以实现滑动效果的插件:Orbit:Javascript插件

初学Foundation之入门篇

对于很多传统Web开发,每次从零开始开发一个工程项目都是必经之路;当每个工程项目都是不一样的时候,去创建一个可重用的代码库却是一件非常棘手的事情。许多有经验开发者可能更愿意花时间去创建一些前端框架,然而这却又是一件巨大的任务,更不用谈维持最新的框架及最佳实践。眼看每个程序员的需求,明显地,开发者是非常需要那些开源的、稳定的、可扩展性的和(最重要的)有齐全的文档说明的代码。关系到工程的大小,一个CSS网格系统可能已经满足(使用),如果你有选择地添加或者删除函数方法去满足你的需求岂不是更好吗?在本章中,我们将学习一个叫Foundation可自定义的前端框架。接下来这段时间,根据的系列教程,向大家介绍Foundation框架的使用。希望对大家有所帮助。

页面

返回顶部