Documentation

Introduction
Atom allows you to design and build smooth web apps by dividing the whole UI into atom sized customisable components and classes. Use atom as the building block of your Project.
Quick Installation
In order to introduce Atom to your project, Copy the Link given below and paste it in the tag of your html, above all other style sheets.
Copy Stylesheet
Copy Javascript
Happy Building :)
Color Pallete and Color Utilities
main-black
main-white
success
danger
warning
info
primary
secondary
gray-50
gray-3100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
light-blue-50
light-blue-100
light-blue-200
light-blue-300
light-blue-400
light-blue-500
light-blue-600
light-blue-700
light-blue-800
dark-blue-50
dark-blue-100
dark-blue-200
dark-blue-300
dark-blue-400
dark-blue-500
dark-blue-600
dark-blue-700
dark-blue-800
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
violet-50
violet-100
violet-200
violet-300
violet-400
violet-500
violet-600
violet-700
violet-800
pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
Other Class Utilities

          
          font-mono 
          font-roboto 
          font-sans 

          
          txt-bold
          
          line-through

          
          txt-s 
          txt-m 
          txt-l 
          txt-xl 
          txt-2xl 
          txt-3xl 
          txt-4xl 

           
          block
          none

          
          absolute
          relative
          fixed
          sticky

          
          p-0 
          p-1 
          p-2 
          p-3 
          p-4 
          p-5 
          p-6 
          p-7 
          p-8 

          
          m-0 
          m-1 
          m-2 
          m-3 
          m-4 
          m-5 
          m-6 
          m-7 
          m-8 

          
          b-0 
          b-1 
          b-2 
          b-3 
          b-4 
          b-5 


          border-solid
          border-dotted

          
          rounded-none
          rounded-s 
          rounded 
          rounded-m 
          rounded-l 
          rounded-xl 
          rounded-2xl 
          rounded-full 


           
          flex

          justify-center
          justify-start
          justify-end

          align-center
          align-start
          align-end

          flex-row
          flex-row-reverse
          flex-col
          flex-col-reverse

          wrap

          pointer

          width-half
          width-full