Electronic Joint Business

Solution for E-Business

css

初识 Sinatra (四)

文章评价:

这是本系列文章的最后一部分。本教程的目标是带领从未用过 Sinatra 的用户从头开始创建一个应用,并将之最后发布。

到前三部分结束时,我们已经完成了 To Do List 应用的大部分功能。在本系列的最后一部分,我们将先看看如何用 Sass 来编写 CSS ,之后将本应用发布到 Heroku 云服务上。

Logo
每个上点档次的应用都应有一个 logo,所以我创建了一个简单的“tick” logo,你可以在 Github 上找到。我们用它来作为本应用的头条的背景图片。打开 Styles.css 并添加下列 CSS:

h1.logo{
  font-family: helvetica,arial,sans-serif;
  font-size: 24px;
  color: white;
  padding: 64px 0 0;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.3em;
  background: transparent url(/logo.png) 50% 0 no-repeat;
  }

(注意 – 也许你还发现,你需要为 layout.slim 的 h1 元素添加一个 ‘logo’ 类,这段 CSS 才会起作用。)

>>> 阅读全文

 

, , , , , , , ,

SASS 使用介绍

简单地说: Sass 就是程序化的 CSS。 Sass (即 Syntactically Awesome StyleSheets 的缩写,意思是“相当迷人的样式表”) 是一种动态样式语言,它受到 Haml 的简洁精炼的语法的启发,提供了 变量、操作、嵌套选择器(selector)和 Mixin 等等功能来增强样式表,因此和单纯使用 CSS 语法相比,Sass 更容易编写,也更容易阅读。现在 Sass 是 Ruby 上的 Haml 插件的组件之一,我们可以用 Haml 来处理 HTML 标记,而用 Sass 来处理 CSS 标记。 其作者是这样介绍 Sass 的优点的:

“ Sass 是 CSS 之上的一种元语言 (meta-language),用于简洁、结构化地描述文档的样式,和普通 CSS 相比功能更强大。Sass 提供的更简洁、更优雅的 CSS 语法,同时还实现了许多特性,可以帮助创建更易于管理的样式表。”

Sass 的发展有两种语法规则( syntaxes )。。原先 Sass 采用了 Haml 的缩排语法,没有括号,分号,它使用行缩进的方式来指定 CSS 块,这对于习惯了 CSS 语法的页面设计师来说很不习惯,同时也不能兼容既有的 CSS,因此 Sass 3 就演变成了 Scss (Sassy CSS),它是 CSS3 语法的的拓展升级,摒弃了原来的缩进语法,而采用了 CSS 设计师的惯用的花括号 {}。 Scss 100% 兼容了CSS3, 因此在一个有效的 CSS3 文件同时可以被 Scss 所识别。除此之外,它还支持我们能够找到的所有扩展,甚至包括一些非标准语法,例如微软的 expression() 函数和 filter 属性。

为了加以区别, 使用缩进语法的文件以 .sass 为扩展名,而采用 Scss 语法的文件则以 .scss 作为扩展名

参考:
http://sass-lang.com/tutorial.html

 

, , ,

Rails3 技术手册 (一) 概述

英文原文
Ruby on Rails 是用于快速简洁地开发 Web 应用框架。它被 37signal 公司的项目管理工具 Basecamp 中剥离出来,其作者 David Heinemeier Hansson 率先用 Rails 着手解决手边的现实问题。 我们会发现用 Rails 进行开发时充满乐趣, Rails 负担起了开发中那些无聊的琐事,因此开发者能专注于所要解决的问题本身。

你如果不理解这些开发中的琐事,可以看一下下面的例子:编写过 Web 应用的开发者都不可避免地会用到字典结构、缓存、数据持久化、模板系统、测试框架、路由等等组件。Rails 自身就带了这堆让应用上线运行所必需的组件,而且作者在编写它们时充分考虑了彼此的适配问题。以往希望模板语言能和复杂的 ORM 层能在一起工作的麻烦现在再也没有了。一切将是如此简单。

现在开发者无需再为数据库等的组件编写大量繁琐的 XML 配置。Rails 基于约定而非配置,配置因而精简到最少。假如 Animal 类就是关联到数据库的 animals 数据表,为什么还要让开发者花时间写配置文件来链接它们? 这一切就让 Rails 来帮你吧。

简而言之,Rails 让 Web 开发充满乐趣。

架构
Rails 应用开发是基于模型-视图-控制器模式的 (MVC) 的。想了解 Rails 是如何使用 MVC 的, 最简单的办法是透过了解 Rails 请求的生命周期。如图1-1所示:

>>> 阅读全文

 

, , , , , , ,

初识 Sinatra (三)

文章评分:
在本教程的第二部分,我们利用 DataMapper 将任务保存到后台数据库,同时我们还用 Sinatra 创建了 web 前端以便显示、添加、删除和结束任务。现在这个 Just do it 应用功能齐备,但是样子还有点丑陋。

在本章中,我们继续对这个应用做些美化修饰,并增加一些功能,让你能够创建多个任务列表。

添加样式
现在我们用样式表来对应用进行美化修饰。在你的 “layout.slim” 中添加下面这行代码:

<link rel="stylesheet" media="screen, projection" href="/styles.css">

现在创建一个名为” styles.css”的文件,并保存在”public”文件夹中,将下面 CSS 内容添加到该文件中:

.completed{
  text-decoration: line-through;
  }
.tasks{
  padding:0;
  list-style:none;
  width:400px;
  }
.task{
  position:relative;
  padding:2px 0 2px 28px;
  border-bottom: dotted 1px #ccc;
}
form.update{
  position:absolute;
  bottom:2px;
  left:0;
  }
form.update input{
  background:white;
  color:white;
  padding:0 2px;
  border:solid 1px gray;
  cursor:pointer;
}
.tasks li.completed form.update input{
  color:#47FD6B;
  }
form.delete{
  display:inline;
  }
form.delete input{
  background:none;
  cursor:pointer;
  border:none;
  }

刷新页面,现在页面是不是看起来好多了,也更像一个真正的任务列表了。你也许注意到,该样式表中有个 ‘completed’ 类。 到目前为止,我们显示已完成的任务的方法是为它添加完成的时间,这样看起来不怎么样。我们来修改一下 task 视图,添加 ‘completed’ 类。这样利用样式表,已完成的任务看起来就是完全不同的风格。打开 “task.slim” 做如下修改:

>>> 阅读全文

 

, , , , , ,