引用在线资源

在页面引入我们提供的在线css和js文件,便可以使用REPACK提供的所有基本功能。

<link rel="stylesheet" href="http://newfront.free4inno.com/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://newfront.free4inno.com/css/front.css">
<script src="http://newfront.free4inno.com/js/jquery/jquery.min.js"></script>
<script src="http://newfront.free4inno.com/bootstrap/js/bootstrap.min.js"></script>
<script src="http://newfront.free4inno.com/js/plugin/front.js"></script>
					

下载文件

也可以选择将资源下载到本地进行开发和使用。

下载资源包括编译并压缩过的CSS和JavaScript文件。

下载REPACK

下载压缩包之后,将其解压缩到任意目录即可看到以下目录结构:

repack/
│  
├─bootstrap		//bootstrap文件
│  ├─css
│  │      
│  ├─fonts
│  │      
│  └─js
│          
├─css			//css文件
│  ├─front.css		//REPACK样式文件
│  ├─front.min.css	//REPACK样式文件压缩版本
│  │  
│  ├─animate		//动画相关文件
│  │
│  └─theme 		//主题样式文件
│	  ├─dark  
│	  ├─default
│	  ├─modern
│	  └─pink     
├─js			//js文件
│  ├─jquery		//jQuery相关文件
│  │  └─jquery.min.js
│  │      
│  └─plugin		
│     ├─front.js	//REPACK js文件
│     └─front.min.js	//REPACK js文件压缩版本
│          
└─plugin		//插件相关文件
					
  • bootstrap文件夹:由于框架基于bootstrap进行开发,因此需引入bootstrap的相关CSS、JavaScript和字体文件。

  • css文件夹中,front.css和front.min.css是REPACK提供的涵盖基本样式的CSS文件。唯一区别是front.min.css是压缩版本。

    animate.min.css则用于需要使用CSS动画的场景,一般无需引入。

    theme文件夹中则是REPACK提供的主题样式,具体使用方法参见使用主题

  • 由于REPACK使用jQuery进行JavaScript的开发,因此需引入jquery.min.js。

    js/plugin文件夹内,提供了front.js和压缩版本front.min.js,保证了REPACK的基本交互功能。

  • 最后,plugin文件夹内提供了一系列js插件相关的文件,用户可按需选择使用。


按以下方式将本地资源引入到项目中,即可使用REPACK提供的基本样式和功能。

<link rel="stylesheet" href="[localPath]/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="[localPath]/css/front.min.css">
<script src="[localPath]/js/jquery/jquery.min.js"></script>
<script src="[localPath]/bootstrap/js/bootstrap.min.js"></script>
<script src="[localPath]/js/common/front.min.js"></script>			
			

其中[localPath]为资源在用户本地的路径。

页面模版

REPACK最大的特点就是提供一系列页面模版,用户可在页面模板页直接下载具体模板的代码包。

下载压缩包之后,将其解压缩到任意目录即可看到以下目录结构:

[模板名称]
	├─[模板名称].html
	│  
	│  
	├─css
	│  ├─bootstrap.min.css
	│  └─front.css
	│      
	└─js
      	   ├─bootstrap.min.js
      	   ├─front.js
      	   └─jquery.min.js
        
					

无需任何准备工作,直接打开相应的html文件即可使用该页面模版!

css文件夹和js文件夹内提供的是页面模版能够正常工作必需的CSS和js文件。

用户可选择使用下载到本地的这些文件或使用在线css、js资源。

使用主题

REPACK提供4种主题。

Default

预览

Dark

预览

Pink

预览

Modern

预览

