From 8ec712c8c884110600954860c21f58107455cfdc Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sun, 14 Dec 2025 16:14:29 -0800 Subject: Move to typescript --- src/index.html | 1167 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 575 insertions(+), 592 deletions(-) (limited to 'src/index.html') diff --git a/src/index.html b/src/index.html index c5f83a2..b20e703 100644 --- a/src/index.html +++ b/src/index.html @@ -1,599 +1,582 @@ - - - - Liz CSS - Framework Demo - - - - - -
- - -
- -
- -
-

Color Palette

-

A retro-themed minimal CSS framework with carefully selected colors for light and dark modes.

- -

Primary Colors

-
-
- Primary -
-
- #e56aa6 -
-
-
- Primary Light -
-
- #f08dbe -
-
-
- Primary Dark -
-
- #c84d86 -
-
-
- -

Secondary Colors

-
-
- Secondary -
-
- #b69cff -
-
-
- Secondary Light -
-
- #d7c8ff -
-
-
- Secondary Dark -
-
- #8f78d6 -
-
-
- -

Status Colors

-
-
- Success -
-
- #2e8b57 -
-
-
- Error -
-
- #b3261e -
-
-
- Warning -
-
- #b7791f -
-
-
- Info -
-
- #2b6cb0 -
-
-
-
- - -
-

Buttons

-

Retro-styled buttons with multiple variants and states.

- -

Basic Buttons

-
- - - - -
- -

Status Buttons

-
- - - - -
- -

Button States

-
- - -
-
- - -
-

Forms

-

Complete form styling with retro aesthetics.

- -
-
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- Checkboxes -
- - -
-
- - -
-
- -
- Radio Buttons -
- - -
-
- - -
-
- -
- - - -
-
-
- - -
-

Alerts

-

Status messages and notifications with semantic colors.

- -
- ℹ️ Info: This is an informational message. -
- -
- ✓ Success: Operation completed successfully! -
- -
- ⚠️ Warning: Please review this before proceeding. -
- -
- ✗ Error: Something went wrong. Please try again. -
-
- - -
-

Badges & Pills

-

Small inline elements for labels, tags, and status indicators.

- -

Default Badges

-

- Default - Primary - Secondary - Contrast -

- -

Status Badges

-

- ✓ Success - ✗ Error - ⚠️ Warning - ℹ️ Info -

-
- - -
-

Typography & Helper Classes

-

Text utilities and spacing helpers for quick styling.

- -

Text Colors

-

- Default text (muted) - success text - error text - warning text - info text - contrast text -

- -

Text Alignment

-

Left aligned

-

Center aligned

-

Right aligned

- -

Spacing Helpers

-

- Use .mt-xs, .mt-sm, .mt-md, - .mt-lg, .mt-xl for margin-top. -

-

- Use .mb-xs, .mb-sm, .mb-md, - .mb-lg, .mb-xl for margin-bottom. -

-

- Use .mx-auto for horizontal centering and - .py-md for vertical padding. -

- -
-

Example: Component with margin and padding utilities

-
-
- - -
-

Heading Styles

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
- - -
-

Lists

- -

Unordered List

-
    -
  • Item one with some text
    • -
  • Item two with more text
    • -
  • Item three with even more text
    • -
  • Nested lists: -
      -
    • Sub-item one
      • -
    • Sub-item two
      • -
    -
    • -
- -

Ordered List

-
    -
  1. First step in the process
    2. -
  2. Second step follows naturally
    3. -
  3. Third step completes the sequence
    4. -
-
- - -
-

Blockquotes

-
- "The best time to plant a tree was 20 years ago. The second best time is now." -
- — Chinese Proverb -
-
- - -
-

Links

-

- This is a hyperlink styled with the framework. Links - have a bottom border and change color on hover. You can use them - inline within text or as standalone elements. -

-
- - -
-

Tables

-

