This presentation about framework css halfmoon is the best framework for css.

1. Halfmoon Framework
2021 - 2022
Supervised By:
Mr. Hoshang Qasim
Prepared By:
1. Khayam Sherzad
2. Salm Ibrahim

2. Topics
 What is the Halfmoon?
 How to install
• Download file
• Using Halfmoon CDN
 Dark Mode
 Customize and Container
 Content and Cards
 Grid System
 Navbar
 Sidebar

3. What is Halfmoon ?
Halfmoon is a responsive front-end framework
with a lot of useful and interesting qualities to
help you build websites. It comes with a built-in
dark mode, which is one of its most important
and defining features.
5/23/2022 3

4. How to install
1. Download Halfmoon Folder
5/23/2022 4

5. 5/23/2022 5
From the CSS and JS folders in this folder copy the respective CSS and js file with the “.min”
extension and add it to your projects folder.

6. After that call, the CSS and JS file in your HTML page by referencing their path in the head
section of the HTML file and you should be able to use the CSS library just as you would use
bootstrap.
5/23/2022 6

7. 5/23/2022 7
How to install
2. Using Halfmoon CDN: The second most common and preferred
method to add any CSS framework is to use a CDN(Content Delivery
Network) link in the head tag of the HTML file.

8. Dark Mode
5/23/2022 8

9. Dark Mode
in order to toggle between dark mode simply call the
“halfmoon.toggleDarkMode()” function on a button click event as shown
in the snippet below
5/23/2022 9

10. Customize
Halfmoon is built entirely using CSS variables (also known as CSS custom properties).
There are close to 1,500 CSS variables, which means that almost everything can be
customized by overriding a property, making it very easy to theme Halfmoon to fit your
brand.
5/23/2022 10

11. Container
Containers will be automatically centered horizontally when they do not take
up the full width of the parent.
5/23/2022 11

12. Content and Cards
Content containers (.content) and cards (.card) are the main tools for framing
content in the main section of the page.
.content: class can be used to provide a nice margin around whatever is placed inside.
5/23/2022 12

13. Card
.card: can be used to create boxes
with margin, padding, and a border.
By default, they take up the full
width of their parent containers.
However, this can be changed easily
by using utility classes to change
the parent container's width.
5/23/2022 13

14. Grid System
The grid system in Halfmoon is a flexbox based, 12-column system, that can
be used to quickly (and easily) build websites and pages which look good on
all screen sizes.
5/23/2022 14

15. How it works (Grid System)
5/23/2022 15

16. How it works (Grid System)
5/23/2022 16

17. Navbars
Navbars are flexbox based
navigation headers which
can be used to display
branding, navigation links,
buttons, forms, and also
regular text.
5/23/2022 17

18. Sidebar
Sidebars are vertical
navigation menus fixed to
the left. They can be used
to display branding,
navigation links, buttons,
forms, and any other
content, making them a
vital component for most
dashboards and other
product pages.
5/23/2022 18

19. THANK YOU
5/23/2022 19

20. Question ?
5/23/2022 20