你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
t-baby

《ICECSS入门指南》第二章 使用方法和基础元素 11个回复 专栏 @ 开源

t-baby 发布于 2 年前

使用ICECSS


首先你需要到 https://github.com/T-baby/ICECSS 上下载最新版本的包。

我们下载后可以看到这样一个文件结构,docs是文档,css中包含了普通版、压缩版、Less版三个版本的CSS文件,font是图标字体,html文件夹里存放了两个例子,同时也是建议大家在开发时将html文件放在html文件夹中。img下存放着图片ICECSS所需的两个图片和一个例子用的logo。

为了大家使用方便,在JS文件夹中不仅有ICECSS的JS还附带了Jquery和Less编译用的js。

ICECSS的版本是写在version.json里的,这是我们内部使用的一个版本管理工具的格式。

plugin下存放的都是ICECSS自主开发或者封装改写的插件,这些插件的版权都归原作者所有。至于每个插件的功能我们在之后的章节再来讲解。

使用起来很简单,将你自己的网页放在html文件夹中或者是根目录,然后引入icecss文件。

<link rel="stylesheet" href="../css/icecss.css>

然后导入JS,由于ICECSS是基于JQuery的,所以在导入ICECSS的JS前请先导入JQuery,我们在js文件夹中已经附带了一个。

<script src="../js/jquery.min.js"></script>
<script src="../js/icecss.js"></script>

ICECSS本身提供了CDN服务,你可以在你的项目中直接使用CDN上的地址。

http://cdn.besdlab.cn/jquery/2.1.1/jquery.2.1.1.min.js
http://cdn.besdlab.cn/icecss/icecss.css
http://cdn.besdlab.cn/icecss/icecss.js

基础元素


ICECSS中所有的CSS的class名字都有ice-这个前缀,比如ice-div、ice-form。这是为了更好的兼容性和减少污染。

我们在开发ICECSS的初期就考虑到使用了两个css框架的情况,所以我们的基础元素也只会在ice-div下生效。

这些基础元素都是不需要增加额外的class的,只需要放在ice-div下即可。

比如:

<div class="ice-div"><h1>TEST</h1></div>

基础元素包括:

  • h1

  • h2

  • h3

  • h4

  • h5

  • h6

  • p

  • ul

  • li

  • ol

  • dl

  • dt

  • dd

  • a

  • blockquote

  • hr(分割线)

  • pre

  • code

如果你需要使元素具有下面的标题效果,可以给它增加一个ice-title标签。

ICECSS的布局是基本不带内边距的,在实际开发中如果需要内边距可以使用透明面板。

ICECSS的基础面板ice-panel是一个灰框白底的,透明则是ice-panel-original。你可以在div上使用面板或者是在布局上使用。

如果是需要一个可以关闭的面板则要用ice-panel-point。如:

<div class="ice-panel-point">
    <span class="ice-close"></span>
    <p>这是一个可关闭的提示面板</p>