REPACK页面默认使用的是default主题。您可以通过改变页面引入的CSS文件来改变主题。

  • 使用本地主题

    在下载到本地的REPACK压缩包中,主题文件的路径为 repack/css/theme,这下面各文件夹中为各主题相应的样式文件:front.css和front.min.css,其中后者是经过压缩的,可以用于生产环境。

    用户可自行选择主题,并用主题的样式文件替换当前的默认样式文件。

    默认样式						
    <link rel="stylesheet" href="[localPath]/css/front.min.css">
    
    替换为
    <link rel="stylesheet" href="[localPath]/css/theme/[themeName]/front.min.css">
    							

    其中[localPath]为资源在用户本地的路径。

    [themeName]为主题名称。例如,要更改为pink主题:

    <link rel="stylesheet" href="[localPath]/css/theme/pink/front.min.css">
    							
  • 使用在线主题

    用户也可直接使用在线主题样式,用主题样式替换当前默认样式文件。

    默认样式
    <link rel="stylesheet" href="http://newfront.free4inno.com/css/front.css">
    
    替换为
    <link rel="stylesheet" href="http://newfront.free4inno.com/css/theme/[themeName]/front.css">
    								

    其中[themeName]为主题名称。例如,要更改为pink主题:

    <link rel="stylesheet" href="http://newfront.free4inno.com/css/theme/pink/front.css">
    								

下载源码

可以去github上下载REPACK的源码

下载REPACK源码
REPACK
    ├─gulpfile.js
    ├─package.json
    │  
    ├─dist		//静态资源目录
    │  ├─bootstrap	//静态资源bootstrap文件
    │  │          
    │  ├─css		//静态资源css文件
    │  │          
    │  ├─js		//静态资源js文件
    │  │          
    │  └─plugin		//静态资源插件文件
    │                  
    └─src
        └─dev 		//实际进行开发的目录
            │          
            ├─bootstrap
            │                         
            ├─css	//sass编译成的css文件
            │                          
            ├─img	//项目相关图片文件
            │              
            ├─js	//js文件
            │                  
            ├─plugin	//插件文件  
            │                      
            └─sass	//项目相关sass文件
          
					

dev文件夹中是REPACK的源码,其中sass文件夹内是未编译过的sass源码,css文件夹内为编译并合并过的样式文件。

dist文件夹内是编译压缩过的用于生产环境的静态CSS和js资源。

编译项目

若开发者想自行进行框架开发和配置的更改,需安装一些第三方工具,分别是gulp,Node.js(gulp依赖)

REPACK使用gulp作为编译系统,提供了一些用于编译源码的方法。

安装gulp前,需要首先下载并安装node.js。

安装工作流工具Gulp

npm install gulp -g
					

安装依赖

npm install
			

运行Web服务器,监测sass变化并自动刷新浏览器

gulp
			

本地的src/dev文件夹下为开发代码,开发完成后可以用下面的命令发布可用版本到dist 文件夹下

gulp dist:build
			

删除当前可用版本

gulp clean:dist
			

gulp的具体使用可以参考gulp官方网站

如何定制

REPACK提供4种主题供用户选择,详细信息可以参见使用主题

用户也可以选择自由定制页面样式。

REPACK维护一个Sass配置表,目录为src/dev/sass/_variables.scss。这个配置表中提供了代表各个页面组件样式的变量。

//默认样式
//页面
$bodyColor: #e7e7e7 !default;
$bodyFontColor: #333 !default;
//---------------------------------------------------
//链接颜色
$alinkFontColor:#337ab7 !default;
$alinkFontColor_Focus:#23527c !default;
//---------------------------------------------------
//导航栏
$navbarColor: #f8f8f8 !default;
$navBorderColor: #e7e7e7 !default;
$navActiveColor: #3778bc !default;
$navFontColor: #777 !default;
$navFontHoverColor: #333 !default;
$navbarImgUrl: '' !default;
//打开下拉菜单的菜单项
$navbarOpenColor:#e7e7e7 !default;
$navbarOpenFontColor:#555 !default;
………………					
					

用户可修改相应变量来定制具体样式。然后通过下面的gulp命令来进行编译开发:

gulp
			

本地的src/dev文件夹下为开发代码,样式定制完成后可以用下面的命令发布可用版本到dist文件夹下,用于生产环境。

gulp dist:build