Tables with retro styling, alternating row colors, and hover effects.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureLight ModeDark Mode
BackgroundWarm creamWarm taupe
ButtonsLavender primaryRose primary
BordersRetro 90s beveledRetro 90s beveled
AccentsPink & brownPink & brown
-
- - -
-

Code

-

Inline const x = 42; looks different from block code:

- 
function retro() {
+    
+        
+        
+        Liz CSS - Framework Demo
+        
+        
+        
+        
+    
+    
+        

+            
+            
+        

+
+        

+            
+            

+                
Color Palette

+                

+                    A retro-themed minimal CSS framework with carefully selected colors for light
+                    and dark modes.
+                

+
+                
Primary Colors

+                

+                    

+                        Primary
+                        

+                            

+                            #e56aa6
+                        

+                    

+                    

+                        Primary Light
+                        

+                            

+                            #f08dbe
+                        

+                    

+                    

+                        Primary Dark
+                        

+                            

+                            #c84d86
+                        

+                    

+                

+
+                
Secondary Colors

+                

+                    

+                        Secondary
+                        

+                            

+                            #b69cff
+                        

+                    

+                    

+                        Secondary Light
+                        

+                            

+                            #d7c8ff
+                        

+                    

+                    

+                        Secondary Dark
+                        

+                            

+                            #8f78d6
+                        

+                    

+                

+
+                
Status Colors

+                

+                    

+                        Success
+                        

+                            

+                            #2e8b57
+                        

+                    

+                    

+                        Error
+                        

+                            

+                            #b3261e
+                        

+                    

+                    

+                        Warning
+                        

+                            

+                            #b7791f
+                        

+                    

+                    

+                        Info
+                        

+                            

+                            #2b6cb0
+                        

+                    

+                

+            

+
+            
+            

+                
Buttons

+                
Retro-styled buttons with multiple variants and states.

+
+                
Basic Buttons

+                

+                    
+                    
+                    
+                    
+                

+
+                
Status Buttons

+                

+                    
+                    
+                    
+                    
+                

+
+                
Button States

+                

+                    
+                    
+                

+            

+
+            
+            

+                
Forms

+                
Complete form styling with retro aesthetics.

+
+                

+                    

+                        
+                        
+                    

+
+                    

+                        
+                        
+                    

+
+                    

+                        
+                        
+                    

+
+                    

+                        
+                        
+                    

+
+                    

+                        
+                        
+                    

+
+                    

+                        Checkboxes
+                        

+                            
+                            
+                        

+                        

+                            
+                            
+                        

+                    

+
+                    

+                        Radio Buttons
+                        

+                            
+                            
+                        

+                        

+                            
+                            
+                        

+                    

+
+                    

+                        
+                        
+                        
+                    

+                

+            

+
+            
+            

+                
Alerts

+                
Status messages and notifications with semantic colors.

+
+                

+                    ℹ️ Info: This is an informational message.
+                

+
+                

+                    ✓ Success: Operation completed successfully!
+                

+
+                

+                    ⚠️ Warning: Please review this before proceeding.
+                

+
+                

+                    ✗ Error: Something went wrong. Please try again.
+                

+            

+
+            
+            

+                
Badges & Pills

+                
Small inline elements for labels, tags, and status indicators.

+
+                
Default Badges

+                

+                    Default
+                    Primary
+                    Secondary
+                    Contrast
+                

+
+                
Status Badges

+                

+                    ✓ Success
+                    ✗ Error
+                    ⚠️ Warning
+                    ℹ️ Info
+                

+            

+
+            
+            

+                
Typography & Helper Classes

+                
Text utilities and spacing helpers for quick styling.

+
+                
Text Colors

+                

+                    Default text (muted)
+                    success text
+                    error text
+                    warning text
+                    info text
+                    contrast text
+                

+
+                
Text Alignment

+                
Left aligned

+                
Center aligned

+                
Right aligned

+
+                
Spacing Helpers

+                

+                    Use .mt-xs, .mt-sm, .mt-md,
+                    .mt-lg, .mt-xl for margin-top.
+                

+                

+                    Use .mb-xs, .mb-sm, .mb-md,
+                    .mb-lg, .mb-xl for margin-bottom.
+                

+                

+                    Use .mx-auto for horizontal centering and .py-md for
+                    vertical padding.
+                

+
+                

+                    
Example: Component with margin and padding utilities

+                

+            

+
+            
+            

+                
Heading Styles

+                
Heading 1

+                
Heading 2

+                
Heading 3

+                
Heading 4

+                
Heading 5

+                
Heading 6

+            

+
+            
+            

+                
Lists

+
+                
Unordered List

+                
    
+                    
  • Item one with some text
    • 
+                    
  • Item two with more text
    • 
+                    
  • Item three with even more text
    • 
+                    
  • 
+                        Nested lists:
+                        
      
+                            
    • Sub-item one
      • 
+                            
    • Sub-item two
      • 
+                        
    
+                    
    • 
+                

+
+                
Ordered List

+                
    
+                    
  1. First step in the process
    2. 
+                    
  2. Second step follows naturally
    3. 
+                    
  3. Third step completes the sequence
    4. 
+                

+            

+
+            
+            

+                
Blockquotes

+                

+                    "The best time to plant a tree was 20 years ago. The second best time is now."
+                    

+                    — Chinese Proverb
+                

+            

+
+            
+            

+                
Links

+                

+                    This is a hyperlink styled with the framework. Links have a
+                    bottom border and change color on hover. You can use them
+                    inline within text or as standalone elements.
+                

+            

+
+            
+            

+                
Tables

+                
Tables with retro styling, alternating row colors, and hover effects.

+                
+                    
+                        
+                            
+                            
+                            
+                        
+                    
+                    
+                        
+                            
+                            
+                            
+                        
+                        
+                            
+                            
+                            
+                        
+                        
+                            
+                            
+                            
+                        
+                        
+                            
+                            
+                            
+                        
+                    
+                
FeatureLight ModeDark Mode
BackgroundWarm creamWarm taupe
ButtonsLavender primaryRose primary
BordersRetro 90s beveledRetro 90s beveled
AccentsPink & brownPink & brown

+            

+
+            
+            

+                
Code

+                
Inline const x = 42; looks different from block code:

+                
function retro() {
   return "That's totally rad!";
 }
 
 retro(); // "That's totally rad!"

-      

-
-      
-      

-        
Dividers

-        
Use <hr> to separate content sections:

-        

-        
Content after the divider looks fresh and organized.

-      

-
-      
-      

-        
Form Validation

-        
Invalid inputs show a red border when they fail validation.

-        

-          

-            
-            
-          

-          

-            
-            
-          

-          

-            
-            
-          

-        

-      

-
-      
-      

-        
Button Groups

-        
Combine buttons into a group with the .button-group class:

-        

-          
-          
-          
-        

-      

-
-      
-      

-        
Toggle Switches

-        
Use checkboxes with the .toggle class to create stylish toggle switches:

-        

-          
-          
-        

-        

-          
-          
-        

-        

-          
-          
-        

-      

-
-      
-      

-        
Range Sliders

-        
Native range inputs styled with retro beveled appearance:

-        

-          
-          
-        

-        

-          
-          
-        

-        

-          
-          
-        

-      

-
-    

-
-    

-      
© 2025 Liz CSS Framework. Made with coffee and retro vibes.

-    

-
-    
-  
+
+ + +
+

Dividers

+

Use <hr> to separate content sections:

+
+

Content after the divider looks fresh and organized.

+
+ + +
+

Form Validation

+

Invalid inputs show a red border when they fail validation.

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

Button Groups

+

Combine buttons into a group with the .button-group class:

+
+ + + +
+
+ + +
+

Toggle Switches

+

+ Use checkboxes with the .toggle class to create stylish toggle + switches: +

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

Range Sliders

+

Native range inputs styled with retro beveled appearance:

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

© 2025 Liz CSS Framework. Made with coffee and retro vibes.

+
+ + + -- cgit v1.2.3-70-g09d2