diff --git a/JS/app.js b/JS/slider.js similarity index 78% rename from JS/app.js rename to JS/slider.js index b8e39f3..dea39c1 100644 --- a/JS/app.js +++ b/JS/slider.js @@ -5,4 +5,4 @@ const output = document.getElementById("slider-value"); output.innerHTML = slider.value; // Display the default slider value // Update the current slider value (each time you drag the slider handle) -slider.addEventListener("input", () => output.innerText = slider.value ); \ No newline at end of file +slider.addEventListener("input", () => output.innerHTML = slider.value); \ No newline at end of file diff --git a/docs/components.html b/docs/components.html index 980d97c..94be0f4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -9,7 +9,6 @@ gozo UI | Components - @@ -32,911 +31,43 @@

Components

-
-

Alert

-

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

- -

Filled Alert

- -
- -
- This is a Primary Alert !! -
- -
- This is a Secondary Alert !! -
- -
- This is a Success Alert !! -
- -
- This is a Warning Alert !! -
- -
- This is a Danger Alert !! -
- -
-
- - - -
- -

Outline Alert

-
- -
- This is an outline Primary Alert !! -
- -
- This is an outline Secondary Alert !! -
- -
- This is an outline Success Alert !! -
- -
- This is an outline Warning Alert !! -
- -
- This is an outline Danger Alert !! -
- -
- -
- - - -
-
- -
-

Avatar

-

Avatars are used to identify movers and for users to navigate to find their profile, account and details.

- -

Round Avatar

- -
- avatar - avatar - avatar -
- -
- - -
- -

Square Avatar

- - -
- avatar - avatar - avatar -
- -
- - -
- -
- -
-

Badge

-

Badges contain numeric values and indicate a running tally, such as the number of messages or notifications.

- -
- -

Badge on Icon

-
- -
- chat icon with badge - 5 -
- -
- chat icon with badge -
13
-
- -
- chat icon with badge -
2
-
- -
- chat icon with badge -
13
-
- -
- chat icon with badge -
56
-
- -
- -
- - -
- -

Badge on Avatar

-
- -
- avatar -
-
- -
- avatar -
-
- -
- avatar -
-
- -
- -
- - -
-
-
- -
- -

Button

-

Buttons allow users to take actions, and make choices, with a single tap.

- -

Filled Buttons

-
- - - - - - - -
- -
- - -
- -

Outline Buttons

- -
- - - - - - - -
- -
- - -
- -

Hovarable Outline Buttons

- -
- - - - - - - -
- -
- - -
- -

Link Button

- -
- - - - - - - -
- -
- - -
- -

Icon Button

- -
- - - -
- -
- - -
- -

Floating Action Button

- -
- - - -
- -
- - -
- -
- -
- -

Card

-

Cards can be of any shape, color and form. But in general, they all contain pictures, icons and some basic text information, such as title, user name and location information.

- -

Text only Card

- -
-
-
- Text only Card -
-
-

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! -

-
-
-
- -
- - -
- -

Card with Badge

- -
-
-
- Card with Badge -
-
-

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! -

-
- 5 -
-
- -
- - -
- -

Card with Dismiss

- -
-
-
- Card with dismiss - close button -
-
-

- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! -

-
-
-
- -
- - -
- -

Card with Image

- -
-
-
- card image -
-
- Card with Image -
-
- Lorem ipsum dolor sit amet. -
-
-
- -
- - -
- -

Card with Shadow

- -
-
-
- card image -
-
- Card with Shadow -
-
- Lorem ipsum dolor sit amet. -
-
-
- -
- - -
- -

Horizontal Card

- -
-
-
- card image -
-
-
- Horizontal Card -
-
- Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, doloremque? amet consectetur adipisicing elit. Perspiciatis, odio. -
-
-
-
- -
- - -
- -

Vertical Card

- -
-
-
- card image -
-
- Vertical Card -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, necessitatibus? -
-
-
- -
- - -
- -

Card with Text Overlay

