README

basis.css 为Web应用程序提供基本格式化样式。

您可以访问 docs.tobento.ch/css-basis 页面以获取文档和演示。

入门

导入CSS

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

浏览器支持

仅支持现代浏览器。

文档

链接

锚点标签将使用定义的 "点击颜色" CSS自定义属性进行样式化。

<a href="#">A Tag</a>

您可以使用 link 类为任何其他元素。

<span class="link">Link</span>

您可以使用 active 类表示链接是激活的。

<a class="active" href="#">A Tag</a>
<span class="link active">Link</span>

排版

您还可以访问演示页面。

文本大小

文本重量

文本对齐

文本转换

字体

标题

@font-face

以下是一个导入字体家族及其权重范围的例子，这些权重对应于basis.css的权重。

@font-face {
  font-family: "FuturaBT";
  src: url("/fonts/FUTURAL.woff") format("woff"),
    url("/fonts/FUTURAL.woff2") format("woff2");
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FuturaBT";
  src: url("/fonts/FUTURAM.woff") format("woff"),
    url("/fonts/FUTURAM.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FuturaBT";
  src: url("/fonts/FUTURAH.woff") format("woff"),
    url("/fonts/FUTURAH.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

/* Define in root var */
:root {
  --font-secondary: "FuturaBT";  
}

颜色

请访问演示页面以获取文档。

按钮

您还可以访问演示页面。

按钮类型

按钮类可以用于以下标签

<a class="button" href="#">A Tag</a>
<button class="button">Button tag</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

按钮大小

文本大小

您可以使用文本大小作为按钮大小。

<a class="button text-s" href="#">Link</a>
<button class="button text-xl">Button</button>

fit

<button class="button fit">Button</button>

按钮样式

<button class="button">Button default</button>
<button class="button primary">Button primary</button>
<button class="button raw">Button raw</button>

按钮状态

<button class="button active">Active Button</button>
<button class="button" disabled>Disabled Button</button>
<button class="button loading">Loading Button</button>

按钮列表

您可以使用按钮容器创建按钮列表。

spaced

<div class="buttons spaced">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
</div>

grouped

<div class="buttons grouped">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
</div>

expanded

<div class="buttons">
    <button class="button expanded">Button</button>
    <button class="button expanded">Button</button>
</div>

图标

您可以查看图标服务以轻松管理应用程序的图标。

SVG图标

<span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
    <span>Download</span>
</span>

<span class="icon">
    <span>Download</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
</span>

<span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
</span>

Font Awesome和其他

<span class="icon">
    <i class="fas fa-download"></i>
    <span>Download</span>
</span>

图标大小

您可以使用文本大小作为图标大小。但只有svg或文本图标可以进行缩放。

<span class="icon text-xl">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>
    <span>Download</span>
</span>

列表

请访问演示页面以获取文档。

菜单

请访问演示页面以获取文档。

表单

请访问演示页面以获取文档。

内容

请访问演示页面以获取文档。

助手

位置

显示

浮动

溢出

光标

杂项

尺寸

最大宽度

max-width-xxs 的大小为 4rem
max-width-xs 的大小为 8rem
max-width-s 的大小为 16rem
max-width-m 的大小为 32rem
max-width-l 的大小为 48rem
max-width-xl 的尺寸为 64rem
max-width-xxl 的尺寸为 80rem
max-width-min 等于 CSS 的 max-width: min-content
max-width-max 等于 CSS 的 max-width: max-content
max-width-fit 等于 CSS 的 max-width: fit-content
max-width-full 等于 CSS 的 max-width: 100%

间距

边距

可用的外边距方向

m 用于顶部、右侧、底部、左侧
mt 用于顶部
mr 用于右侧
mb 用于底部
ml 用于左侧
mx 水平方向用于左侧和右侧
my 垂直方向用于顶部和底部

可附加到外边距方向上的尺寸，如 mt-s

0 是 0
xxs 的尺寸为 0.25rem
xs 的尺寸为 0.5rem
s 的尺寸为 1rem
m 的尺寸为 2rem
l 的尺寸为 4rem
xl 的尺寸为 6rem
xxl 的尺寸为 8rem
auto

填充

可用的填充方向

p 用于顶部、右侧、底部、左侧
pt 用于顶部
pr 用于右侧
pb 用于底部
pl 用于左侧
px 水平方向用于左侧和右侧
py 垂直方向用于顶部和底部

可附加到填充方向上的尺寸，如 pt-s

0 是 0
xxs 的尺寸为 0.25rem
xs 的尺寸为 0.5rem
s 的尺寸为 1rem
m 的尺寸为 2rem
l 的尺寸为 4rem
xl 的尺寸为 6rem
xxl 的尺寸为 8rem

列

Columns 是一个基于 CSS flexbox 的简单网格系统。它是一种以桌面优先的方法。

您还可以访问演示页面。

列大小

通过类如 col-1 到 col-12 按列组合列。

<div class="cols">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
</div>

自动宽度列。请注意，这样，您的列将仅是一行！

<div class="cols">
    <div class="col">first col</div>
    <div class="col">second col</div>
    <div class="col">third col</div>
</div>

列选项

列的附加选项，如 cols center

<div class="cols middle">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
</div>

列的附加选项，如 col middle

<div class="cols">
    <div class="col-3 top">col-3</div>
    <div class="col-6 middle">col-6</div>
    <div class="col-3 bottom">col-3</div>
</div>

列间隙

您可以使用填充间距作为间隙。

<div class="cols">
    <div class="col-3 p-xs">col-3</div>
    <div class="col-6 p-xs">col-6</div>
    <div class="col-3 p-xs">col-3</div>
</div>

列响应式

列大小

widescreen-1 到 widescreen-12
desktop-1 到 desktop-12
tablet-1 到 tablet-12
mobile-1 到 mobile-12

查看其尺寸的桌面优先断点。

<div class="cols">
    <div class="col-4 tablet-6 mobile-12">col</div>
    <div class="col-4 tablet-6 mobile-12">col</div>
    <div class="col-4 tablet-6 mobile-12">col</div>
</div>

列的选项

使用 widescreen-*、desktop-*、tablet-*、mobile-* 与以下对齐类，如 tablet-middle。

*-nowrap
*-center
*-right
*-top
*-middle
*-bottom
*-reverse

<div class="cols tablet-middle">
    <div class="col-3">col-3</div>
    <div class="col-6">col-6</div>
    <div class="col-3">col-3</div>
</div>

列的选项

使用 widescreen-*、desktop-*、tablet-*、mobile-* 与以下对齐类，如 tablet-middle。

*-top
*-middle
*-bottom

<div class="cols">
    <div class="col-3 tablet-top">col-3</div>
    <div class="col-6 tablet-middle">col-6</div>
    <div class="col-3 tablet-bottom">col-3</div>
</div>

响应式

Basis.css 使用以下断点作为其核心类。

移动优先断点

/* mobile */    
    
/* tablet */        
@media screen and (min-width: 769px), print {}
    
/* desktop */    
@media screen and (min-width: 1024px), print {}
    
/* widescreen */
@media screen and (min-width: 1216px), print {}
    
/* fullhd */
@media screen and (min-width: 1408px), print {}

桌面优先断点

/* fullhd */

/* widescreen */
@media screen and (max-width: 1407px), print {}

/* desktop */
@media screen and (max-width: 1215px), print {}

/* tablet */ 
@media screen and (max-width: 1023px), print {}

/* mobile */ 
@media screen and (max-width: 768px), print {}

tobento / css-basis

维护者

详细信息

README

目录

入门

导入CSS

浏览器支持

文档

链接

排版

文本大小

文本重量

文本对齐

文本转换

字体

标题

@font-face

颜色

按钮

按钮类型

按钮大小

按钮样式

按钮状态

按钮列表

图标

图标大小

列表

菜单

表单

内容

助手

位置

显示

浮动

溢出

光标

杂项

尺寸

最大宽度

间距

边距

填充

列

列大小

列选项

列间隙

列响应式

响应式

移动优先断点

桌面优先断点

鸣谢