kry

krymoh

Krymoh is a CSS framework that focuses on cinematic features in css that adds live to a web page AKA the CSS movie maker.

Showing:

Popularity

Downloads/wk

1

GitHub Stars

8

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Krymoh Image

Krymoh 😉

Krymoh is a CSS framework that focuses on cinematic features in css that adds live to a web page AKA the CSS movie maker. This is written in SASS therefore it is modular. The core idea here is to make this the go-to framework when a cinematic feel or property is required in a web page.

Installations & Usage

The framework can be added to your project using two approaches.

1.Install using npm as demostrated below.

   $npm install krymoh.css --save

2.It can be cloned from GitHub and added to your web application as illustrated below.

   <head>
     <link rel="stylesheet" href="krymoh.min.css" type="text/css">
   </head>

Core Components

Krymoh ships with these core components:

  1. Animations
  2. Filters
  3. Gradient
  4. Translation
  5. Transitions
  6. Colors (bonus) 😄

Animations

The animation component of krymoh takes the form .ani-<animation-name>. These are powerful motion effects that makes user interaction fluid. Below are a list of animations that ships with the framework.

Animation NameClass Name
Pulsepulse
Shakeshake
Flipflip
Bouncebounce
Zoomzoom
Wobblewobble
Ghostghost
Rotaterotate
Sideside
Tracetrace
Wipewipe

Filters

They are great bits of codes that bring indepth and a bit more hue to your web sites. They defuse the obvious and creates a cinematic illusion. The filters are written in this form .ftr-<filter-name>-<intensity>. The following are a list of filters. The intensity starts from 10 and ends at 500 with a step size of 10

Filter NameClass Name
Brightnessbrightness
Contrastconstrast
Sepiasepia
Invertinvert
Saturatesaturate
Opacityopacity
Hue Ratehue-rate

K - Special tint this class is used to add a color tone or tint to a given element .i.e an image.

   <div class="tint">
      <img src="<img_url>" style="background-color:red;">
   </div>

Gradient

Color gradients give indepth and different perspectives of emphasis to web pages. Here are a list of the various color gradients in krymoh. For gradients, they are written as grad-<gradient-type>

Gradient NameClass NameType
Blue Sealblue-sealLinear
Green Corelgreen-corelLinear
Saucy Redsaucy-redLinear
Gold Coalgold-coalLinear
BlackishblackishLinear

Transition

The transition classes create a seamless movement between objects or elements. It comes in different types and forms with some custom types. A typical transition takes this form .trns-<transition-funtion>-<time>.

Transition NameClass Name
Linearlinear
Easeease
Ease Inease-in
Ease Outease-out
Ease In Outease-in-out
Out Backout-back
Out Sineout-sine
Quadquad
Cubiccubic

Custom Transitions

Transition NameClass Name
Forceforce
Warm Upwarm-up
Palpitatepalpitate

Translation

This component determines how a given element on a web page should be oriented. There are four (4) sub components.

  • Scale
  • Skew
  • Rotate
  • Translate
Translation NameClass NameCondition
Scalesc-ml<num>-mg<num> or sc-<num>where 1 <= num <= 5
Skewsk-<r or l>-<num>where 10 <= num <= 360
Rotaterte-<rad or grad or deg>-<num>where 10 <= num <= 360
Translatetrnl-<num>-<num>where 10 <= num <= 360

ml represents multiplier and mg magnitude

Miscellaneous

These are miscellaneous properties that can be applied to most of the components listed above.

PropertyDescriptionType
foreverInfinite iteration for animationsclass
-hvrPerform translation or transition on :hoverpostfix

Contributing

Any form of support & contributions to this framework is warmly welcome.

Written in Accra with ❤️

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100