• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ivandoric/olympos: This is just empty theme for starting your Wordpress projects ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

ivandoric/olympos

开源软件地址(OpenSource Url):

https://github.com/ivandoric/olympos

开源编程语言(OpenSource Language):

CSS 88.6%

开源软件介绍(OpenSource Introduction):

This is just empty theme for starting your Wordpress projects, with built in support for Sass, Susy and Gulp.js.

Check out the video on installing and using this theme on YouTube.

Requirements:

  1. Node.js
  2. Gulp.js

Installation

Put olympos folder into your themes directory.

Copy package.jsonand gulpfile.jsinto WordPress root.

Run

npm install

to install all gulp plugins.

If you don't want to have package.json and gulpfile.js in root directory you can leave them in the theme, and run npm install in theme directory. But in that case be sure to change the paths in gulpfile.js. You will mostly have to delete /wp-content/themes/olympos/ from the paths.

When you are done just run gulp watch

Features

Most of the features are in gulp. This theme has almost no styling. You only have clearfix defined and _reset.scss from Eric Mayer as a partial and some empty scss partials.

Gulp features

  • Image optimization
  • Sass compilation
  • Auto prefixing
  • Source maps for css file
  • Uglifying and concatinating all js files
  • LiveReload

All of these features are run when starting gulp watch except for image optimization, you have to run that task separatley.

Modernizr

Modernizr is included in already compiled olympos.min.js file. If you want to change build of the Modernizr just replace lib/modernizer.min.js with your own and run uglify task.

Notes

I've removed Compass from this version because I didn't see any real necessity for it. Also it slowed down css compilation process significantly.

I've added Susy for making custom grids and to help with css layout. If you don't want to use it just remove susy folder from sass folder and remove @import "susy"; and @import "su"; from the style.scss file in sass folder;

CSS and JavaScript

All the of css can be found and should be written in partials. So that you end up with just one css file (style.css).

JavaScript has two folders lib and js you should never touch js folder, this is where the uglifyed and concatinated files go. Put your jQuery plugins and other JS files in lib folder and gulp will do the rest for you. There is no need to call those added scripts from header.php or footer.php, all your scripts will be concatinated in one file.

Some mixins and functions

You have several mixins and functions in the _mixins.scss file along with comments on how to use them. These mixins and functions include:

  • Automatic calculation of percentages from pixels
  • Automatic calculations of rems from pixels
  • Easy to use Media Queries in your normal css flow

Open an issue for any problems that you encounter.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap