Functional CSS, help quickly build and design new UI without writing css.
npm install ciserciser like a version update forked from tachyons with some new function
classname css. like tachyons, ciser help quickly build and design new UI without
writing css.
forked from tachyons and updated by
Lam Hieu (@lamhieu-vk). in ciser, I updated many
classname fn to make the design work easier than ever, the size of the
attributes is added in a reasonable proportion, carefully calculated. full
support all responsive queries (since version 2.0.0).
most of the properties of the tachyons are retained, so switching from tachyons
to ciser will not affect the current interface.
updating ciser properties example, thanks for used.
* everything should be 100% responsive
* everything should be readable on any device
* everything should be as fast as possible
* designing in the browser should be easy
* it should be easy to change any interface or part of an interface without
breaking any existing interfaces
* doing one thing extremely well promotes reusability and reduces repetition
* documentation helps promote reusability and shared knowledge
* css shouldn't impede accessibility or the default functionality of Html
* you should send the smallest possible amount of code to the user
_cited from tachyons_
version using: v4.8.1
thanks for tachyons-css/tachyons
this is a regularly updated version of the new features when we recommend that
you use the latest version for the latest updates. During the development
process we will retain the old structures and attributes so that they will not
affect the features you are using.
if you don't want require all prototypes of ciser, you can require some
prototypes and use it with tachyons if you like.
updated: Oct 22, 2017 (UTC+7)
thank you all for using ciser in the last time i updated the latest update i have completely fixed the error and you can use it in the most convenient way. however, this is now a fork of tachyons, from today I will not develop more about it, I will create a new, more optimal and gentle ciser! wait for me...
updated: Jan 27, 2018 (UTC+7)
if you have a question or need help feel free to
open an issue here.
or join slack
ciser
npm
use newest version:
``bash`
npm install ciser
use version 2.3.3:
`bash`
npm install ciser@2.3.3
other
use newest version:
`html`
use version 2.3.3:
`html`
use newest version:
`html`
use version 2.3.3:
`html`
list prototypes:
`css`
animation | aspect-ratios | background-position | background-size | border-colors | border-radius | border-style | border-widths | borders | box-shadow | box-sizing | clears | code | colors | coordinates | debug-children | debug-grid | debug | display | flexbox | floats | font-family | font-style | font-weight | forms | heights | hovers | images | letter-spacing | line-height | links | lists | max-widths | media-queries | module-template | negative-margins | nested | normalize | opacity | outlines | overflow | position | rotations | skins-pseudo | skins | spacing | styles | tables | text-align | text-decoration | text-transform | transition | type-scale | typography | utilities | vertical-align | visibility | white-space | widths | word-break | z-index
read more prototypes newest version at:
`html`
and version 2.3.3 at:
`html`
and after build at:
`html`
note: can use with tachyons, like ext.
clone the repo from github and install dependencies through npm.
`bash`
git clone https://github.com/lamhieu-vk/ciser.git
cd ciser
npm install
`bash`
npm run build
read more info prototypes at
docs
_created by tachyons-cli_
* add hover box-shadows read more
* fix value of widths min-w-75
* add filter (blur) read more
* fix prototypes classname in animations and transitions
* enriched many spacing max-width,
read more
* add new some animation,
read more
* add new media query extensions
* split the prototypes,
read more
* add animation function classname,
read more
* add transition function classname,
read more
* change box-shadow style,
read more
* add .center-box used to center,
read more
* add some widths,
read more
* add some heights,
read more
* add some z-index,
read more
* enriched many spacing margins and paddings,
read more
* enriched many spacing negative margins,
read more
* add some fonts style in font-family,
read more
* ...
with _tachyons_:
`css`
.[fn classname]-[ m ];
/*
media query extensions:
-ns = not-small
-m = medium
-l = large
*/
with ciser:
`css`
.[fn classname]-[ m ];
/*
media query extensions:
-ns = not-small
-m = medium
-ml = mobile landscape
-l = large
*/
with _tachyons_, classname is:
`css`
.mw[1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9]
with ciser:
`css`
.mw[1 | 1s | 2 | 2s | 3 | 3s | 4 | 4s | 5 | 5s | 6 | 6s | 7 | 7s | 8 | 8s | 9]
note:
`css`
.mw[x]s = mw[x+1] - (mw[x+1] - mw[x]) / 2
with _tachyons_, classname is:
`css`
.w[ 2 ];
// not support max heights
with ciser:
`css
.w[1 | 1s | 2 | 2s | 3 | 3s | 4 | 4s | 5 | 5s]
.min-w-[25 | 50 | 75 | 100]
.max-w-[25 | 50 | 75 | 100]
.h[1 | 1s | 2 | 2s | 3 | 3s | 4 | 4s | 5 | 5s]
.min-h-[25 | 50 | 75 | 100]
.max-h-[25 | 50 | 75 | 100]
`
note:
`css`
.w[x]s = w[x+1] - (w[x+1] - w[x]) / 2
with _tachyons_, classname is:
`css`
.vh-[ 50 ];
// not support max widths percentage
with ciser:
`css
.vh-[10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 100]
.min-vh-[25 | 50 | 75 | 100]
.max-vh-[25 | 50 | 75 | 100]
.vw-[10 | 20 | 25 | 30 | 40 | 50 | 60 | 70 | 75 | 80 | 90 | 100]
.min-vw-[25 | 50 | 75 | 100]
.max-vw-[25 | 50 | 75 | 100]
`
with _tachyons_:
`css
.p[a | t | r | b | l][0 | 1 | 2 | 3 | 4 | 5 | 6 | 7]
.m[a | t | r | b | l][0 | 1 | 2 | 3 | 4 | 5 | 6 | 7]
`
width ciser:
`css
.p[a | t | r | b | l][0 | 0s | 1 | 1s | 2 | 2s | 3 | 3s | 4 | 4s | 5 | 5s | 6 | 6s | 7]
.m[a | t | r | b | l][0 | 0s | 1 | 1s | 2 | 2s | 3 | 3s | 4 | 4s | 5 | 5s | 6 | 6s | 7]
`
note:
`css
.p[a | t | r | b | l][x]s = p[x+1] - (p[x+1] - p[x]) / 2)
.m[a | t | r | b | l][x]s = m[x+1] - (m[x+1] - m[x]) / 2)
`
prototype classname:
`css
.blurred-t {
filter: blur(var(--value-thin));
}
.blurred-l {
filter: blur(var(--value-light));
}
.blurred-r {
filter: blur(var(--value-regular));
}
.blurred-m {
filter: blur(var(--value-medium));
}
.blurred-b {
filter: blur(var(--value-bold));
}
.filter-none {
filter: none;
}
`
`css
.t-none {
transition: none;
}
.t-vf {
transition-duration: var(--duration-very-fast);
}
.t-f {
transition-duration: var(--duration-fast);
}
.t-n {
transition-duration: var(--duration-normal);
}
.t-s {
transition-duration: var(--duration-slow);
}
.t-vs {
transition-duration: var(--duration-very-slow);
}
.t-ease {
transition-timing-function: ease;
}
.t-ease-in {
transition-timing-function: ease-in;
}
.t-ease-out {
transition-timing-function: ease-out;
}
.t-ease-in-out {
transition-timing-function: ease-in-out;
}
.t-linear {
transition-timing-function: linear;
}
.t-step-start {
transition-timing-function: step-start;
}
.t-step-end {
transition-timing-function: step-end;
}
.t-all {
transition-property: all;
}
.t-opacity-ns {
transition-property: opacity;
}
.t-opacity {
transition-property: opacity;
}
.t-margin {
transition-property: margin;
}
.t-padding {
transition-property: padding;
}
.t-height {
transition-property: height;
}
.t-width {
transition-property: width;
}
.t-color {
transition-property: color;
}
.t-background {
transition-property: background;
}
.t-border {
transition-property: border;
}
.t-box-shadow {
transition-property: box-shadow;
}
.t-text-shadow {
transition-property: text-shadow;
}
.t-delay-vf {
transition-delay: var(--duration-very-fast);
}
.t-delay-f {
transition-delay: var(--duration-fast);
}
.t-delay-n {
transition-delay: var(--duration-normal);
}
.t-delay-s {
transition-delay: var(--duration-slow);
}
.t-delay-vs {
transition-delay: var(--duration-very-slow);
}
`
prototype classname:
`css
.a-restart.e-tigger,
.a-restart.e-active:active,
.a-restart.e-hover:hover {
animation-name: none;
}
.a-vf {
animation-duration: var(--duration-very-fast);
}
.a-f {
animation-duration: var(--duration-fast);
}
.a-n {
animation-duration: var(--duration-normal);
}
.a-s {
animation-duration: var(--duration-slow);
}
.a-vs {
animation-duration: var(--duration-very-slow);
}
.a-bs {
animation-duration: var(--duration-bind-slow);
}
.a-ss {
animation-duration: var(--duration-super-slow);
}
.a-normal {
animation-direction: normal;
}
.a-reverse {
animation-direction: reverse;
}
.a-alternate {
animation-direction: alternate;
}
.a-alternate-reverse {
animation-direction: alternate-reverse;
}
.a-ease {
animation-timing-function: ease;
}
.a-ease-in {
animation-timing-function: ease-in;
}
.a-ease-out {
animation-timing-function: ease-out;
}
.a-ease-in-out {
animation-timing-function: ease-in-out;
}
.a-linear {
animation-timing-function: linear;
}
.a-step-start {
animation-timing-function: step-start;
}
.a-step-end {
animation-timing-function: step-end;
}
.a-infinite {
animation-iteration-count: infinite;
}
.a-2s {
animation-iteration-count: 2;
}
.a-3s {
animation-iteration-count: 3;
}
.a-4s {
animation-iteration-count: 4;
}
.a-5s {
animation-iteration-count: 5;
}
.a-10s {
animation-iteration-count: 10;
}
.a-paused {
animation-play-state: paused;
}
.a-running {
animation-play-state: running;
}
.a-fill-none {
animation-fill-mode: none;
}
.a-fill-forwards {
animation-fill-mode: forwards;
}
.a-fill-backwards {
animation-fill-mode: backwards;
}
.a-fill-both {
animation-fill-mode: both;
}
.a-delay-vf {
animation-delay: var(--duration-very-fast);
}
.a-delay-f {
animation-delay: var(--duration-fast);
}
.a-delay-n {
animation-delay: var(--duration-normal);
}
.a-delay-s {
animation-delay: var(--duration-slow);
}
.a-delay-vs {
animation-delay: var(--duration-very-slow);
}
.a--zoom-in-out {
animation-name: zoom-in-out;
}
.a--zoom-out-in {
animation-name: zoom-out-in;
}
.a--fade-in {
animation-name: fade-in;
}
.a--fade-out {
animation-name: fade-out;
}
.a--fade-in-out {
animation-name: fade-in-out;
}
.a--fade-out-in {
animation-name: fade-out-in;
}
.a--slide-to-top {
animation-name: slide-to-top;
}
.a--slide-to-right {
animation-name: slide-to-right;
}
.a--slide-to-bottom {
animation-name: slide-to-bottom;
}
.a--slide-to-left {
animation-name: slide-to-left;
}
.a--shake {
animation-name: shake;
}
.a--wobble {
animation-name: wobble;
}
.a--rotate {
animation-name: rotate;
}
.a--tilt-right {
animation-name: tilt-right;
}
.a--tilt-left {
animation-name: tilt-left;
}
.a-none {
animation: none;
}
`
default animation classname:
`css``
.a-zoom-in-out {
animation: zoom-in-out var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-zoom-out-in {
animation: zoom-out-in var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-fade-in {
animation: fade-in var(--duration-normal) ease;
}
.a-fade-out {
animation: fade-out var(--duration-normal) ease;
}
.a-fade-in-out {
animation: fade-in-out var(--duration-normal) ease;
}
.a-fade-out-in {
animation: fade-out-in var(--duration-normal) ease;
}
.a-slide-to-top {
animation: slide-to-top var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-slide-to-right {
animation: slide-to-right var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-slide-to-bottom {
animation: slide-to-bottom var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-slide-to-left {
animation: slide-to-left var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-slide-toggle-top {
animation: slide-toggle-top var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-slide-toggle-right {
animation: slide-toggle-right var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-slide-toggle-bottom {
animation: slide-toggle-bottom var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-slide-toggle-right {
animation: slide-toggle-right var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-shake {
animation: shake var(--duration-normal) ease, fade-in var(--duration-normal) ease;
}
.a-wobble {
animation: wobble var(--duration-normal) ease, fade-in var(--duration-normal) ease;
}
.a-rotate {
animation: rotate var(--duration-normal) ease, fade-in var(--duration-normal) ease;
}
.a-tilt-right {
animation: tilt-right var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
.a-tilt-left {
animation: tilt-left var(--duration-normal) ease, fade-in var(
--duration-normal
) ease;
}
_and many classname fn added, check update always to update new fn_
MIT