https://github.com/sno2/easycss
https://github.com/sno2/easycss
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sno2/easycss
- Owner: sno2
- Created: 2020-10-13T12:08:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-10-13T12:08:32.000Z (almost 6 years ago)
- Last Synced: 2025-02-05T03:28:22.661Z (over 1 year ago)
- Language: SCSS
- Size: 80.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
tan taram tarammam bam taram traram
Welcome To easyCSS 2.0
adding many new cool things! just go look!
# How To Start
First you need to link it to you're page and you're done.
```html
```
# The New Class Names
# Hover Effects
```html
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
example
example
example
example
```
# header
```html
```
# bShow
```html
bShow
Lorem ipsum dolor sit amet consectetur7 adipisicing elit. Quaerat ex debitis aut at culpa a odit magni consequatur, autem, dolore, cupiditate perspiciatis vitae ratione pariatur accusamus in amet ut aperiam.
Get Started
```
# border
.b-x1
.b-x2
.b-x3
.b-x4
.b-x5
.b-x6
.b-x7
.b-x8
.b-x9
.b-xXL
# border-left
.b-l-x1
.b-l-x2
.b-l-x3
.b-l-x4
.b-l-x5
.b-l-x6
.b-l-x7
.b-l-x8
.b-l-x9
.b-l-xXL
# border-right
.b-r-x1
.b-r-x2
.b-r-x3
.b-r-x4
.b-r-x5
.b-r-x6
.b-r-x7
.b-r-x8
.b-r-x9
.b-r-xXL
# border-top
.b-t-x1
.b-t-x2
.b-t-x3
.b-t-x4
.b-t-x5
.b-t-x6
.b-t-x7
.b-t-x8
.b-t-x9
.b-t-xXL
# border-bottom
.b-b-x1
.b-b-x2
.b-b-x3
.b-b-x4
.b-b-x5
.b-b-x6
.b-b-x7
.b-b-x8
.b-b-x9
.b-b-xXL
# tags
```html
blablabla
blablabla
blablabla
blablabla
blablabla
```
# blockquote
```html
I'm a blockquote
```
# breadcrumb
```html
```
# Shadow System
- Sh-0
- Sh-1
- Sh-1-half
- Sh-2
- Sh-3
- Sh-4
- Sh-5
# New Backgrounds
- bg-dark
- bg-light
# Cards
```html
Card Title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem facilis aperiam, illum harum reprehenderit nemo, in maiores voluptates totam nulla id blanditiis possimus quos ratione necessitatibus quaerat odio quia obcaecati.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia eos soluta animi dolor nostrum, iusto fuga culpa odit illo quam asperiores nam. Atque magni cum asperiores, harum natus impedit nostrum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum dolorem aspernatur laborum doloremque accusamus labore, obcaecati similique repudiandae! Quos excepturi corrupti, explicabo culpa nobis ab! Cupiditate doloribus autem rem quasi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam quas veniam eligendi commodi possimus repellat tempore, optio vero odio corporis quae consequatur dolores hic maxime porro ducimus delectus error magni!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam quas veniam eligendi commodi possimus repellat tempore, optio vero odio corporis quae consequatur dolores hic maxime porro ducimus delectus error magni!
```
# Some normal stuff
.auto
.hide
# Some New Text stuff
.c-light
.c-dark
.c-secondary
.grey-text
.white-text
.light
.thin
.auto
# Other
.circle
.center-block
.btn-large
.btn-small
.c1
# Radio Buttons
```html
Green
Yellow
Green
disabled
```
# Input Range
```html
```
# Images
.img-lg
.img-md
.img-sm
.img-circle
.img-half-circle
.img-flat
# Width
.width-hs
.width-fs
.width-sm
# Border Radius
.b-15
.b-20
.b-23
.b-25
.b-30
.b-35
.b-circle
.b-h-circle
# Font Weight
.bold
.bolder
# Font Style
.ob
.italic
# Lists
Wait where are the lists!
Ohh yea if you want the lists you need to go to the file called list.md thanks.
# The other class names
# The Sizes
x1 = 1rem
x2 = 2rem
x3 = 3rem
x4 = 4rem
x5 = 5rem
x6 = 6rem
x7 = 7rem
x8 = 8rem
x9 = 9rem
xXL = 10rem
# Padding
p-x1 = padding 1rem
p-x2 = padding 2rem
p-x3 = padding 3rem
p-x4 = padding 4rem
p-x5= padding 5rem
p-x6 = padding 6rem
p-x7 = padding 7rem
p-x8 = padding 8rem
p-x9 = padding 9rem
p-xXL = padding 10rem
# Padding right
p-r-x1 = 1rem
p-r-x2 = 2rem
p-r-x3 = 3rem
p-r-x4 = 4rem
p-r-x5 = 5rem
p-r-x6 = 6rem
p-r-x7 = 7rem
p-r-x8 = 8rem
p-r-x9 = 9rem
p-r-xXL = 10rem
# Padding left
p-l-x1 = 1rem
p-l-x2 = 2rem
p-l-x3 = 3rem
p-l-x4 = 4rem
p-l-x5 = 5rem
p-l-x6 = 6rem
p-l-x7 = 7rem
p-l-x8 = 8rem
p-l-x9 = 9rem
p-l-xXL = 10rem
# Padding top
p-t-x1 = 1rem
p-t-x2 = 2rem
p-t-x3 = 3rem
p-t-x4 = 4rem
p-t-x5 = 5rem
p-t-x6 = 6rem
p-t-x7 = 7rem
p-t-x8 = 8rem
p-t-x9 = 9rem
p-t-xXL = 10rem
# Padding bottom
p-b-x1 = 1rem
p-b-x2 = 2rem
p-b-x3 = 3rem
p-b-x4 = 4rem
p-b-x5 = 5rem
p-b-x6 = 6rem
p-b-x7 = 7rem
p-b-x8 = 8rem
p-b-x9 = 9rem
p-b-xXL = 10rem
# Margin
m-x1 = 1rem
m-x2 = 2rem
m-x3 = 3rem
m-x4 = 4rem
m-x5 = 5rem
m-x6 = 6rem
m-x7 = 7rem
m-x8 = 8rem
m-x9 = 9rem
m-xXL = 10rem
# Margin left
m-l-x1 = 1rem
m-l-x2 = 2rem
m-l-x3 = 3rem
m-l-x4 = 4rem
m-l-x5 = 5rem
m-l-x6 = 6rem
m-l-x7 = 7rem
m-l-x8 = 8rem
m-l-x9 = 9rem
m-l-xXL = 10rem
# Margin right
m-r-x1 = 1rem
m-r-x2 = 2rem
m-r-x3 = 3rem
m-r-x4 = 4rem
m-r-x5 = 5rem
m-r-x6 = 6rem
m-r-x7 = 7rem
m-r-x8 = 8rem
m-r-x9 = 9rem
m-r-xXL = 10rem
# Margin top
m-t-x1 = 1rem
m-t-x2 = 2rem
m-t-x3 = 3rem
m-t-x4 = 4rem
m-t-x5 = 5rem
m-t-x6 = 6rem
m-t-x7 = 7rem
m-t-x8 = 8rem
m-t-x9 = 9rem
m-t-xXL = 10rem
# Margin bottom
m-b-x1 = 1rem
m-b-x2 = 2rem
m-b-x3 = 3rem
m-b-x4 = 4rem
m-b-x5 = 5rem
m-b-x6 = 6rem
m-b-x7 = 7rem
m-b-x8 = 8rem
m-b-x9 = 9rem
m-b-xXL = 10rem
# text-aligns
center
right
left
justify
inherit
# Header's
.header
# Nav links
.nav-link
# Showcase's
.showcase
# Blocks
.block
# About stuff
#main-block
#sidebar
# backgrounds
bg-primary
bg-green
bg-red
bg-blue
bg-yellow
# color's
c-primary
c-green
c-red
c-blue
c-yellow
# Footer
.footer
# Text Stuff
upper = uppercase
lower = lowercase
caps = caps
# Fonts
f-arial = arial
f-ht = Helvetica
f-ms = monospace
f-vd = verdana
f-fa = fantasy
f-cs = cursive
f-cn = courier new
f-roboto = roboto
f-su = segoe UI
# How To Make Contact stuff
```html
form
```
# Links
a-primary = This class is only allowed on the a tag-->
```html
this is a link
```
a-green = This class is only allowed on the a tag-->
```html
this is a link
```
a-red = This class is only allowed on the a tag-->
```html
this is a link
```
a-blue = This class is only allowed on the a tag-->
```html
this is a link
```
a-yellow = This class is only allowed on the a tag-->
```html
this is a link
```
# Buttons
btn-primary = This class is only allowed on the button tag-->
```html
this is a button
```
btn-red = This class is only allowed on the button tag-->
```html
this is a button
```
btn-green = This class is only allowed on the button tag-->
```html
this is a button
```
btn-yellow = This class is only allowed on the button tag-->
```html
this is a button
```
btn-blue = This class is only allowed on the button tag-->
```html
this is a button
```
# Table's
.table
.table-center
```html
```
```html
```
.head
```html
Name
Age
Country
```
.data
```html
Name
Age
Country
Dani
23
Albania
Dani
23
Albania
```
whe forgot something... checkbox
# checkbox's
```html
Default
Checked
```