首页

关于

使用前端框架Foundation 4来帮助简化响应式设计开发

使用前端框架Foundation 4来帮助简化响应式设计开发

Foundation是一套使用广泛的前端开发套件,可以帮助你快速的网站。最近ZURB发布了一个新版本的Foundation 4前端框架,能够有效的帮助你快速的开发响应式的网站。

使用前端框架Foundation 4来帮助简化响应式设计开发

和另外一个套知名的前端框架BootStrap类似,Foundation同样也提供了一套HTML/CSS的模板,可以帮助你快速的搭建网站基础,包括:布局,组件,字体,表单元素和其它常用的页面元素。

使用Foundation有三种途径,包括:

  • 直接下载压缩版本的CSS,自定义使用自己需要的部分
  • 自定义编译来生成你需要的元素
  • 使用SASS版本的Foundation来自定义代码

Foundation4 最强大的地方在于有效地整合了SASS,你可以使用SASS中的Mixins概念来简化开发。使得组件的使用更加的简单和便捷。

注意新的移动实现方式并不支持media queries,所以有可能影响IE8上的体验。如果你需要支持IE8,这里有一个修改版本的Foundation…

标签: 前端框架, foundation前端框架, foundation4, 响应式

阅读更多

帮助开发者快速创建响应式布局的Boilerplate - Responsive Boilerplate

帮助开发者快速创建响应式布局的Boilerplate - Responsive Boilerplate

在线演示

如果你需要开发一个支持不同客户端设备的应用或者网站的话,使用一些现成的响应式框架或者模板绝对是不错的选择,在这篇文章中,我们将介绍一款超棒的响应式布局Boilerplate - Responsive Boilerplate

这个模板使用CSS3来支持响应式设计,超轻量级,只有2kb大小。这个模板拥有一个容器 + 12个列的网格,支持图片的内容有图片,视频,媒体等等。

同时,下载包含了一个PSD网格,Sublime的代码片段和响应式导航变化的javascript。你只需要稍微修改就能够快速的生成一个响应式的网页。

网站地址:http://responsiveboilerplate.com/

标签: responsive boilerplate, 响应式布局, 响应式, responsive, css3

阅读更多

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer

在线演示

大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下:

#nav{  padding: 10px  ... }
#header{  padding: 10px  ... }
#footer{  padding: 10px  ... }

定义完之后呢,我们使用div标签来组织页面结构,如下:

<div id="header"></div>
<div id="nav"></div> 
<div id="footer"></div>

这样的代码让我们创建了很多的非样式的CSS定义,是的代码结构复杂并且不直观易懂。

在新的HTML5标准中,我们定义了一系列的标签,帮助你更语义化的定义页面层次和逻辑,你不需要自己定义相关的DIV,HTML5提供了现成的标签来完成上述的结构化定义,如下:

<header></header>
<nav></nav>
<footer></footer>

使用以上的标签,你只需要在css文件中定义相关的真正的样式信息即可。 

在今天的这篇文章中,我们将介绍相关的基本HTML5标签Header,nav和footer。

header标签

在新的标准中header标签定义如下:

"A…

标签: HTML5, header, nav, footer, html5标签, 响应式

阅读更多

【简报】超棒的javascript响应式视图(viewport)切换工具类库

超棒的响应式视图(viewport)切换工具javascript工具

ReView是一个动态的viewport系统,能够帮助你设计更灵活的响应式视图选择方式,可能大家有的时候不希望网站布局在不同的设备上的显示不同的布局结构,这个时候viewport就可以派上用场了。

Review 是一个纯javascript实现的类库,针对每一个session提供单独的持久viewport信息。更少的请求使得它要求更少的带宽。支持插件式的 扩展,并且可以支持自定义viewportChange事件。 相信如果你需要开发定制更灵活的响应式设计网站布局的话,它肯定能够成为你的一大利器。

网站地址:http://responsiveviewport.com/

标签: 响应式, responsive, responsive design, responsive layout

阅读更多

支持响应式布局的超棒颜色选择器 - colorjoe

一款超棒可缩放的颜色选择器 - colorjoe

在线演示

通常Web应用程序当我们需要从用户 收集颜色值时颜色选取器能够帮大忙这里有很多的高质量的颜色选取器类库和插件
今天我们介绍的这款颜色选择器
colorjoe和其它类似功能的颜色选择器稍微有些不同, 它是一个全新,是可缩放的颜色选择器,因此可以非常好配合应式布局 它不使用任何图像,可以使用CSS定制和并且支持所主流格式 RGB,HSLHSV或CMYK这个颜色选取器拥有两个 独立回调函数其中一个是change(持续 不间断触发用来监测颜色值的变化,另一个是done一种颜色 被选中时触发

标签: 颜色选择器, 响应式, colorpicker, CMYK, HSL, Responsive, RGB

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.