Kico Style

开始

Kico Style 是一个由青少年前端工程学习者保罗设计的一个轻量化前端框架。

开始使用

1. 欢迎享用可口的 Kico Style 1.0.2。

下载最新版 ♥ Star 更新日志 开发故事

2. 在头部引用 Kico Style 的样式表

<link href="css/binkic.css" rel="stylesheet" type="text/css"/>

或者在你的 CSS 里面这样做:

@import url("binkic.css"); /* 引用缤奇基层框架 */

3. 在头部插入给页面提供响应式功能的属性

<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />

简要规范

底层编写需要按照先写 <header>,之后是 <main>,最后 <footer> 的方法。当然其之间也可以添加 <aside>(侧边栏)一类的标签。这三个标签的含义分别对应页眉,正文和页尾。在本框架内,它们一般为 body 元素的子元素,我们不建议您将此类标签插入至任一子元素。

<header>
    // 头部内容区(顶部菜单等)
</header>
<main class="container">
    // 正文内容区
</main>
<footer>
    // 页尾内容区(友情链接等)
</footer>

如要限制正文区的宽度,并需要在页面左右侧保留边距,请添加一个类名为“wrap”的DIV盒子。

<main class="container">
    <div class="wrap">
        <p>这段文字的宽度将被约束在1200像素</p>
    </div>
</main>
PS:上面添加的"container"类可以让其子元素无论如何放大缩小也不会溢出屏幕。

wrap 也提供了多种扩展类,可以使用不同宽度的同时,也可以清除边距。

类名 行为
wrap 保留 20px 的边距,宽度限制到 1200px
wrap min 保留 20px 的边距,宽度限制到 800px
wrap mid 保留 20px 的边距,宽度限制到 1000px
wrap max 保留 20px 的边距,宽度限制到 1600px
wrap full 保留 20px 的边距,不限制宽度
wrap thin 边距改为 10px
wrap clear 清除边距

推荐的类名

以下为开发者保罗在日常制作项目时采用的一些命名方案,可供大家参考和学习。

Header 子元素的布置可参考下列选择器:
类名 用途
.head-title 页眉标题区,可放站点标题、可供菜单显示的切换按钮
.head-menu 页眉菜单区,可放站点主要的菜单项
.site-title 站点标题,同时可放小标题(如有)
.toggle-btn-btn 切换显示菜单的按钮,用于手机版菜单的显示和隐藏
.search-btn 切换显示搜索的按钮,用于搜索面板的显示和隐藏
Main 子元素的布置可参考下列选择器:
类名 用途
main-title 正文头部区,可放正文标题等
main-content 正文内容区,可放章节(section)等标签
Footer 子元素的布置可参考下列选择器:
类名 用途
foot-menu 页尾菜单区,可放友情链接等
sub-footer 页尾扩展区,可放版权信息,社交链接等

切忌的类名

由于本框架存在精简的扩展类名,所以在使用本框架的时候切忌使用 redblueinline 等词作为元素的样式设定类,按照其他著名前端项目的一贯作风,这些做法都是不可取的(例:示例一),当然如果你实在要用这个名称,前面也得加一个用于区分它的名称吧?(例:示例二)

.blue{
    display: flex;
    background: #666;
}

.box-blue{
    display: flex;
    background: #666;
}