- -
-
-
-
- card image -
-
- Text Overlay -
-
-
- Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique, eaque. -
-
-
- -
- - -
- -

E-commerce Product Card

- -
-
- -
- card image - -
- -
-
- Batman Ridller-Unmask Poster -
-
- 499 INR -
-
- -
-
-
-
- -
- -
- -

E-commerce Horizontal Product Card

- -
-
- -
- card image -
- -
-
- Batman Ridller-Unmask Poster -
-
- 499 INR -
-
- - -
-
-
-
- -
- - -
- -
- -
- -

Image

- -

Responsive Image

-

Image will take the size of contianer. Resize window to see the responsiveness

- -
- image -
- -
- - -
- -

Round Image (250px)

-

Source images need not to be square. The CSS will take care of it.

- -
- image - image -
- -
- - -
- -

Round Image (150px)

-

Source images need not to be square. The CSS will take care of it.

- -
- image - image -
- -
- - -
- -

Square Image (150px)

-

Source images need not to be square. The CSS will take care of it.

- -
- image - image -
- -
- - -
- -
- -
- -

Input

- -

Normal Inputs

- -
-
- - -
- -
- - -
-
- -
- - -
- -

Error/Alert Inputs

- -
-
- - -
Invalid Username
-
- -
- - -
Invalid Password
-
-
- -
- - - - -
- -

Alert message Inputs

- -
-
- - -
Too short. Must be more than 6 characters
-
- -
- - -
Weak Password
-
- -
- - -
Good to go !!
-
-
- -
- - -
- -

Checkbox

- -
-
-
- Red - Blue - Yellow -
-
- -
- -
- -

Radio Button

- -
-
-
- Red - Blue - Yellow -
-
- -
- -
-
- -
- -

Text Utilities

- -

Headings

- -
-

H1 Heading1

-

H2 Heading2

-

H3 Heading3

-

H4 Heading4

-
H5 Heading5
-
H6 Heading6
-
- -
- - -
- -

Text Size

- -
-

Text inside normal p tag

-

Text inside normal p tag

-

Text-XL

-

Text-L

-

Text-M

-

Text-S

-
- -
- - -
- -

Text Alignment

- -
-

Center Text

-

Center Text

-

Center Text Lorem ipsum dolor sit amet.

-

-

left Text

-

left Text

-

left Text Lorem ipsum dolor sit amet.

-

-

right Text

-

right Text

-

right Text Lorem ipsum dolor sit amet.

-
- -
- - -
- -

Text Colors

- -
-

Text White

-

Text Blue

-

Text Lightblue

-

Text Green

-
Text Yellow
-
Text Red
-
Text Gray
-
- -
- - -
- -
- -
- -

Utilities

- -

Background Colors

- -
-
Blue BG
-
Lightblue BG
-
Green BG
-
Yellow BG
-
Red BG
-
Gray BG
-
Text-Gray BG
-
- -
- - -
- -

Outlines

- -
-
Blue Outline
-
Lightblue Outline
-
Green Outline
-
Yellow Outline
-
Red Outline
-
Gray Outline
-
Text-Gray Outline
-
- -
- - -
- -

Shadow

- -
-
Blue BG
-
Lightblue BG
-
Green BG
-
Yellow BG
-
Red BG
-
Gray BG
-
Text-Gray BG
-
- -
- - -
- -
- -
diff --git a/docs/components/alert.html b/docs/components/alert.html new file mode 100644 index 0000000..7d74183 --- /dev/null +++ b/docs/components/alert.html @@ -0,0 +1,120 @@ + + + + + + + + + gozo UI | Alert + + + + + + + + + +
+
+

Alert

+

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +

Filled Alert

+ +
+ +
+ This is a Primary Alert !! +
+ +
+ This is a Secondary Alert !! +
+ +
+ This is a Success Alert !! +
+ +
+ This is a Warning Alert !! +
+ +
+ This is a Danger Alert !! +
+ +
+
+ + + +
+ +

Outline Alert

