From 2584f72d0647070bbde2f69bda6f9ef23750c7ca Mon Sep 17 00:00:00 2001 From: kotesh_Mudila Date: Tue, 12 Apr 2022 17:05:38 +0530 Subject: [PATCH 1/2] DOCS: updated ReadME --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 30d135c..5de456c 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Handy UI is a useful component library, helps you by reducing your efforts of de ``` -Or paste the below given import statement at the first place of your CSS file. +Or paste the below given import statement at the first place of your CSS file and use it right away. ``` css @import url("https://handy-ui.netlify.app/css/components.css"); ``` From eb2ebbf60670a1500a2218811775e3447a7be507 Mon Sep 17 00:00:00 2001 From: kotesh-arya Date: Fri, 25 Nov 2022 13:18:06 +0530 Subject: [PATCH 2/2] UPDATE: Twitter profile link --- Components/Alert/alert.html | 285 ++++++---- Components/Avatar/avatar.html | 348 ++++++++----- Components/Badge/badge.html | 329 +++++++----- Components/Button/button.html | 434 +++++++++------- Components/Card/card.html | 713 ++++++++++++++------------ Components/Grid/grid.html | 352 ++++++++----- Components/Image/image.html | 269 ++++++---- Components/Input/input.html | 384 ++++++++------ Components/Navigation/navigation.html | 242 +++++---- Components/Slider/slider.html | 214 +++++--- Get-Started/colors.html | 205 +++++--- Get-Started/introduction.html | 223 +++++--- Get-Started/typography.html | 367 +++++++------ index.html | 80 +-- 14 files changed, 2710 insertions(+), 1735 deletions(-) diff --git a/Components/Alert/alert.html b/Components/Alert/alert.html index 765a653..b97b622 100644 --- a/Components/Alert/alert.html +++ b/Components/Alert/alert.html @@ -1,118 +1,193 @@ - - - - - - - - - - - - + + + + + + + + + + HandyUI : Alert + - - - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Alert
+
+ An alert displays a short, important message in a way that attracts + the user's attention without interrupting the user's task.
-
-
- Alert +
+
+
Simple Alert
+
+ Simple Alerts can be created using + alert class, followed by the + variant name. +
+
+
+ Primary-This is a Primary Alert!
-
- An alert displays a short, important message in a way that attracts the user's attention without - interrupting the user's task. +
Error-This is an Error Alert!
+
+ Success-This is a Success Alert!
-
-
-
- Simple Alert -
-
- Simple Alerts can be created using alert class, followed by the variant name. -
-
-
Primary-This is a Primary Alert!
-
Error-This is an Error Alert!
-
Success-This is a Success Alert!
-
Warning-This is a Warning Alert!
-
-
- -
-
-
-
- Outline Alert -
-
- Outline alerts are created by using a combination of alert class, followed by variant-outline. -
-
-
Primary-This is a Primary Alert!
-
Error-This is an Error Alert!
-
Success-This is a Success Alert!
-
Warning-This is a Warning Alert!
- -
-
- -
-
-
- < Avatar - Badge > +
+ Warning-This is a Warning Alert!
-
+
+
+ +
+ +
+
Outline Alert
+
+ Outline alerts are created by using a combination of + alert class, followed by + variant-outline. +
+
+
+ Primary-This is a Primary Alert! +
+
Error-This is an Error Alert!
+
+ Success-This is a Success Alert! +
+
+ Warning-This is a Warning Alert! +
+
+
+ +
+
+
+ + < Avatar + + Badge > + +
+
- - - \ No newline at end of file + + diff --git a/Components/Avatar/avatar.html b/Components/Avatar/avatar.html index d0771d5..2ce9942 100644 --- a/Components/Avatar/avatar.html +++ b/Components/Avatar/avatar.html @@ -1,142 +1,226 @@ + + + + + + + + + + + - - - - - - - - - - - + HandyUI : Avatar + - - HandyUI : Avatar - - - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Avatar
+
+ Avatars are user profile pictures, usually found in circular shapes. + Avatars can be used for 'container' objects — projects, spaces, + repositories, etcetera — to give them a recognisable visual identity.
-
-
- Avatar -
-
- Avatars are user profile pictures, usually found in circular shapes. Avatars can be used for 'container' - objects — projects, spaces, repositories, etcetera — to give them a recognisable visual identity. -
-
- -
-
- Profile Avatar -
-
- Profile Avatars can be created using the class avatar, inside the img tag. -
-
- avatar-1 - avatar-2 - avatar-3 -
-
- -
+
-
-
-
- Avatars with Sizes -
-
- Size of the avatars can be changed by adding avatar-sm | avatar-md | - avatar-lg class to the existing avatar class. -
-
- avatar-1 - avatar-2 - avatar-3 -
-
- -
- -
-
-
- Square shaped Avatar -
-
- Adding a class square to existing class, will generate a square shaped avatar. -
- Note : Square class wouldn't work if you provide an SVG type of img. -
-
- avatar-1 - avatar-2 - avatar-3 -
-
- -
- -
-
- - < Get Started Alert > - -
-
+
+
Profile Avatar
+
+ Profile Avatars can be created using the class + avatar, inside the img tag. +
+
+ avatar-1 + avatar-2 + avatar-3 +
+
+ +
+
+
+
Avatars with Sizes
+
+ Size of the avatars can be changed by adding + avatar-sm | + avatar-md | + avatar-lg class to the existing + avatar class. +
+
+ avatar-1 + avatar-2 + avatar-3 +
+
+ +
+
+
+
Square shaped Avatar
+
+ Adding a class square to + existing class, will generate a square shaped avatar. +
+ Note : Square class wouldn't work if you provide an SVG type of + img. +
+
+ avatar-1 + avatar-2 + avatar-3 +
+
+ +
+
+
+ + < Get Started + + Alert > + +
+
- - - \ No newline at end of file + + diff --git a/Components/Badge/badge.html b/Components/Badge/badge.html index 7fc76b7..51cb295 100644 --- a/Components/Badge/badge.html +++ b/Components/Badge/badge.html @@ -1,137 +1,220 @@ - - - - - - - - - - - - - + + + + + + + + + + + HandyUI : Badge - + - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Badge
+
+ Badges are small circles, positioned either at top-right or + bottom-right of the parent component. Badge can be used to display + numbers, online / offline status, depending on where they are used.
-
-
- Badge +
+
+
Profile Badge
+
+ Profile Badge is used to show the current status of a user.
To + get these styles badges use a class of + badge for the parent container + and badge-avatar class for the + image element followed by child with variant classes mentioned + below:
+ It can be used with 3 variants : + online | offline | Busy +
+
+
+ avatar-1 +
-
- Badges are small circles, positioned either at top-right or bottom-right of the parent component. Badge - can be used to display numbers, online / offline status, depending on where they are used. +
+ avatar-1 +
+
+
+ avatar-1 +
+
+
+
+ +
+
+
+
+
Number Badge
+
+ Number Badge is used to show the no. of items present in the parent + component.
+ you can get the number badge by adding class + badge-icon
+ For single digit number, use + number-one & for dual digit + number-two class. +
+
+
+ bell-icon +
3
-
-
-
- Profile Badge -
-
- Profile Badge is used to show the current status of a user.
To get these styles badges use a class of badge for the parent container and badge-avatar class for the image element followed by child with variant classes mentioned below:
- It can be used with 3 variants : online | offline | Busy -
-
-
- avatar-1 -
-
-
- avatar-1 -
-
-
- avatar-1 -
-
- -
-
- -
-
-
-
-
- Number Badge -
-
- Number Badge is used to show the no. of items present in the parent component.
- you can get the number badge by adding class badge-icon
- For single digit number, use number-one & for dual digit number-two class. - -
-
-
- bell-icon -
3
-
-
- cart-icon -
21
-
-
-
- -
-
-
- - < Alert Button > - +
+ cart-icon +
21
-
+
+
+ +
+ +
+ + < Alert + + Button > + +
+
- - - \ No newline at end of file + + diff --git a/Components/Button/button.html b/Components/Button/button.html index cce8be9..a10d2fc 100644 --- a/Components/Button/button.html +++ b/Components/Button/button.html @@ -1,206 +1,264 @@ + + + + + + + + + + + - - - - - - - - - - - + - + HandyUI : Button + - HandyUI : Button - - - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Button
+
+ Buttons are the soul of an interactive Web Application. Buttons allow + users to take actions, and make choices, with a single tap.
-
-
- Button -
-
- Buttons are the soul of an interactive Web Application. Buttons allow users to take actions, and make - choices, with a single tap. -
-
-
-
- Primary Button -
-
- Primary buttons are high-emphasis, distinguished by their use of elevation and fill. They contain - actions that are primary to your app.
To use these buttons use a class combination of btn & btn-variant -
-
- - - - - - - +
+
+
Primary Button
+
+ Primary buttons are high-emphasis, distinguished by their use of + elevation and fill. They contain actions that are primary to your + app.
+ To use these buttons use a class combination of + btn & + btn-variant +
+
+ - -
-
- -
-
+ -
-
- Outline Button -
-
- If you want a button without a background at all. Then replace - btn-variant with outline-variant. + + -
-
- + +
+
+ +
+
- +
+
Outline Button
+
+ If you want a button without a background at all. Then replace + btn-variant with + outline-variant. +
+
+ - + - -
-
- -
-
-
-
- Link Button -
-
- To equip link functionality to a buton, use btn-link class. + -
-
- -
-
- -
-
-
-
- Icon Button -
-
- Icon Buttons can be created, by using image as a child to parent button. Use the btn - class followed by btn-icon. - - -
-
- -
-
- -
-
-
-
- Floating Action Button -
-
- Icon Buttons can be created, by using icon as a child to parent button. Use the btn - class followed by btn-floating. - - -
-
- - - -
-
- -
-
-
- - < Badge Card > - -
-
+ +
+
+ +
+ +
+
Link Button
+
+ To equip link functionality to a buton, use + btn-link class. +
+
+ +
+
+ +
+
+
+
Icon Button
+
+ Icon Buttons can be created, by using image as a child to parent + button. Use the btn class + followed by btn-icon. +
+
+ +
+
+ +
+
+
+
Floating Action Button
+
+ Icon Buttons can be created, by using icon as a child to parent + button. Use the btn class + followed by btn-floating. +
+
+ + + +
+
+ +
+
+
+ + < Badge + + Card > + +
+
- - - \ No newline at end of file + + diff --git a/Components/Card/card.html b/Components/Card/card.html index f5682e5..11f9e02 100644 --- a/Components/Card/card.html +++ b/Components/Card/card.html @@ -1,331 +1,410 @@ + + + + + + + + + + + - - - - - - - - - - - + HandyUI : Card + - - HandyUI : Card - - - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Card
+
+ Cards are surfaces that display content and actions on a single topic. +
+ They should be easy to scan for relevant and actionable information. + Elements, like text and images, should be placed on them in a way that + clearly indicates hierarchy.
-
-
- Card -
-
- Cards are surfaces that display content and actions on a single topic. -
- They should be easy to scan for relevant and actionable information. Elements, like text and images, - should be placed on them in a way that clearly indicates hierarchy. +
+
+
Text only Card
+
+ Simple Card is the one that contains a title, a descriptive text. To + use the Card Component, + card-title, and + card-content inside a div with + class card. +
+
+
+
Iron Man
+
+ Tony Stark is charismatic and eccentric, he is also very proud, + but also very altruist and heroic. He did not have a good + childhood, and this affects how he acts. Stark is very smart, + and a very talented inventor. +
+
-
-
-
- Text only Card -
-
- Simple Card is the one that contains a title, a descriptive text. To use the Card Component, - card-title, and card-content - inside a div with class card. -
-
-
-
- Iron Man -
-
- Tony Stark is charismatic and eccentric, he is also very proud, but also very altruist - and heroic. He did not have a good childhood, and this affects how he acts. Stark is - very smart, and a very talented inventor. -
- -
-
-
- -
-
-
-
-
- Horizontal Card -
-
- Image Card is one of the Horizontal card contains an Image, Title & Text. To use the Card Component, -
put - card-image, card-title and - card-content, inside the div with - classes card and horizontal-card. -
-
-
- -
-
- Tony Stark -
+
+
+ +
+
+
+
+
Horizontal Card
+
+ Image Card is one of the Horizontal card contains an Image, Title & + Text. To use the Card Component, +
+ put card-image, + card-title and + card-content, inside the div + with classes card and + horizontal-card. +
+
+
+ +
+
Tony Stark
- Tony Stark is charismatic and eccentric, he is also very proud, but also very altruist - and heroic.
He did not have a good childhood, and this affects how he acts. Stark is - very smart, and a very talented inventor. + Tony Stark is charismatic and eccentric, he is also very proud, + but also very altruist and heroic.
+ He did not have a good childhood, and this affects how he acts. + Stark is very smart, and a very talented inventor. - -
-
-
-
- -
-
-
-
-
- Vertical Card -
-
- Social Media Card is one of the vertical card that contains an Avatar, Profile Name, Image, and - Description. To use the Card Component,
put avatar and - avatar-sm - classes for the profile image and - card-title, image and card-content inside the div with - classes card and vertical-card. -
-
-
-
- avatar-1 -
Jack Snyder
-
-
- -
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sequi, - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque accusamus illo qui - iure nihil illo, commodi quisquam a, non dolor laborum consectetur! -
- -
-
-
- -
-
-
-
-
- Card with badge -
-
- E-Commerce Card is one of the card with badge, used to display the products details i.e., Product - shot, Name, Type, Fixed badge, - Price, Discount and stock. To use this card enter both classes card - and badge-card.
-
-
-
-
- NEW -
- -
- -
Timex
-
- Leather watch series -
-
- Rs.490 Rs.1299 (62% OFF) -
- -
-
-
- -
-
-
-
-
- Card with Shadow -
-
- To use this card enter both classes card - and shadow-card. -
-
-
- -
- Tony Stark -
-
- Tony Stark is charismatic and eccentric, he is also very proud, but also very altruist - and heroic. He did not have a good childhood, and this affects how he acts. Stark is - very smart, and a very talented inventor. -
- -
-
-
- -
-
-
-
-
- Card with Text overlay -
-
- To use this card enter both classes card - and text-overlay-card. -
-
-
- + +
+
+
+
+ +
+
+
+
+
Vertical Card
+
+ Social Media Card is one of the vertical card that contains an + Avatar, Profile Name, Image, and Description. To use the Card + Component,
+ put avatar and + avatar-sm + classes for the profile image and + card-title, + image and + card-content inside the div with + classes card and + vertical-card. +
+
+
+
+ avatar-1 +
Jack Snyder
+
+
+ +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Non + sequi, Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Doloremque accusamus illo qui iure nihil illo, commodi quisquam + a, non dolor laborum consectetur! +
+ +
+
+
+ +
+
+
+
+
Card with badge
+
+ E-Commerce Card is one of the card with badge, used to display the + products details i.e., Product shot, Name, Type, Fixed badge, Price, + Discount and stock. To use this card enter both classes + card and + badge-card. +
+
+
+
+
NEW
+ +
+ +
Timex
+
Leather watch series
+
+ Rs.490 Rs.1299 (62% OFF) +
+ +
+
+
+ +
+
+
+
+
Card with Shadow
+
+ To use this card enter both classes + card and + shadow-card. +
+
+
+ +
Tony Stark
+
+ Tony Stark is charismatic and eccentric, he is also very proud, + but also very altruist and heroic. He did not have a good + childhood, and this affects how he acts. Stark is very smart, + and a very talented inventor. +
+ +
+
+
+ +
+
+
+
+
Card with Text overlay
+
+ To use this card enter both classes + card and + text-overlay-card. +
+
+
+ -
- Tony Stark -
-
- Tony Stark is charismatic and eccentric, he is also very proud, but also very altruist - and heroic. He did not have a good childhood, and this affects how he acts. Stark is - very smart, and a very talented inventor. -
-
-
-
- -
-
-
-
-
- Card with Dismiss -
-
- To use this card enter both classes card - and dismiss-card. -
-
-
-
- - -
-
- Tony Stark -
-
- Tony Stark is charismatic and eccentric, he is also very proud, but also very altruist - and heroic. He did not have a good childhood, and this affects how he acts. Stark is - very smart, and a very talented inventor. -
-
-
-
- -
-
-
- - < Button Image > - +
Tony Stark
+
+ Tony Stark is charismatic and eccentric, he is also very proud, + but also very altruist and heroic. He did not have a good + childhood, and this affects how he acts. Stark is very smart, + and a very talented inventor. +
-
+
+
+ +
+ +
+
+
Card with Dismiss
+
+ To use this card enter both classes + card and + dismiss-card. +
+
+
+
+ + +
+
Tony Stark
+
+ Tony Stark is charismatic and eccentric, he is also very proud, + but also very altruist and heroic. He did not have a good + childhood, and this affects how he acts. Stark is very smart, + and a very talented inventor. +
+
+
+
+ +
+
+
+ + < Button + + Image > + +
+
- - - \ No newline at end of file + + diff --git a/Components/Grid/grid.html b/Components/Grid/grid.html index a1422a4..77c4b98 100644 --- a/Components/Grid/grid.html +++ b/Components/Grid/grid.html @@ -1,129 +1,245 @@ + + + + + + + + + + + - - - - - - - - - - - + HandyUI : Grids + - HandyUI : Grids - - - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Grids
+
+ Grids are helpful in developing two dimensional layouts, which are + flexible by using a simple markup.
-
-
- Grids +
+
+
2 X 2 Grid
+
+ To get this type of grid layout use a class of + grid-couple for the parent + container and grid-item class + for each child items. +
+
+
+ item-1 + item-2 + item-3 + item-4
-
- Grids are helpful in developing two dimensional layouts, which are flexible by using a simple markup. +
+
+ +
+
+
+
+
3 X 3 Grid
+
+ To get this type of grid layout use a class of + grid-triple for the parent + container and grid-item class + for each child items. +
+
+
+ item-1 + item-2 + item-3 + item-4 + item-5 + item-6 + item-7 + item-8 + item-9
-
-
-
- 2 X 2 Grid -
-
- To get this type of grid layout use a class of grid-couple for - the parent container and grid-item class for each child items. -
-
-
- item-1 - item-2 - item-3 - item-4 -
-
-
- -
-
-
-
-
- 3 X 3 Grid -
-
- To get this type of grid layout use a class of grid-triple for - the parent container and grid-item class for each child items. -
-
-
- item-1 - item-2 - item-3 - item-4 - item-5 - item-6 - item-7 - item-8 - item-9 -
-
-
- -
-
-
- - < Slider - Navigation > - -
-
+
+
+ +
+ +
+ + < Slider + + Navigation > + +
+
- - - \ No newline at end of file + + diff --git a/Components/Image/image.html b/Components/Image/image.html index 200de2a..bfbd8ea 100644 --- a/Components/Image/image.html +++ b/Components/Image/image.html @@ -1,114 +1,173 @@ + + + + + + + + + + + - - - - - - - - - - - + HandyUI : Image + - - HandyUI : Image - - - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Image
+
+
+
Responsive Image
+
+ Responsive Image Components are used to display Images on websites, + which are screen responsive. They expand upto the width of the + container they are in. To use this image component, name the class + as responsive-image for your + image element. +
+
+ +
+
+ +
+
+
+
+
Rounded Image
+
+ Round Images are the circular, which can be used for representation + of profiles in a higher dimensions. To use this component, mention a + class as rounded-image for + your image. +
+
+ +
+
+ +
+
+
+ + < Card + + Input > +
-
-
- Image -
-
-
-
- Responsive Image -
-
- Responsive Image Components are used to display Images on websites, which are screen responsive. - They expand upto the width of the container they are in. To use this image component, name the class - as responsive-image for your image element. -
-
- -
-
- -
-
-
-
-
- Rounded Image -
-
- Round Images are the circular, which can be used for representation of profiles in a higher - dimensions. To use this component, mention a class as rounded-image for your image. -
-
- - -
-
- -
-
-
- - < Card Input > - -
-
+
- - - \ No newline at end of file + + diff --git a/Components/Input/input.html b/Components/Input/input.html index 466ca31..1dc88b2 100644 --- a/Components/Input/input.html +++ b/Components/Input/input.html @@ -1,158 +1,248 @@ - - - - - - - - - - - + + + + + + + + + + + - - HandyUI : Input - - + HandyUI : Input + +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Input
+
+ Inputs are necessary for user interaction with the website. Inputs are + used to take information from the user, and then save the data to the + server, accordingly.
-
-
- Input +
+
+
Basic
+
+ This is the basic and default input used all over.
+ Use classes combination of + input-box & + basic +
+
+
+ +
-
- Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly. - +
+
+ +
+
+
+
+
Success
+
+ This input indicates a successful validation for the users entry. +
+ Use classes combination of + input-box & + success-input +
+
+
+ +
-
-
-
- Basic -
-
- This is the basic and default input used all over.
Use classes combination of input-box & basic -
-
-
- - -
-
-
- -
-
-
-
-
- Success -
-
- This input indicates a successful validation for the users entry.
Use classes combination of input-box & success-input -
-
-
- - -
-
-
- -
-
-
-
-
- Warning -
-
- This input is used to display warnings incase of any invalid type entries by the user.
Use classes combination of input-box & warning-input -
-
-
- - -
-
-
- -
-
-
-
-
- Error -
-
- This input is used to indicate error validation for the users entry.
Use classes combination of input-box & error-input -
-
-
- - -
-
-
- -
-
-
- - < Image Slider > - +
+
+ +
+
+
+
+
Warning
+
+ This input is used to display warnings incase of any invalid type + entries by the user.
+ Use classes combination of + input-box & + warning-input +
+
+
+ +
-
+
+
+ +
+ +
+
+
Error
+
+ This input is used to indicate error validation for the users + entry.
+ Use classes combination of + input-box & + error-input +
+
+
+ + +
+
+
+ +
+
+
+ + < Image + + Slider > + +
+
- - \ No newline at end of file + + diff --git a/Components/Navigation/navigation.html b/Components/Navigation/navigation.html index 1958c02..8966259 100644 --- a/Components/Navigation/navigation.html +++ b/Components/Navigation/navigation.html @@ -1,96 +1,162 @@ - - - - - - - - - - - + + + + + + + + + + + Handy-UI : Navigation - - + +
- -
- - - -
+ +
+ + + +
-
- -
-
-
- Navigation +
+ +
+
+
Navigation
+ +
+
+ To use this navigation for your pages, simply use a class of + navigation-container for the + parent element. +
+
+
+
+

Handy UI

+
+
- -
-
- To use this navigation for your pages, simply use a class of navigation-container for the parent element. -
-
-
-
-

Handy UI

-
- -
-
-
- -
-
- -
- - < Grid - -
-
+
+
+ +
+ + +
+ + < Grid +
+
- - \ No newline at end of file + + diff --git a/Components/Slider/slider.html b/Components/Slider/slider.html index 01dd081..cdf1cde 100644 --- a/Components/Slider/slider.html +++ b/Components/Slider/slider.html @@ -1,85 +1,147 @@ - - - - - - - - - - - - + + + + + + + + + + + + HandyUI : Slider - - + +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Slider
+
+ Sliders are used to record the user's exact response value and show + the results according to that value.
+ To ge this styled Slider use a class of + slider-container
-
-
- Slider -
-
- Sliders are used to record the user's exact response value and show the results according to that value.
To ge this styled Slider use a class of slider-container +
+
+
+ +
+ +
+ + < Input + + Grid > + +
+
- - \ No newline at end of file + + diff --git a/Get-Started/colors.html b/Get-Started/colors.html index 725e9f3..7e6d85c 100644 --- a/Get-Started/colors.html +++ b/Get-Started/colors.html @@ -1,84 +1,141 @@ - - - - - - - - - - - + + + + + + + + + + + - HandyUI : Colour Palette - - + +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Colour Palette
+
+ The colours used consistently in this component library are shown + below:
-
-
- Colour Palette -
-
- The colours used consistently in this component library are shown below: +
+
+
Primary #202c39
+
secondary #283845
+
+ error
+ #FF0000
-
- -
-
Primary #202c39
-
secondary #283845
-
error
#FF0000
-
success #008000
-
warning #FFA500
-
- - -
-
- - < Typography -
-
+
success #008000
+
warning #FFA500
+
+ +
+ + < Typography +
+
- - \ No newline at end of file + + diff --git a/Get-Started/introduction.html b/Get-Started/introduction.html index cfa0b60..131c7b2 100644 --- a/Get-Started/introduction.html +++ b/Get-Started/introduction.html @@ -1,95 +1,152 @@ - - - - - - - - - - - - - + + + + + + + + + + + HandyUI: Introduction - + - +
- -
- - - -
+ +
+ + + +
-
- +
+ +
+
+
Introduction to Handy UI
+
+ An open source styling framework, which helps Developers to use best + styles and components, by using pre-defined classnames and helps you + to quickly build your Dream Project, by focusing much on Functionality + for the Ideal design you are planning for.
-
-
- Introduction to Handy UI -
-
- An open source styling framework, which helps Developers to use best styles and components, by using - pre-defined classnames and helps you to quickly build your Dream Project, by focusing much on - Functionality for the Ideal design you are planning for. -
-
+
-
-
- Installation -
-
- In order to equip HandyUI to your project, copy the link given below and paste it in the - Head tag of your html, above all other style sheets. -
-
- -
-
+
+
Installation
+
+ In order to equip HandyUI to your project, copy the link given below + and paste it in the + Head tag of your html, above all other style sheets. +
+
+ +
+
-
- - Typography > -
-
+
+ + Typography > + +
+
- - - \ No newline at end of file + + diff --git a/Get-Started/typography.html b/Get-Started/typography.html index 58333d7..0bb1dde 100644 --- a/Get-Started/typography.html +++ b/Get-Started/typography.html @@ -1,163 +1,236 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + HandyUI: Typography - + - +
- -
- - - -
+ +
+ + + +
-
- +
+
+
Typography
+
+ Types of text with different styles you can use in your project.
-
-
- Typography
-
- Types of text with different styles you can use in your project. -
-
+
-
-
- Headings -
-
- All header texts with different sizes are available.
- Add a class combination of header-text - and header-variant for these text sizes.
-
-

Header Text 1

-
-

Header Text 2

-
-

Header Text 3

-
-

Header Text 4

-
-

Header Text 5

-
-
- -
-
+
+
Headings
+
+ All header texts with different sizes are available.
+ Add a class combination of + header-text and + header-variant for these text + sizes. +
+
+

Header Text 1

+
+

Header Text 2

+
+

Header Text 3

+
+

Header Text 4

+
+

Header Text 5

+
+
+ +
+
-
-
- Small Text -
-
- - Add a class combination of header-text - and small-text for this text size.
+
+
Small Text
+
+ Add a class combination of + header-text and + small-text for this text size. +
-
-

This is how a small text looks like.

-
-
- -
-
+
+

+ This is how a small text looks like. +

+
+
+ +
+
-
-
- Grey Text -
-
- - Add a class trio of header-text - , header-size and grey-text for this text type.
-
-

This is how a grey text looks like.

-
-
- -
-
-
-
- Centered Text -
-
- - Add a class trio of header-text - , header-size and centered-text for this text type.
-
-

This is how a centered text looks like.

-
-
- -
-
+
+
Grey Text
+
+ Add a class trio of + header-text , + header-size and + grey-text for this text type. +
+
+

+ This is how a grey text looks like. +

+
+
+ +
+
+
+
Centered Text
+
+ Add a class trio of + header-text , + header-size and + centered-text for this text + type. +
+
+

+ This is how a centered text looks like. +

+
+
+ +
+
-
- - < Introduction Colours > - -
-
+
+ + < Introduction + Colours > + +
+
- - - \ No newline at end of file + + diff --git a/index.html b/index.html index 31f907e..2c37e00 100644 --- a/index.html +++ b/index.html @@ -1,40 +1,56 @@ - - - - - - + + + + + Handy UI - - + + - +
- -
- - - -
+ +
+ + + +
-

- Upgrade your ideas
to the IDEAL project -

-

Handy-UI is a helpful & pre-defined CSS library
packed with Re-usable & - Re-markable components for you new project

-
- Get started - GitHub -
+

Upgrade your ideas
to the IDEAL project

+

+ Handy-UI is a helpful & pre-defined CSS library
+ packed with Re-usable & Re-markable components + for you new project +

+
+ Get started + GitHub +
- - - \ No newline at end of file + +