1.1.0 • Published 3 years ago
hypercss v1.1.0
⚡ HyperCSS ⚡
🔺 Changelogs
- Added more Flex-management classes.
- Added more Padding and Margin classes.
- Added text coloring classes.
- Added a footer class.
- Updated the main coloring.
📜 License
GPL-3.0
❓ Responsiveness
HyperCSS is compatible with phones, tablets and computers!
🚀 Get started!
First, you need to import the CSS file into your website head :
<link rel="stylesheet" src="https://n0ct3ri4.github.io/hcss.css" />
Then, read the docs!
📜 The Docs.
Flex
.flex
: Flex-based display..f-01 - f-3
: Change the flex value..f-01
.f-02
.f-03
.f-04
.f-05
.f-06
.f-07
.f-08
.f-09
.f-1
.f-2
.f-3
.fd-row
: Change the Flex direction torow
..fd-col
: Change the Flex direction tocolumn
..jcon-center
: Justify content to the center..jcon-fs
: Justify content to the Flex-Start..jcon-fe
: Justify content to the Flex-End..aite-center
: Align items to the center..aite-fs
: Align items to the Flex-Start..aite-fe
: Align items to the Flex-End.
Margin
m-0
: Set the margin to0
.m-1
tom-5
: Set the margin to(1-5)em
.mt-1
tomt-5
: Set the top margin to(1-5)em
.mb-1
tomb-5
: Set the bottom margin to(1-5)em
.ml-1
toml-5
: Set the left margin to(1-5)em
.mr-1
tomr-5
: Set the right margin to(1-5)em
.
Padding
p-0
: Set the padding to0
.p-1
top-5
: Set the padding to(1-5)em
.pt-1
topt-5
: Set the top padding to(1-5)em
.pb-1
topb-5
: Set the bottom padding to(1-5)em
.pl-1
topl-5
: Set the left padding to(1-5)em
.pr-1
topr-5
: Set the right padding to(1-5)em
.
Headers & Footers
.header
: Flex-based header..header.shadow
: Header shadow..header.large
: Large header..header.medium
: Medium header..header.small
: Small header..header.tiny
: Tiny header.
.footer
: Flex-based footer..footer.shadow
: Footer shadow..footer.large
: Large footer..footer.medium
: Medium footer..footer.small
: Small footer..footer.tiny
: Tiny footer.
Text alignments
tcenter
: Align the text to the center.tleft
: Align the text to the center.tright
: Align the text to the center.
Text colors
green
: Set the font color to green.blue
: Set the font color to blue.red
: Set the font color to red.grey
: Set the font color to grey.dark
: Set the font color to dark.dark-bis
: Set the font color to dark-bis.dark-ter
: Set the font color to dark-ter.
Backgrounds
bg-green
: Set the background to green.bg-blue
: Set the background to blue.bg-red
: Set the background to red.bg-grey
: Set the background to grey.bg-dark
: Set the background to dark.bg-dark-bis
: Set the background to a lighter dark.bg-dark-ter
: Set the background to a more lighter dark.
Navbar
.navbar
: Flex-based navigation bar..brand
: Website brand name..item
: Navigation item..item.end
: First item to align on the right side.a
: Link element.
Columns
.rows
: Flex-based rows container..row
: Flex-based columns container..col
: Column item.
Containers
.container
: Items container..container.shadow
: Container shadow.
1.1.0
3 years ago