trim-design-tools v0.2.3

Trim Design Tools : Beta

Note : This design library is still at its beta stage development.

Trim design tools is a design library thats lets you add advanced looking components, with a simple touch.

Beta Release Changes / Features:

• NPM support
• New img-blur component added

💡 Contents

1. Getting started with a CDN
2. NPM Installation
3. Documentation

👉 CDN

Anybody can get started with Trim by inserting the following above the </head> tag.

<script type="module" src="https://cdn.jsdelivr.net/gh/501A-Designs/Trim/index.js" defer></script>
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/Trim/css/cssVariables.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/Trim/css/trim.css"
  rel="stylesheet"
/>

Each webcomponent is saved in seperate files. To access a specific webcomponent, use the CDN below while referencing the JavaScript file name.

<script src="https://cdn.jsdelivr.net/gh/501A-Designs/Trim/components/<component-file-name>" defer></script>

In addition to using the webcomponents it is necessary to use the CDN below. Because all components use CSS variables this gives the general styling to all the components. You may fork and edit it to your preference as well.

<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/Trim/css/cssVariables.css"
  rel="stylesheet"
/>

Optional: You can also insert the Palette CDN which will enable you to easily add color via class:

<link
  href="https://cdn.jsdelivr.net/gh/501A-Designs/Palette/Palette.css"
  rel="stylesheet"
/>

Click here to learn more about Palette.

📦 NPM Installation

Type the following command in the terminal of your project.

npm i trim-design-tools --save

Add the following above the </head> tag.

<script type="module" src="node_modules/trim-design-tools/index.js" defer></script>
<link rel="stylesheet" href="node_modules/trim-design-tools/css/cssVariables.css">

⚠ About Class Naming

Pre-Styled Classes

• Styled Ordered List

Formatting / Position:

• Simple Grid
• Simple Flex Box

Using Pseudo Elements:

• Hover
• Load

📃 Styled Ordered Lists:

Adding the id with the names below will enable you to add styles to the number of your ordered list (Ordered list are use numerical values).

Add the id's to the ol tag

You can also additionally style the color of the numbers and background by adding the ::before pseudo class to your id's li tag.

Example: ol-round li::before

🔳 Simple Grid:

You can use CSS grid by simply adding grid-1fr-1fr-1fr... as a class to a component. However, this grid can only support up to 6 columns at max (grid-1fr-1fr-1fr-1fr-1fr-1fr). Note: If you add the section tag as a child component of the Simple Grid class, it will be formatted into a Content Card (Grid Content Card). You can also use the grid-auto class, which will create a grid that is automatically laid out depending on the number of components you have.

🔛 Simple Flex Box:

You can create a CSS flex box by adding the following class names to any parent component. All flex properties have a flex-direction of row. Variations include the following:

☝ Hover:

Hover is initiated using the :hover pseudo element. Writing the hover-classname as a class name enables the object an effect when hovered.

Best works with Grid Content Card. hover-arrow works best with buttons

🔃 Load:

The load-effectname class will be enabled when the webpage has loaded. This component is good for when you want to create page transitions, or when creating simple drawers with animations.

wave and open best work with the <details> and <summary> HTML tags.

v1.7 now supports the load-animation web component. You can change the color of the animating object using the objColor property.