交大吃吃Web App

使用了Django, HTML5, CSS3, Angular.js

大部分网页交互由AJAX完成

Django模板规范

每个页都从base.html扩展

{% block head %}扩展<head>标签中内容

{% block body %}扩展<body>标签中内容，如果需包含导航菜单，则在第一行{% include "includes/nav.html" %}

{% block js-**before/after**-ng %}扩展</body>之前的<script>标签，分别位于Angular.js加载前后

CSS编写规范

命名规范

CSS类名以语义化双字母缩写开头（如nv-表示nav、fw-表示framework），单词之间使用连字符分割。例如：

<div class="nv-main-trigger">
    <!-- some tags -->
</div>
<!-- some tags -->
<div class="fw-container">
    <div class="fw-wrapper">
        <!-- some tags -->
    </div>
</div>

响应式框架系统

吃吃仿写了YUI的响应式框架，语法保持一致。例如：

<div class="g-r">
    <div class="u-1-3"></div>
    <div class="u-2-3"></div>
</div>
<div class="g">
    <div class="u-1">
        <div class="g-r">
            <div class="u-1-4"></div>
            <div class="u-3-4"></div>
        </div>
    </div>
</div>

class="g"表示"grid"，显示为一个新框，可以跟上-r表示响应式（responsive）。 grid内接class="u-**分子-分母**"，表示框内单元格的相对宽度。分式要约分。如果表示整行宽度的单元格，则写为class="u-1"。 u内可以嵌套新g。

JavaScript编写规范