ciser
ciser 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.
principles
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
forked from tachyons
version using: v4.8.1
thanks for tachyons-css/tachyons
development commitment:
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)
help
if you have a question or need help feel free to
open an issue here .
or join slack
ciser
usage
require all:
npm
use newest version:
use version 2.3.3:
other
use newest version:
< link rel = " stylesheet " href = " https://unpkg.com/ciser/build/ciser.min.css " >
use version 2.3.3:
< link rel = " stylesheet " href = " https://unpkg.com/ciser@2.3.3/build/ciser.min.css " >
require some prototypes:
use newest version:
< link rel = " stylesheet " href = " https://unpkg.com/ciser/build/ciser .[prototype].min.css " >
use version 2.3.3:
< link rel = " stylesheet " href = " https://unpkg.com/ciser@2.3.3/build/ciser .[prototype].min.css " >
list prototypes:
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:
< link rel = " stylesheet " href = " https://github.com/lamhieu-vk/ciser/blob/master/src/_ [prototype].css " >
and version 2.3.3 at:
< link rel = " stylesheet " href = " https://github.com/lamhieu-vk/ciser@2.3.3/blob/master/src/_ [prototype].css " >
and after build at:
< link rel = " stylesheet " href = " https://github.com/lamhieu-vk/ciser/blob/master/build/ciser .[prototype].css " >
note: can use with tachyons, like ext.
local setup
clone the repo from github and install dependencies through npm.
git clone https://github.com/lamhieu-vk/ciser.git
cd ciser
npm install
build ciser
what's new?
infomation
read more info prototypes at
docs
created by tachyons-cli
version 2.3.3
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
...
responsive
with tachyons :
with ciser :
max-widths
with tachyons , classname is:
. mw [1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9]
with ciser :
. mw [1 | 1s | 2 | 2s | 3 | 3s | 4 | 4s | 5 | 5s | 6 | 6s | 7 | 7s | 8 | 8s | 9]
note:
. mw [ x ] s = mw[x+1] - (mw[x+1] - mw [ x ] ) / 2
widths, heights normal
with tachyons , classname is:
. w [ 2 ];
// not support max heights
with ciser :
. 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:
. w [ x ] s = w[x+1] - (w[x+1] - w [ x ] ) / 2
widths, heights screen width percentage
with tachyons , classname is:
. vh- [ 50 ];
// not support max widths percentage
with ciser :
. 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]
margins, paddings
with tachyons :
. 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 :
. 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:
. 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)
filter:
read more
prototype classname:
. blurred-t {
filter : blur( var ( - - v a l u e - t h i n ) ) ;
}
. blurred-l {
filter : blur( var ( - - v a l u e - l i g h t ) ) ;
}
. blurred-r {
filter : blur( var ( - - v a l u e - r e g u l a r ) ) ;
}
. blurred-m {
filter : blur( var ( - - v a l u e - m e d i u m ) ) ;
}
. blurred-b {
filter : blur( var ( - - v a l u e - b o l d ) ) ;
}
. filter-none {
filter : none ;
}
transition:
read more
. t-none {
transition : none ;
}
. t-vf {
transition-duration : var ( - - d u r a t i o n - v e r y - f a s t ) ;
}
. t-f {
transition-duration : var ( - - d u r a t i o n - f a s t ) ;
}
. t-n {
transition-duration : var ( - - d u r a t i o n - n o r m a l ) ;
}
. t-s {
transition-duration : var ( - - d u r a t i o n - s l o w ) ;
}
. t-vs {
transition-duration : var ( - - d u r a t i o n - v e r y - s l o w ) ;
}
. 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 ( - - d u r a t i o n - v e r y - f a s t ) ;
}
. t-delay-f {
transition-delay : var ( - - d u r a t i o n - f a s t ) ;
}
. t-delay-n {
transition-delay : var ( - - d u r a t i o n - n o r m a l ) ;
}
. t-delay-s {
transition-delay : var ( - - d u r a t i o n - s l o w ) ;
}
. t-delay-vs {
transition-delay : var ( - - d u r a t i o n - v e r y - s l o w ) ;
}
animation:
read more
prototype classname:
. a-restart . e-tigger ,
. a-restart . e-active : active ,
. a-restart . e-hover : hover {
animation-name : none ;
}
. a-vf {
animation-duration : var ( - - d u r a t i o n - v e r y - f a s t ) ;
}
. a-f {
animation-duration : var ( - - d u r a t i o n - f a s t ) ;
}
. a-n {
animation-duration : var ( - - d u r a t i o n - n o r m a l ) ;
}
. a-s {
animation-duration : var ( - - d u r a t i o n - s l o w ) ;
}
. a-vs {
animation-duration : var ( - - d u r a t i o n - v e r y - s l o w ) ;
}
. a-bs {
animation-duration : var ( - - d u r a t i o n - b i n d - s l o w ) ;
}
. a-ss {
animation-duration : var ( - - d u r a t i o n - s u p e r - s l o w ) ;
}
. 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 ( - - d u r a t i o n - v e r y - f a s t ) ;
}
. a-delay-f {
animation-delay : var ( - - d u r a t i o n - f a s t ) ;
}
. a-delay-n {
animation-delay : var ( - - d u r a t i o n - n o r m a l ) ;
}
. a-delay-s {
animation-delay : var ( - - d u r a t i o n - s l o w ) ;
}
. a-delay-vs {
animation-delay : var ( - - d u r a t i o n - v e r y - s l o w ) ;
}
. 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:
. a-zoom-in-out {
animation : zoom-in-out var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-zoom-out-in {
animation : zoom-out-in var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-fade-in {
animation : fade-in var ( - - d u r a t i o n - n o r m a l ) ease ;
}
. a-fade-out {
animation : fade-out var ( - - d u r a t i o n - n o r m a l ) ease ;
}
. a-fade-in-out {
animation : fade-in-out var ( - - d u r a t i o n - n o r m a l ) ease ;
}
. a-fade-out-in {
animation : fade-out-in var ( - - d u r a t i o n - n o r m a l ) ease ;
}
. a-slide-to-top {
animation : slide-to- top var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-slide-to-right {
animation : slide-to- right var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-slide-to-bottom {
animation : slide-to- bottom var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-slide-to-left {
animation : slide-to- left var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-slide-toggle-top {
animation : slide-toggle- top var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-slide-toggle-right {
animation : slide-toggle- right var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-slide-toggle-bottom {
animation : slide-toggle- bottom var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-slide-toggle-right {
animation : slide-toggle- right var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-shake {
animation : shake var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var ( - - d u r a t i o n - n o r m a l ) ease ;
}
. a-wobble {
animation : wobble var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var ( - - d u r a t i o n - n o r m a l ) ease ;
}
. a-rotate {
animation : rotate var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var ( - - d u r a t i o n - n o r m a l ) ease ;
}
. a-tilt-right {
animation : tilt- right var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
. a-tilt-left {
animation : tilt- left var ( - - d u r a t i o n - n o r m a l ) ease , fade-in var (
- - d u r a t i o n - n o r m a l
) ease ;
}
and many classname fn added, check update always to update new fn
license
MIT