3个CSS3和HTML5新框架

2011/05/16 · HTML5 ·
CSS3,
HTML5

各种人都知情,会从完美的CSS/HTML
框架中有相当大的收获。下边介绍3个相对相比较新的HTML5和CSS3框架。

Inuit.CSS – CSS Framework

Inuit.CSS 框架,作者Harry Roberts
。该框架重要针对的是个中或小显示屏。那些CSS框架援救新的HTML5成分。

Perkins – HTML5/CSS3 Framework

Perkins,作者Carlos Elías 。该
HTML5/CSS3 框架,具备宗旨HTML5模板,富含标签、表格,以至开创导航等。

澳门皇冠金沙网站 1

G5 Framework – HTML5 Front End Development
Framework

澳门皇冠金沙网站 ,G5 框架,作者Greg Babula 。那是个轻型的
HTML5、 CSS3、 PHP
和jQuery前端开垦框架。具备灵活的布局、并可快捷翻新的效能等等。

原文:Tommy
Olovsson      
译文:oschina

 

赞 1 收藏
评论

澳门皇冠金沙网站 2

不无的开拓人士都应当小心了,你们相对应该看看那篇小说,扶助您急迅创造HTML5/CSS3的开荒框架。只怕你也见到过任何的框架,但是你应有看看这一个框架,因为你早先可能没用过她们中的一大半。看看最新的实用HTML5和CSS3框架吧!希望您们喜欢!1.HTML5boilerplateH5BP带来您十分优良的文档,一个网址优化的编写翻译脚本,还恐怕有八个自定义的boilerplate编写翻译器。除了那个之外,大家还援助lighttd,GoogleApp
Engine和NodeJS以至优化的服务器配置(饱含Apache,Nginx,和IIS卡塔 尔(阿拉伯语:قطر‎,何况已经把boilerplate的高低收缩了百分之七十。

非原创,来源网络,原来的文章地址:

在H5标准中,推荐应用框架集,而不使用内联框架。
而是依然不推荐使用:

源码 演示2.The M project跨平台的无绳电话机开辟HTML5
javascript框架。特性包蕴:MVC
HTML5,Javascript-全体的开拓周期,离线扶植(自动缓存卡塔尔,富顾客端UI,本地和长途数据帮助并且远程存款和储蓄,国际化(i18n卡塔尔,开源(MIT
license卡塔尔国,基于NodeJS的编写翻译工具(叫做Espresso卡塔尔。

CSS3 and HTML5 are two of the coolest things to come along within web
design for a very very a long long time. Whats not to love? And the best
thing of all? The major browsers are now catching up and giving support.

  • frameset和iframe同样,里面包车型客车源委不会被搜寻引擎检索
  • 采用框架集意味着页面中不能有温馨的剧情,只好引进其余的页面。每单独加载三个页面,浏览器都急需再一次发送二遍号令,引入多少个就供给发送四遍倡议
  • 即使非要使用,请使用frameset

源码
演示3.Gravity叁个遵照SASS的框架用于创制功用强盛的,易于管理的HTML5网址。能够扶助你急速的创始你创新意识的原型,何况能令你的支付更轻易。

Below you will find a collection of visually basic templates, but with
all of them fully packed and enriched with CSS3 and HTML5 goodness. On
top of all these templates you will also find a couple of HTML5 powered
CSS3 frameworks.

动用frameset来创建三个框架集,注意frameset不能够和body同不平日间出将来哎页面中,所以要使用框架集,页面就不得以应用body标签

源码
演示4.Popcorn.js二个HTML5摄像的事件框架,提供叁个粗略的API来协作相互作用和临近的开始和结果。Popcorn.js使用本地本地HTMLMediaElement属性,方法和事件。转产生一个大致实用的API,而且提供了二个插件系统用于方便社区开拓。

HTML5 Basic Template Pack

澳门皇冠金沙网站 3

This template has been heavily inspired by the Smashing Magazine HTML 5
template tutorial, however the (CSS & Design) has been modified in
several ways.
This basic template comes in 4 colors (green, blue, purple and orange)
with easy to customize CSS and HTML 5, HTML5 mouse over effects, HTML 5
text shadow and much more.

  • HTML5 Basic Template Pack
  • 脾性:上面七个属性必得筛选二个,何况须要在性质中钦定每一个部分所占的尺寸

源码 演示5.Roots三个依照HTML5 boilerplate开拓的wordpress主旨,blueprint
CSS(也许960.gs卡塔 尔(英语:State of Qatar)和Starkers,能够扶植你飞快在创制博客和文字站点。

RamblingSoul 19 CSS3 Template

澳门皇冠金沙网站 4

  • Template Info

  • Demo

源码 演示6.Baker 2.0八个HTML5
ebook框架用来在ipad和iphone上行使Web规范来公布内容。

Cherry Blossoms HTML5 & CSS3

澳门皇冠金沙网站 5

  • Template Info
    • Demo
  • rows,钦命框架集中的有着框架,大器晚成行朝气蓬勃行的排列
  • cols,钦定框架集中具有的页面,一列一列的排列

源码
演示7.CSS3-action-frameworkCSS3的类库用于搜罗最棒的CSS3效率。现在支撑CSS3的浏览器正在增加;CSS3在不菲案例都足以像javascript同样使用,提供越来越好的客户体验

Ampersand HTML5

澳门皇冠金沙网站 6

You can choose from either the two column or three versions of this
HTML5 template.

  • Template Info

    • Two Column Demo

    • Three Column Demo

源码 演示8.52frarmework第叁个用enavu network开拓的HTML5/CSS3框架

Backwards Compatible, One Page Portfolio (Template and Tutorial)

澳门皇冠金沙网站 7

  • Template Info

  • Demo
  • frameset中也得以再套入frameset

源码 演示9.G5 Framework基于F布局。天性包涵:CSS&SEO,PHP active class,
HTML5 placeholder
fallback,黏合的页脚,HTML5基线,光滑的滚动到上边和极其干净的团体。

Nearly Circular CSS3

澳门皇冠金沙网站 8

The template displays a taster of what is to come from the CSS3 spec,
mostly the lovely rounded corners and @font-face. There are also a few
pseudo CSS selectors used to control some of the elements.
The template is supported in Firefox 3.5+ and Safari 4+. All other
browsers will degrade into a nice square version of the design.

  • Template Info

源码 演示10.Inuit.CSS由HarryRoberts创制。那么些框架用于接纳少之甚少的代码达成稍小的荧屏。扶持IE6+。

ZooCroo HTML5 & CSS3

澳门皇冠金沙网站 9

ZooCroo is a fun, playful and colorful template that utilizes HTML5 and
CSS3, with a little extra fun thrown in. The nerd images in the content
are animated, using CSS3’s transform properties. Hovering over the
little nerds will rotate one and slide one right. This is, of course,
assuming your browser is able to understand CSS3’s transform code.

  • Template Info

  • Demo
<!-- ***************************-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    </style>
</head>
<frameset rows="30%, *, 20%">
    <!-- 使用frame来指定要引入的页面,引入几个页面就写几个frame  -->
    <frame src="xxx.html"></frame>
    <frame src="xxxxx.html"></frame>
    <frame src="xxxxxxx.html"></frame>
</frameset>
</html>

源码 演示

Flower Blog HTML5 and CSS3 Template and Tutorial

澳门皇冠金沙网站 10

In this tutorial with template source available for download, you are
going to build a blog page using next-generation techniques from HTML 5
and CSS 3. The tutorial aims to demonstrate how you will be building
websites when the specifications are finalized and the browser vendors
have implemented them.

  • Template Info

  • Demo

Rockit HTML5 & CSS3

澳门皇冠金沙网站 11

Rockit is a 2 column grungy music-inspired template that makes use of
CSS3 transform to create a cool rotating polaroid effect for a set of
images. For browsers that understand this effect, hovering over each
polaroid image will rotate it to the left a bit. For browsers that
aren’t yet up to speed, the images will still have the polaroid-like
frame around them, but just won’t rotate on hover.

  • Template Info

  • Demo

Cardeo Three CSS3

澳门皇冠金沙网站 12

Cardeo Three is a free website template coded using CSS3 with the
following features: Rounded Corners (no images!), Custom Font
Replacement and Font Shadow.

  • Template Info

  • Demo

Beach Vaycay

澳门皇冠金沙网站 13

This fun in the sun template features a travel theme with a gradient
background that uses CSS3 to create it without images. Browsers that
don’t yet understand CSS3’s new gradient background will show a nice
sandy background color instead. This template is 2-columns with a nice
4-section footer.

  • Template Info

  • Demo

Papery HTML5 & CSS3

澳门皇冠金沙网站 14

Papery is an HTML5 / CSS3 template that’s all about the face; font-face
that is. This 2-column textured template focuses on @font-face, showing
off what fun it can be to use non-standard fonts.
Adding to the font focus is a generous use of old paper textures,
3-sectioned footer, border shadows and drop-down menus to create a nice
old but comfortable look and feel.

  • Template Info

One-Page Template XHTML & CSS3

澳门皇冠金沙网站 15

This free template is pure XHTML and CSS3. It is compatible with all
browser versions, SEO friendly, and features a sleek jQuery scroll
effect. Perfect for those cases when you need something up fast.

  • Template Info

  • Demo

Newsy Multiple Column HTML5 & CSS3

澳门皇冠金沙网站 16

Newsy is a beautiful newspaper / magazine style template with the
advanced multiple-column feature that CSS3 now offers. Content flows
easily from one column to the next – automatically – without any effort
on the part of the author.
IE won’t recognize the multiple columns, so the articles will look like
normal one-column posts, but at least it doesn’t seem broken to IE
users.

  • Template Info

  • Demo

Less Framework

澳门皇冠金沙网站 17

The Less Framework is an HTML5-powered CSS framework for building
flexible multi-column website layouts. It has an eight-column grid
optimized for a line-height of 24px, as well as a set of typography
presets based on the golden ratio that fit into the grid’s vertical
rhythm.
The frameworks layouts work perfectly in Chrome, Safari 3.0+, Firefox
3.0+, Opera 10+ and Internet Explorer 7+. They intelligently collapse
into a single column in legacy browsers and on small screen devices,
such as mobile phones.

  • Less Framework Info & Downloads

52Framework

澳门皇冠金沙网站 18

The 52framework is a fairly new CSS framework that has been built with
the much cleaner HTML5 and using CSS3. It supports all modern browers,
and perhaps most remarkably, even IE6! Here are some of its features:

HTML5
• Use of all the most useful current html5 tags including: header, nav,
section, article, footer, and more to come soon (with styling)
• Use of the all new <!DOCTYPE html> and <html lang=”en”>
• New input field types: url, email, etc
• Script embed (javascript) using only the script tag without the
attribute type
• Modified Reset Stylesheet for HTML5

CSS3
• Use of the new ::selection selector that enables you to customize the
properties of selected text.
• Rounded Corners for any block level element
• Text-Shadow for text elements
• Box Shadow for block level elements

Grid
• 16 column, 52 pixel based with 8 pixel gutter

  • 52Framework Info & Downloads

  • Demo

  • Documentation

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图