+
+ +
+ This is an outline Primary Alert !! +
+ +
+ This is an outline Secondary Alert !! +
+ +
+ This is an outline Success Alert !! +
+ +
+ This is an outline Warning Alert !! +
+ +
+ This is an outline Danger Alert !! +
+ +
+ +
+ + + +
+
+
+ + \ No newline at end of file diff --git a/docs/components/avatar.html b/docs/components/avatar.html new file mode 100644 index 0000000..0af944b --- /dev/null +++ b/docs/components/avatar.html @@ -0,0 +1,88 @@ + + + + + + + + + gozo UI | Avatar + + + + + + + + + +
+
+

Avatar

+

Avatars are used to identify movers and for users to navigate to find their profile, account and details.

+ +

Round Avatar

+ +
+ avatar + avatar + avatar +
+ +
+ + +
+ +

Square Avatar

+ + +
+ avatar + avatar + avatar +
+ +
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/docs/components/badge.html b/docs/components/badge.html new file mode 100644 index 0000000..a37e25f --- /dev/null +++ b/docs/components/badge.html @@ -0,0 +1,122 @@ + + + + + + + + + gozo UI | Badge + + + + + + + + + +
+
+

Badge

+

Badges contain numeric values and indicate a running tally, such as the number of messages or notifications.

+ +
+ +

Badge on Icon

+
+ +
+ chat icon with badge + 5 +
+ +
+ chat icon with badge +
13
+
+ +
+ chat icon with badge +
2
+
+ +
+ chat icon with badge +
13
+
+ +
+ chat icon with badge +
56
+
+ +
+ +
+ + +
+ +

Badge on Avatar

+
+ +
+ avatar +
+
+ +
+ avatar +
+
+ +
+ avatar +
+
+ +
+ +
+ + +
+
+
+
+ + + \ No newline at end of file diff --git a/docs/components/button.html b/docs/components/button.html new file mode 100644 index 0000000..c9de13b --- /dev/null +++ b/docs/components/button.html @@ -0,0 +1,154 @@ + + + + + + + + + gozo UI | Button + + + + + + + + + +
+
+ +

Button

+

Buttons allow users to take actions, and make choices, with a single tap.

+ +

Filled Buttons

+
+ + + + + + + +
+ +
+ + +
+ +

Outline Buttons

+ +
+ + + + + + + +
+ +
+ + +
+ +

Hovarable Outline Buttons

+ +
+ + + + + + + +
+ +
+ + +
+ +

Link Button

+ +
+ + + + + + + +
+ +
+ + +
+ +

Icon Button

+ +
+ + + +
+ +
+ + +
+ +

Floating Action Button

+ +
+ + + +
+ +
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/docs/components/card.html b/docs/components/card.html new file mode 100644 index 0000000..2c17a41 --- /dev/null +++ b/docs/components/card.html @@ -0,0 +1,289 @@ + + + + + + + + + gozo UI | Card + + + + + + + + + +
+
+ +

Card

+

Cards can be of any shape, color and form. But in general, they all contain pictures, icons and some basic text information, such as title, user name and location information.

+ +

Text only Card

+ +
+
+
+ Text only Card +
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! +

+
+
+
+ +
+ + +
+ +

Card with Badge

+ +
+
+
+ Card with Badge +
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! +

+
+ 5 +
+
+ +
+ + +
+ +

Card with Dismiss

+ +
+
+
+ Card with dismiss + close button +
+
+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta! +

+
+
+
+ +
+ + +
+ +

Card with Image

+ +
+
+
+ card image +
+
+ Card with Image +
+
+ Lorem ipsum dolor sit amet. +
+
+
+ +
+ + +
+ +

Card with Shadow

+ +
+
+
+ card image +
+
+ Card with Shadow +
+
+ Lorem ipsum dolor sit amet. +
+
+
+ +
+ + +
+ +

Horizontal Card

+ +
+
+
+ card image +
+
+
+ Horizontal Card +
+
+ Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, doloremque? amet consectetur adipisicing elit. Perspiciatis, odio. +
+
+
+
+ +
+ + +
+ +

