449.css 中文文档教程
449 CSS
下午 4:49 创建的 CSS“帮手”？？？？？？？
449 消除了执行基本实用任务的痛苦，有边距、填充、着色和其他一些基本东西的助手。
Directory Structure
C:.
├───dist
└───scss
- dist contains raw css files
- scss contains the scss source of 449
Why use 449?
其他实用程序库带有臃肿的功能（您很可能永远不会使用的功能），其他带有预构建的样式和更多的麻烦。 449 只为最常用的 css 函数（如定位、间距）提供类……
这意味着您可以将 449 与其他 css 库（如 bootstrap、materialize 甚至其他实用程序库，如 tailwind）一起使用，它不会妨碍。 那是一个承诺！
Installation
您可以使用 npm 或 yarn 快速安装 449。
yarn add 449.css
npm i 449.css
Usage
安装 449 后，如果你想要更多的控制和“权力”，你可以使用预建的 css 或 scss。
// import css
import "449.css/dist/449.css";
// import scss
import "449.css/scss/";
// you may need to add the index pased on your compiler
import "449.css/scss/index.scss";
或者在 html 中
<script src="node_modules/449.css/dist/449.css"></script>
你也可以直接在你自己的 scss 中导入 scss 源代码
@import "~449.css/scss/";
responsiveness
449 不像其他库那样带有网格系统，但是，它仍然带有跟随引导程序系统的网格断点。
$xs: 0;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400px;
多亏了媒体断点，您可以进行响应式构建，例如在较小的屏幕上隐藏项目，为选项卡上的项目设置特定高度……这里有无限的可能性。
如果您导入了 scss 源代码，您应该可以访问 449 响应式 mixin，它允许您轻松地进行响应式媒体查询，如下所示：
@include sm-down {
color: blue;
}
此代码仅在小于 $sm: 576px;
的 屏幕上运行可用的 mixins 是：
- xs - 0px to 576px
- sm-down - 576px down
- sm - 577px to 768px
- sm-up - 577px up
- md-down - 768px down
- md - 769px to 992px
- md-up - 769px up
- lg-down - 992px down
- lg - 993px to 1200px
- lg-up - 993px up
- xl-down - 1400px down
- xl - 1201px to 1400px
- xl-up - 1200px up
- xxl - 1401px up
即使您不使用 mixins，449 的维度也是基于这些 mixins，因此您可以随时参考它们。
dimensions
尺寸是 449 CSS 样式的基础。 在大小调整方面有几点需要注意：
Scales
449 有 2 个独特的大小调整比例：像素和百分比。 要参考像素大小，请使用 _ 例如：ml:_1 以提供 10px 的左边距。 您可以直接使用数字作为百分比刻度，例如：ml:10 表示 10% 的左边距。 以下是两种量表的全部可用值。
- "-1": -10px
- "-2": -20px
- "-3": -30px
- "-4": -40px
- "-5": -50px
- "-6": -60px
- "-7": -70px
- "-8": -80px
- "-9": -90px
- "-10": -100px
- "0": 0
- "_1": 10px
- "_2": 20px
- "_3": 30px
- "_4": 40px
- "_5": 50px
- "_6": 60px
- "_7": 70px
- "_8": 80px
- "_9": 90px
- "_10": 100px
- "auto": auto
- "10": 10%
- "20": 20%
- "25": 25%
- "30": 30%
- "33": 33.33%
- "40": 40%
- "45": 45%
- "50": 50%
- "60": 60%
- "66": 66.66%
- "70": 70%
- "75": 75%
- "80": 80%
- "90": 90%
- "100": 100%
- "10vh": 10vh
- "25vh": 25vh
- "50vh": 50vh
- "75vh": 75vh
- "100vh": 100vh
- "10vw": 10vw
- "25vw": 25vw
- "50vw": 50vw
- "75vw": 75vw
- "100vw": 100vw
dimensions util 带有用于设置的类：
- height (h) eg:
h:100 - max height (max-h) eg:
max-h:100 - min height (min-h) eg:
min-h:100 - width (w) eg:
w:100 - max width (max-w) eg:
max-w:100 - min width (min-w) eg:
min-w:100
如上面的 responsiveness 部分所示，您可以将这些维度与断点结合起来，如下所示：
<div class="max-h-xs:100 max-h-sm-up:80">...
margin
449 带有 margin 实用程序，可以让您轻松地为元素设置边距. 可用的类有：
- margin (m) eg:
m:_1 - margin left and right (mx) eg:
mx:_1 - margin up and down (my) eg:
my:_1 - margin top (mt) eg:
mt:_1 - margin bottom (mb) eg:
mb:_1 - margin left (ml) eg:
ml:_1 - margin right (mr) eg:
mr:_1
与 维度 一样，您也可以将边距与断点结合起来：
<div class="m-xs:_1 m-sm-up:_5">...
padding
449 带有一个填充实用程序，可让您轻松地为元素设置填充。 可用的类有：
- padding (p) eg:
p:_1 - padding left and right (px) eg:
px:_1 - padding up and down (py) eg:
py:_1 - padding top (pt) eg:
pt:_1 - padding bottom (pb) eg:
pb:_1 - padding left (pl) eg:
pl:_1 - padding right (pr) eg:
pr:_1
与 margins 一样，您还可以将填充与断点结合使用：
<div class="p-xs:_1 p-sm-up:_5">...
position
position 实用程序允许您轻松地在元素上设置 CSS 位置。 可用的类有：
position:relativeposition:absoluteposition:fixedposition:sticky
除了这些，您还可以使用维度设置项目在屏幕上的顶部、底部、左侧和右侧位置。 例如：
top:_1(top: 10px)left:20(left: 20%)
<div class="position:fixed bottom:_1 right:_2">...
与上述实用程序一样，您也可以在此处使用响应性：
<div class="position-xs:relative position-sm-up:fixed">...
<div class="left-xs:0 left-sm-up:_3">...
display
显示实用程序允许您为以下设置显示：
- none
- flex
- ruby
- block
- contents
- grid
- inline
- inline-block
- inline-flex
- table
<div class="d:fixed">...
flex utility classes
Flex 是最常用的显示类，因此，449 包含一堆帮助程序。
DOCS 即将推出……
cursor
这是一个用于设置光标属性的简单实用程序。
例如：<代码>光标：指针。 您可以在 cursor: 上使用任何有效的光标属性
overflow
特性 即将推出
animation
文档 即将推出
shadow
449 具有从 100 到 900 的灰色阴影。这些灰色可用于设置阴影亮度/暗度。 除了亮度之外，阴影还具有方向和大小，它们都可以用 449 设置。
- shadow:400 (This sets a default shadow with colour grey-400 #ced4da)
- shadow-sm for a small shadow
- shadow-lg for a large shadow
- shadow-top for a shadow on top
- shadow-bottom for a lower shadow
- shadow-left for a left shadow
- shadow-right for a right shadow
您还可以像这样组合大小和方向：
- shadow-top-sm
- shadow-right-lg
<div class="topnav shadow-bottom-sm:400">...
border
即将推出
colors
的功能基本上是背景和文本颜色。 例如：
<small class="text:red">...
<div class="bg:blue">...
font
功能即将推出
449 CSS
A CSS "helper" created at 4:49 pm????????
449 takes away the pain of performing basic utility tasks, has helpers for margin-ing, padding-ing, color-ing and some other basic stuff.
Directory Structure
C:.
├───dist
└───scss
- dist contains raw css files
- scss contains the scss source of 449
Why use 449?
Other utility libraries come with bloated functionality (features you most likely will never use), others come with pre-built styling and a whole lot more unnneccesities. 449 comes with classes for only the most used css functions like positioning, spacing…
This means that you can use 449 together with other css libraries like bootstrap, materialize and even other utility libraries like tailwind, and it won't get in the way. That's a promise!
Installation
You can quickly install 449 using npm or yarn.
yarn add 449.css
npm i 449.css
Usage
After installing 449, you can use the prebuilt css or scss if you want more control and "power".
// import css
import "449.css/dist/449.css";
// import scss
import "449.css/scss/";
// you may need to add the index pased on your compiler
import "449.css/scss/index.scss";
Or in html
<script src="node_modules/449.css/dist/449.css"></script>
You can also import the scss source directly in your own scss
@import "~449.css/scss/";
responsiveness
449 doesn't come with a grid system like other libraries do, however, it still comes with grid breakpoints that follow bootstrap's system.
$xs: 0;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400px;
Thanks to the media breakpoints, you can build responsively, like hiding items on smaller screens, setting a particular height for an item on tab… There are endless possibilities here.
If you imported the scss source, you should have access to the 449 reponsive mixins which allow you to easily make responsive media queries like this:
@include sm-down {
color: blue;
}
This code will only run on screens smaller than $sm: 576px;
The available mixins are:
- xs - 0px to 576px
- sm-down - 576px down
- sm - 577px to 768px
- sm-up - 577px up
- md-down - 768px down
- md - 769px to 992px
- md-up - 769px up
- lg-down - 992px down
- lg - 993px to 1200px
- lg-up - 993px up
- xl-down - 1400px down
- xl - 1201px to 1400px
- xl-up - 1200px up
- xxl - 1401px up
Even if you won't be using mixins, 449's dimensions are based on these mixins, so you can always refer to them.
dimensions
Dimensions are the basis of 449 css styling. There are a few things to note in terms of sizing:
Scales
449 has 2 unique scales for sizing: pixels and percentages. To reference the pixel sizing, use _ eg: ml:_1 to give a margin left of 10px. You can use a number directly for the percentage scale eg: ml:10 for a margin left of 10%. Below is the full range of available values for both scales.
- "-1": -10px
- "-2": -20px
- "-3": -30px
- "-4": -40px
- "-5": -50px
- "-6": -60px
- "-7": -70px
- "-8": -80px
- "-9": -90px
- "-10": -100px
- "0": 0
- "_1": 10px
- "_2": 20px
- "_3": 30px
- "_4": 40px
- "_5": 50px
- "_6": 60px
- "_7": 70px
- "_8": 80px
- "_9": 90px
- "_10": 100px
- "auto": auto
- "10": 10%
- "20": 20%
- "25": 25%
- "30": 30%
- "33": 33.33%
- "40": 40%
- "45": 45%
- "50": 50%
- "60": 60%
- "66": 66.66%
- "70": 70%
- "75": 75%
- "80": 80%
- "90": 90%
- "100": 100%
- "10vh": 10vh
- "25vh": 25vh
- "50vh": 50vh
- "75vh": 75vh
- "100vh": 100vh
- "10vw": 10vw
- "25vw": 25vw
- "50vw": 50vw
- "75vw": 75vw
- "100vw": 100vw
The dimensions util comes with classes for setting:
- height (h) eg:
h:100 - max height (max-h) eg:
max-h:100 - min height (min-h) eg:
min-h:100 - width (w) eg:
w:100 - max width (max-w) eg:
max-w:100 - min width (min-w) eg:
min-w:100
As shown in the responsiveness section above, you can combine these dimensions with breakpoints like this:
<div class="max-h-xs:100 max-h-sm-up:80">...
margin
449 comes with a margin utility that allows you to easily set margins for your elements. The available classes are:
- margin (m) eg:
m:_1 - margin left and right (mx) eg:
mx:_1 - margin up and down (my) eg:
my:_1 - margin top (mt) eg:
mt:_1 - margin bottom (mb) eg:
mb:_1 - margin left (ml) eg:
ml:_1 - margin right (mr) eg:
mr:_1
Just as with dimensions, you can also combine margins with breakpoints:
<div class="m-xs:_1 m-sm-up:_5">...
padding
449 comes with a padding utility that allows you to easily set paddings for your elements. The available classes are:
- padding (p) eg:
p:_1 - padding left and right (px) eg:
px:_1 - padding up and down (py) eg:
py:_1 - padding top (pt) eg:
pt:_1 - padding bottom (pb) eg:
pb:_1 - padding left (pl) eg:
pl:_1 - padding right (pr) eg:
pr:_1
Just as with margins, you can also combine paddings with breakpoints:
<div class="p-xs:_1 p-sm-up:_5">...
position
The position utility allows you to easily set a CSS position on your element. The available classes are:
position:relativeposition:absoluteposition:fixedposition:sticky
Besides these, you can also set the top, bottom, left and right positions of items on the screen using dimensions. eg:
top:_1(top: 10px)left:20(left: 20%)
<div class="position:fixed bottom:_1 right:_2">...
Just as with the above utilities, you can also use responsiveness here:
<div class="position-xs:relative position-sm-up:fixed">...
<div class="left-xs:0 left-sm-up:_3">...
display
The display utility allows you to set displays for the following:
- none
- flex
- ruby
- block
- contents
- grid
- inline
- inline-block
- inline-flex
- table
<div class="d:fixed">...
flex utility classes
Flex is the most used display class, as such, 449 includes a bunch of helpers for it.
DOCS coming soon…
cursor
This is a simple utility for setting the cursor property.
eg: cursor:pointer. You can use any valid cursor property on cursor:
overflow
FEATURE COMING SOON
animation
DOCS COMING SOON
shadow
449 comes with shades of grey ranging from 100 to 900. These greys can be used to set the shadow lightness/darkness. Besides the lightness, shadows also posess a direction and size which can all be set with 449.
- shadow:400 (This sets a default shadow with colour grey-400 #ced4da)
- shadow-sm for a small shadow
- shadow-lg for a large shadow
- shadow-top for a shadow on top
- shadow-bottom for a lower shadow
- shadow-left for a left shadow
- shadow-right for a right shadow
You can also combine sizes and directions like this:
- shadow-top-sm
- shadow-right-lg
<div class="topnav shadow-bottom-sm:400">...
border
FEATURE COMING SOON
colors
Basically backgrounds and text colours. Eg:
<small class="text:red">...
<div class="bg:blue">...
font
FEATURE COMING SOON
