Skip to content

Latest commit

 

History

History
162 lines (124 loc) · 5.5 KB

README.md

File metadata and controls

162 lines (124 loc) · 5.5 KB
Raw

GitHub license

Glasses UI (0.0.4-3)v a collection of reusable CSS classes to enhance your web development experience. This library provides various utilities, styles, and components that you can easily integrate into your projects.

Table of Contents

Installation

You can install the library via npm:

npm i glasses-ui

Usage

To use the library in your project, import the style.scss file into your main SCSS file:

@import 'glasses-ui/style';

After importing, you can start using the provided CSS classes in your HTML files.

Button Styles

The library provides pre-defined button styles that you can use by adding the corresponding classes to your buttons:

  • .btn-primary: Primary button style with a blue background color.
  • .btn-danger: Danger button style with a red background color.
  • .btn-success: Success button style with a green background color.
  • .btn-warning: Warning button style with a yellow background color.
  • .btn-info: Info button style with a cyan background color.

You can also adjust the button size by adding classes like .btn-sm, .btn-md, .btn-lg, or .btn-xl.

<button class="btn-primary">Primary Button</button>
<button class="btn-danger btn-md">Medium Danger Button</button>

Border Styles

The library provides various border styles that you can apply to your elements:

  • .border-none: No border.

  • .border-solid: Solid border style.

  • .border-dashed: Dashed border style.

  • .border-dotted: Dotted border style.

  • .border-double: Double border style. You can also adjust the border width and color using the following classes:

  • .border-width-1px: 1-pixel border width.

  • .border-width-2px: 2-pixel border width.

  • .border-width-3px: 3-pixel border width. ... (add more as needed)

To specify the border color, use classes like .border-color-primary, .border-color-danger, etc., where the color corresponds to the button styles.

<div class="border-solid border-width-2px border-color-primary">Solid Border</div>
<div class="border-dashed border-width-1px border-color-danger">Dashed Border</div>

Shadow Styles

The library provides shadow styles that you can apply to elements:

  • .shadow-box: Basic box shadow effect.
  • .shadow-text: Shadow effect for text elements. You can also adjust the shadow size by using classes like .shadow-sm, .shadow-md, .shadow-lg, etc.
<div class="shadow-box shadow-md">Box with Shadow</div>
<p class="shadow-text shadow-sm">Text with Shadow</p>

Text Styles

The library offers various text styles:

  • .text-center: Center-align text.
  • .text-left: Left-align text.
  • .text-right: Right-align text.
  • .text-uppercase: Convert text to uppercase.
  • .text-lowercase: Convert text to lowercase.
  • .text-capitalize: Capitalize the first letter of each word.
<h1 class="text-center">Centered Heading</h1>
<p class="text-uppercase">uppercase text</p>

Background Styles

The library provides background color classes:

  • .bg-primary: Blue background color.
  • .bg-danger: Red background color.
  • .bg-success: Green background color.
  • .bg-warning: Yellow background color.
  • .bg-info: Cyan background color. You can also add custom background colors using the .bg-custom class and specifying the desired color using inline CSS.
<div class="bg-primary">Blue Background</div>
<div class="bg-custom" style="background-color: #FFA500;">Custom Background</div>

Interactions

The library allows you to add interaction styles:

  • .hover-transform: Apply a transformation on hover.
  • .hover-rotate: Rotate an element on hover.
  • .hover-scale: Scale an element on hover.
<div class="hover-transform rotate(10deg) scale(1.2)">Transform on Hover</div>

Custom Buttons

You can create custom buttons with your own styles by using the following classes:

  • .btn-custom-1: Custom button with a green background and white text.
  • .btn-custom-2: Custom button with a red border, white text, and 2px border width.
<button class="btn-custom-1">Custom Button 1</button>
<button class="btn-custom-2">Custom Button 2</button>

Flexbox Utilities

The library includes useful flexbox utilities:

  • .flex-container: Set an element as a flex container.
  • .flex-item: Set an element as a flex item.
  • .flex-row: Set flex direction to row.
  • .flex-column: Set flex direction to column.
  • .flex-wrap: Enable flex items to wrap if necessary.
  • .justify-content-center: Center-align flex items horizontally.
  • .justify-content-start: Align flex items to the start of the container.
  • .justify-content-end: Align flex items to the end of the container.
  • .align-items-center: Center-align flex items vertically.
  • .align-items-start: Align flex items to the top of the container.
  • .align-items-end: Align flex items to the bottom of the container.
<div class="flex-container justify-content-center align-items-center">
 <div class="flex-item">Flex Item 1</div>
 <div class="flex-item">Flex Item 2</div>
</div>

License

This project is licensed under the MIT License.