Vertical Card

+ +
+
+
+ card image +
+
+ Vertical Card +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, necessitatibus? +
+
+
+ +
+ + +
+ +

Card with Text Overlay

+ +
+
+
+
+ card image +
+
+ Text Overlay +
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique, eaque. +
+
+
+ +
+ + +
+ +

E-commerce Product Card

+ +
+
+ +
+ card image + +
+ +
+
+ Batman Ridller-Unmask Poster +
+
+ 499 INR +
+
+ +
+
+
+
+ +
+ +
+ +

E-commerce Horizontal Product Card

+ +
+
+ +
+ card image +
+ +
+
+ Batman Ridller-Unmask Poster +
+
+ 499 INR +
+
+ + +
+
+
+
+ +
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/docs/components/image.html b/docs/components/image.html new file mode 100644 index 0000000..0f604dd --- /dev/null +++ b/docs/components/image.html @@ -0,0 +1,111 @@ + + + + + + + + + gozo UI | Image + + + + + + + + + +
+
+ +

Image

+ +

Responsive Image

+

Image will take the size of contianer. Resize window to see the responsiveness

+ +
+ image +
+ +
+ + +
+ +

Round Image (250px)

+

Source images need not to be square. The CSS will take care of it.

+ +
+ image + image +
+ +
+ + +
+ +

Round Image (150px)

+

Source images need not to be square. The CSS will take care of it.

+ +
+ image + image +
+ +
+ + +
+ +

Square Image (150px)

+

Source images need not to be square. The CSS will take care of it.

+ +
+ image + image +
+ +
+ + +
+ +
+
+ + + \ No newline at end of file diff --git a/docs/components/input.html b/docs/components/input.html new file mode 100644 index 0000000..f2fb0ec --- /dev/null +++ b/docs/components/input.html @@ -0,0 +1,158 @@ + + + + + + + + + gozo UI | Input + + + + + + + + + +
+
+ +

Input

+ +

Normal Inputs

+ +
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +

Error/Alert Inputs

+ +
+
+ + +
Invalid Username
+
+ +
+ + +
Invalid Password
+
+
+ +
+ + + + +
+ +

Alert message Inputs

+ +
+
+ + +
Too short. Must be more than 6 characters
+
+ +
+ + +
Weak Password
+
+ +
+ + +
Good to go !!
+
+
+ +
+ + +
+ +

Checkbox

+ +
+
+
+ Red + Blue + Yellow +
+
+ +
+ +
+ +

Radio Button

+ +
+
+
+ Red + Blue + Yellow +
+
+ +
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/navigation.html b/docs/components/navigation.html new file mode 100644 index 0000000..4cead08 --- /dev/null +++ b/docs/components/navigation.html @@ -0,0 +1,85 @@ + + + + + + + + + gozo UI | Navigation + + + + + + + + + +
+ +
+ + \ No newline at end of file diff --git a/docs/components/simplified-grid.html b/docs/components/simplified-grid.html new file mode 100644 index 0000000..8c643f9 --- /dev/null +++ b/docs/components/simplified-grid.html @@ -0,0 +1,86 @@ + + + + + + + + + gozo UI | Simplified Grid + + + + + + + + + +
+
+ +

Simplified Grid

+

Grid 2

+

Grid with 2 items and 2 columns

+ +
+
+
item1
+
item2
+
+
+ +
+ +
+ +

Grid 3

+

Grid with 3 items and 3 columns

+ +
+
+
item1
+
item2
+
item3
+
+
+ +
+ +
+
+
+ + \ No newline at end of file diff --git a/docs/components/slider.html b/docs/components/slider.html new file mode 100644 index 0000000..665cdc7 --- /dev/null +++ b/docs/components/slider.html @@ -0,0 +1,77 @@ + + + + + + + + + gozo UI | Slider + + + + + + + + + +
+
+ +

Slider

+

Slider is used to select input within a given range.

+

Here step attribute is used to set interval.

