⚡ 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 to row.
• .fd-col : Change the Flex direction to column.
• .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 to 0.
• m-1 to m-5 : Set the margin to (1-5)em.
  • mt-1 to mt-5 : Set the top margin to (1-5)em.
  • mb-1 to mb-5 : Set the bottom margin to (1-5)em.
  • ml-1 to ml-5 : Set the left margin to (1-5)em.
  • mr-1 to mr-5 : Set the right margin to (1-5)em.

Padding

• p-0 : Set the padding to 0.
• p-1 to p-5 : Set the padding to (1-5)em.
  • pt-1 to pt-5 : Set the top padding to (1-5)em.
  • pb-1 to pb-5 : Set the bottom padding to (1-5)em.
  • pl-1 to pl-5 : Set the left padding to (1-5)em.
  • pr-1 to pr-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.