基于 Sass 的简单高效的前端页面重构项目框架。
CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
PSD
css
fonts
html
images
js
scss
.gitignore
Gruntfile.js
LICENSE
README.md
editorconfig
gitignore
license.txt
package.json
style.css
style.scss

README.md

ysass

基于 Sass 和 Grunt 的简单高效的前端页面重构项目结构。特别适合开发类似 WordPress 主题的项目。

目标:提供一个合理的项目结构以及实用工具,简化重构项目流程,方便前端重构项目开发。让前端拿到需求后,马上开始编码。

实现功能

  1. 使用 Grunt 对项目进行打包:对 JS 进行 jshint 规范化校验、将 JS 插件合并并压缩、编译 SCSS 文件、实现 livereload 浏览器无刷新实时看到效果。
  2. 使用 Sass 快速编写 CSS 代码,分模块的提供变量定义(var.scss)、实用 SCSS 函数(util.scss)、CSS Reset 和中文排版(typo.scss)等。

更多信息请看文章:构建初级前端页面重构开发环境

主要目录结构

.
├──README.md         --- 使用帮助
├──PSD               --- 设计稿及其他项目资源
├──html              --- 项目 HTML 页面
├──css               --- 其他项目需要的其他 CSS 文件
├──fonts             --- WebFonts 放在这里
├──images            --- 图片们
├──js                --- JS 组件
  ├──plugins            --- JS 插件存放目录,Grunt 会将此目录所有文件合并压缩为 /js/plugins.min.js 文件
├──scss              --- SCSS 模块文件
└──style.scss        --- SCSS 主文件

使用方法

  1. clone 或者下载下来,将文件夹命名为项目名称,删掉无用文件。
  2. 将资源文件放在 PSD 文件夹中。
  3. 如果需要使用 git 管理项目,使用 git clone 下来的,请注意使用 git remote -v 查看 repo url 并修改为你自己的项目 repo url。
  4. 如果使用 git 管理项目,请编辑根目录下面的 gitignore 添加不需要追踪的文件,并将其修改为 .gitignore 使其生效。
  5. 确保安装过 nodejs 和 grunt,在项目目录下面,执行 npm installgrunt,会自动打开浏览器,提供文件编译和实时刷新等功能。
  6. Just code it!

HTML 开发建议

  • 建议使用 section-wrap 和 section 的 HTML 结构和命名方式
  • 本项目将 HTML 文件放在二级目录 html/ 的目的是,如果需要与后端协作开发该项目,则后端可以直接在项目根目录下面进行同步开发,共用同一份 CSS、JS 文件,这样前端对 HTML 的修改,可以与后端页面同步。

CSS 开发建议

  • 预先审查设计稿,将其常见颜色、尺寸等保存为变量,统一管理在 var.scss 文件中,将 web font 也定义在这个文件里面。
  • 查看 util.scss 文件,会发现一些很有帮助的工具函数,提高开发效率。
  • custom.scss 文件编写主要代码,在 media-queries.scss 文件编写响应式有关代码,如果不需要则可以在 style.scss 文件中注释掉有关 @import
  • 需要注意的是,如果没有设置过 ruby 的编码等相关设置,在 CSS 文件中出现中文(注释等)将会导致编译出错。

JS 开发建议

  • 将 JS 插件的 JS 文件放在 js/plugins 文件夹下面,Grunt 会将该文件夹下面所有文件合并压缩为 js/plugins.min.js 文件。
  • js/global.js 文件中编写 JS 有关代码,Grunt 会检测变化,进行 jshint 校验并压缩为 js/global.min.js 文件。
  • 如果你使用 jQuery,这样在你的 HTML 页面中,引入三个 JS 文件链接即可。

TODO

  • 提供中英文排版 CSS 文件,整合 normalize.css 的 CSS Reset 方案,去掉 typo.css。
  • 针对更多的前端开发流程,修改提供更为合理的结构和工具函数等,提供最佳实现的样例。
  • 提供命令行的项目结构生成工具,并提供一些参数方便自定义。

欢迎大家提 Issue ,也希望该项目可以帮助大家构造适合自己的开发 Workflow 切实提高开发效率和质量。

使用许可

基于 MIT 协议,不限制商业或者以营利目的使用。