+ +
+ +
+
+ +
+ +
+ +

JS used in Slider

+

P.S. you need to attach this code seperately in a JS file or script section

+ +
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/text-utilities.html b/docs/components/text-utilities.html new file mode 100644 index 0000000..21e97ec --- /dev/null +++ b/docs/components/text-utilities.html @@ -0,0 +1,129 @@ + + + + + + + + + gozo UI | Text-Utilities + + + + + + + + + +
+
+ +

Text Utilities

+ +

Headings

+ +
+

H1 Heading1

+

H2 Heading2

+

H3 Heading3

+

H4 Heading4

+
H5 Heading5
+
H6 Heading6
+
+ +
+ + +
+ +

Text Size

+ +
+

Text inside normal p tag

+

Text inside normal p tag

+

Text-XL

+

Text-L

+

Text-M

+

Text-S

+
+ +
+ + +
+ +

Text Alignment

+ +
+

Center Text

+

Center Text

+

Center Text Lorem ipsum dolor sit amet.

+

+

left Text

+

left Text

+

left Text Lorem ipsum dolor sit amet.

+

+

right Text

+

right Text

+

right Text Lorem ipsum dolor sit amet.

+
+ +
+ + +
+ +

Text Colors

+ +
+

Text White

+

Text Blue

+

Text Lightblue

+

Text Green

+
Text Yellow
+
Text Red
+
Text Gray
+
+ +
+ + +
+ +
+
+ + \ No newline at end of file diff --git a/docs/components/utilities.html b/docs/components/utilities.html new file mode 100644 index 0000000..d7eb452 --- /dev/null +++ b/docs/components/utilities.html @@ -0,0 +1,110 @@ + + + + + + + + + gozo UI | Utilities + + + + + + + + + +
+
+ +

Utilities

+ +

Background Colors

+ +
+
Blue BG
+
Lightblue BG
+
Green BG
+
Yellow BG
+
Red BG
+
Gray BG
+
Text-Gray BG
+
+ +
+ + +
+ +

Outlines

+ +
+
Blue Outline
+
Lightblue Outline
+
Green Outline
+
Yellow Outline
+
Red Outline
+
Gray Outline
+
Text-Gray Outline
+
+ +
+ + +
+ +

Shadow

+ +
+
Blue BG
+
Lightblue BG
+
Green BG
+
Yellow BG
+
Red BG
+
Gray BG
+
Text-Gray BG
+
+ +
+ + +
+ +
+
+ + \ No newline at end of file diff --git a/docs/designSystem.html b/docs/designSystem.html index e5db08f..f9ed483 100644 --- a/docs/designSystem.html +++ b/docs/designSystem.html @@ -34,16 +34,18 @@ Getting Started Design System Components - Alert - Avatar - Badge - Button - Card - Image - Input - Text Utilities - Utilities - + Alert + Avatar + Badge + Button + Card + Image + Input + Navigation + Simplified Grid + Slider + Text Utilities + Utilities
diff --git a/docs/docs.css b/docs/docs.css index 72d7d44..01f4f9c 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -44,7 +44,7 @@ body { nav { display: flex; - padding: 3rem; + padding: 2.5rem; align-items: center; } @@ -78,7 +78,8 @@ main { flex-direction: column; gap: 1rem; margin-left: 2rem; - margin-top: 2rem; + /* margin-top: 2rem; */ + margin-bottom: 1rem; } .sidebar a { @@ -243,4 +244,17 @@ button#bfc-show { .grid-show-container { width: auto; +} + +.component-list { + display: flex; + flex-wrap: wrap; + gap: 2rem; + justify-content: center; +} + +.component-list a { + text-decoration: none; + padding: 1rem 2rem; + font-size: large; } \ No newline at end of file diff --git a/docs/gettingStarted.html b/docs/gettingStarted.html index 4dba9da..bc254e1 100644 --- a/docs/gettingStarted.html +++ b/docs/gettingStarted.html @@ -32,18 +32,20 @@