开源项目 跟着 jasl 起哄——也发基于 Semantic UI 的 wordpress 皮肤

leopku · 2013年11月11日 · 最后由 leopku 回复于 2014年02月10日 · 7064 次阅读

周末闲暇时光一边看 Semantic UI 一边拿自己的博客皮肤练手 Semantic UI 提供的组件比较多,也可以自由组合,动态效果也多 此外相比 bootstrap 组件要一层一层 div 地套,semantic 写起来要方便得多

链接:http://pan.baidu.com/s/17VyLm 密码:mcjp 效果直接观看http://www.himysql.com

特点:基于 Semantic,响应式、自适应、简洁大方上档次

2014.02.10 更新

Semantic-ui-wp-theme

Semantic-ui-wp-theme 是一款基于前端框架 Semantic-UI 的 WordPress 皮肤 (theme)。

本款皮肤具备如下特点:

  • 响应式设计,适应智能手机、平板、电脑等多种设备。
  • 多种美观的页面元素:标签、评论等等
  • 页面清新,结构紧凑,整体简洁大方
  • 优化的字体显示效果,尤其针对 Mac 用户
  • 大量使用 html5 和 css3 技术,避免不必要的图片,让网站在拥有美观的界面同时,又不影响访问速度。
  • 多国语言支持,目前支持中、英文两种语言

依赖

WordPress 3.7.1 或以上版本

最新版本地址下载:http://pan.baidu.com/s/1dDDtweX

也可以随时关注 皮肤 页面获取最新消息

预览

预览

2 楼 已删除

赞! 其实我也是因为工作 提前熟悉下 bootstrap3 哈哈

cool,请问 Semantic UI 对 IE 的兼容性如何?

#3 楼 @jasl bootstrap3 现在的项目在用,感觉写起来啰嗦了不少

#4 楼 @imlcl 木鸡 手头没有 IE 的机器,没法测试 :囧:

#5 楼 @leopku 是么? 我感觉还好的呀 https://github.com/jasl/haven/blob/master/source/layouts/article.html.erb 这是我那主题的代码,虽然没整理好,但是 html 结构上,感觉 bs3 没有太多啰嗦,你有什么案例来对比么?

#5 楼 @leopku grid system 精简了不少,虽然那个命名有点那个...

响应式手机端不可看。。

#6 楼 @leopku 有空得试试,我这边必须得考虑 IE…… @jasl @leopku 顺便问一下,我在项目中使用 simple_form 这样的 form builder,他本身就支持 bootstrap2,如果改到 Semantic UI,难免要修改不少代码。其实有没有比较好的方法,能尽可能少修改东东?

#10 楼 @imlcl http://ruby-china.org/topics/15255 之前有讨论的 simple_form 似乎别人没写过 wrapper 的话就要自己来了 - -

话说我现在很抵制 simple_form 这类东西,抽象过度了...就像最简单的,我想输出单个 radio_button 都没法直接做到

#11 楼 @jasl 嗯,我最近也有这种感觉,有时候感觉用 form_tag, form_for 也 OK,多敲几行代码,但关键是比较直接。我自己用 simple_form,发现有些不会写,就又用 form_tag 的写法……也许是我水平较低层次吧。下次项目如果用 bootstrap,我觉得用bootstrap_form更加直观一些。

#12 楼 @imlcl 我目前跟你一样,前端是 bootstrap3,用不了 simple_form

#7 楼 @jasl http://semantic-ui.com/ 首页上就有三个对比的例子 语义化的类名,写的时候很方便,不会因查文档打断 coding 比如一个 div,我想浮在左边,加上类"floated left",无需记太多,也不容易忘。 类似的还有,“corner”,"circular"等等。 同时,这些可以自由组合。

theme 颜色不错,就是字太大。 有空体验下,bs 总体也是感觉啰嗦。

听说 Semantic UI 性能不是很好,不知道是不是真的?

#14 楼 @leopku 正在熟悉 semantic,写法超有爱…

前些天学 semantic-ui 的样式写法,class="btn small",结果公司的前辈说我这样写的复用性低,small 的容错率也不好,最后还是改成了 bootstrapclass="btn-small"这种中划线的写法。

#20 楼 @MrPasserby http://smacss.com/

不过还是有兴趣试试 semantic 看看这种写法会不会出错。

#21 楼 @Rei 公司比较注重 Consistency,很多好的东西,我都不知道怎么推广。

#22 楼 @MrPasserby 工作归工作,还有业余项目呢。

感觉看到有点眼痛。。布局和配色,字体是关键

#9 楼 @Perry iphone 看了一下,还能凑合着看看。这周针对移动端再做些优化。

#24 楼 @small_fish__ 这种配色应该算是经典配色套系里的一款,我是直接从一款 bootstrap 皮肤的united参考过来的。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号