</div>
  • nightire

    想问一个问题,没有什么冒犯的意思,请问你自己亲自做过多大规模前端项目的样式开发?拿你举的 .ice-panel 的例子来说,为了让面板可以关闭,添加了那个带有 .ice-panel-point<div>,你在做真实项目的时候也是这样实践的吗?

    #1
  • t-baby

    @nightire 都是小项目啦,突然发现示例代码有问题。。泪奔。ice-panel-point这个部分我是学uikit的,你可以用任意的标签添加ice-close。

    #2
  • nightire

    @t-baby 嗯,其实标签用什么不是重点,主要是你之前的代码 HTML 架构也太冗余了,修改之后就好了,没什么。

    #3
  • t-baby

    @nightire 文档写错了。。哭。。

    #4
  • 大地Dudy

        

    #5
  • nightire

    @大地Dudy 这话说的,若只是纯视觉上的变化,那岂不是直接拿现有的框架改改更方便?使用者也完全没有学习成本。若是自己写成了框架,视觉效果最终还是要落实在代码上的,岂能不重视代码结构?

    #6
  • t-baby

    @nightire 考虑过这个问题,所以ICECSS的学习成本相当的低,基本上看过一遍都能使用。

    #7
  • nightire

    @t-baby 希望你不要误会,我并不是说你的框架写得不好或是不应该写一个这样的框架。只是但凡上升到一个框架(或者往小了说,一个样式集合库),要考虑的东西就不仅仅是“看起来如何”这么简单了。

    Bootstrap 默认的样子也不能说是难看,可能说“简单”比较准确一些吧,但并不是它不能做到好看,或者各种各样的好看,而是它作为框架的哲学就是这样的。实际上现在为 Bootstrap 定制的各种 themes 比比皆是,CSS/Less/Sass 学得好的话想改成某种风格也是很简单的事情。如果我是你,打算做一款新的框架的话,我肯定要问自己两个问题:

    1. 市面上出色的框架也不止 Bootstrap 一家,为什么为它写扩展写插件写主题的人最多?
    2. 如果我因为追求某种视觉风格重新打造了一款框架,那么我要从哪些角度入手才能吸引更多的人使用我的作品?

    对于第一点,我想答案大家都清楚的;即使到了现在我也不觉得 Bootstrap 做得很完美,但基于一个框架它的确做到了在各方面都能满足大部分人的胃口。

    对于第二点,再好的风格也会过时,开发者若是用了我的框架迟早会遇到要定制化开发的问题,那么如果我因为初始风格吸引了他们,却因为结构/可扩展性/可定制性/可重用性等等原因又失去了它们(除非在大多数方面做到和 Bootstrap 差不多好,或者某一方面出乎意料的更好),那我重复造轮子的意义又在哪里呢?我何不直接基于 Bootstrap 定制一款新主题呢?这样无论是我还是使用者都能受益,何乐而不为?

    当然我不能说自己很了解你写的框架,所以我并不是要说你做的不好,只是从开发者的角度我没能从你的介绍文章里看出真正有着核心竞争力的东西。也许是我水平不够,但我确实认为上述东西是非常值得框架开发者认真思考并且传递出来的信息。我期待有不一样的好东西,那么我也会成为忠实的用户。

    #8
  • t-baby

    @nightire 是这样的,ICECSS并不是专门为了开源而开发的,而是为了我们自身内部开发东西时更加标准、规范开发出来的,只是顺便开源了。所以ICECSS基本上是针对我们实验室的所需进行开发组件。而在CSS上也是依照实验室的设计来制定的。有了ICECSS后我们开发自身的网页就快了很多。之所以不使用Bootstrap,是因为太多人使用了,没有feel。 bootstrap并不是特别适合全屏大图页开发、也不太适合我们实验室的设计风格,如果要全部定制的话,恐怕也不比重造一个轮子更简单吧?

    #9
  • nightire

    @t-baby 是的,所以我说我不反对造一个新的框架,只不过想要强调的是既然开源了,那么除了展示视觉风格以外,介绍框架的设计思路,命名哲学,扩展能力,定制能力等等都很重要。当然了,也不否认有种情况是“我就是想开源罢了,想用就用不用拉倒,我也不打算去通盘考虑大众的实际需求”,这就仁者见仁智者见智了。

    所以你看,我在这里回复并不是和你抬扛或辩论的,只是觉得中文社区出一个样式框架不容易,小小的希望设计者能够考虑的更完善,能够带给大家一个更全面的解决方案,而不只是“看起来很美”。但如你所说,ICSCSS 只是因为内部开发顺带开源的,那我可能是浪费感情了,如果它的方向就是小众化框架,我之前说的那很多东西也就不再重要。

    另外,Bootstrap 的定制化没有想象中的那么复杂,尽管它的定制与扩展能力都算不上最优秀的,但如果说定制化不会比再造一个 Bootstrap 更简单的话,那也太小看 Bootstrap 了,同时也太高看全世界数以千计的基于 Bootstrap 做定制主题的开发者们了。

    #10
  • t-baby

    这个是当然的,我们会在未来的版本中逐渐增加更多的组件以及提供更加完全的解决方案,也欢迎大家为ICECSS贡献组件。

    #11
登录后回复,如无账号,请使用邀请码注册