├── static ├── .nojekyll ├── img │ ├── bordex.png │ ├── favicon.ico │ ├── bordex-social-card.jpg │ └── logo.svg └── border-style-images │ ├── blur-border-demo.jpg │ ├── corner-border-demo.jpg │ ├── fancy-border-demo.jpg │ ├── inset-border-demo.jpg │ ├── stripe-border-demo.jpg │ ├── thin-border-demo.jpg │ ├── generic-border-demo.jpg │ ├── gradient-border-demo.jpg │ ├── overlap-border-demo.jpg │ ├── disjointed-border-demo.jpg │ ├── blur-border-demo-options.jpg │ ├── fancy-border-demo-options.jpg │ ├── inset-border-demo-options.jpg │ ├── thin-border-demo-options.jpg │ ├── corner-border-demo-options.jpg │ ├── generic-border-demo-options.jpg │ ├── gradient-border-demo-options.jpg │ ├── overlap-border-demo-options.jpg │ ├── stripe-border-demo-options.jpg │ └── disjointed-border-demo-options.jpg ├── babel.config.js ├── .gitattributes ├── src ├── pages │ ├── markdown-page.md │ ├── index.module.css │ └── index.tsx ├── components │ ├── HomepageFeatures │ │ ├── styles.module.css │ │ └── index.tsx │ ├── api-tables.tsx │ └── note-admonition.tsx └── css │ └── custom.css ├── tsconfig.json ├── docs ├── api │ ├── type-definition │ │ ├── _category_.json │ │ ├── type │ │ │ └── border-types.mdx │ │ └── interface │ │ │ ├── border-styles-interfaces.mdx │ │ │ └── border-interfaces.mdx │ └── api.mdx └── border-styles │ ├── border-styles │ ├── _category_.json │ ├── add-blur-border.mdx │ ├── add-generic-border.mdx │ ├── add-disjointed-border.mdx │ ├── add-fancy-border.mdx │ ├── add-corner-border.mdx │ ├── add-inset-border.mdx │ ├── add-stripe-border.mdx │ ├── add-gradient-border.mdx │ ├── add-overlap-border.mdx │ └── add-thin-border.mdx │ └── intro.md ├── .gitignore ├── sidebars.ts ├── LICENSE ├── package.json ├── README.md └── docusaurus.config.ts /static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/bordex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/img/bordex.png -------------------------------------------------------------------------------- /static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/img/favicon.ico -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /static/img/bordex-social-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/img/bordex-social-card.jpg -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.mdx linguist-language=MDX 2 | *.mdx linguist-detectable=true linguist-language=MDX 3 | docs/* linguist-documentation=false -------------------------------------------------------------------------------- /static/border-style-images/blur-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/blur-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/corner-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/corner-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/fancy-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/fancy-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/inset-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/inset-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/stripe-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/stripe-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/thin-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/thin-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/generic-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/generic-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/gradient-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/gradient-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/overlap-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/overlap-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/disjointed-border-demo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/disjointed-border-demo.jpg -------------------------------------------------------------------------------- /static/border-style-images/blur-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/blur-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/fancy-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/fancy-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/inset-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/inset-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/thin-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/thin-border-demo-options.jpg -------------------------------------------------------------------------------- /src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /static/border-style-images/corner-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/corner-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/generic-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/generic-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/gradient-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/gradient-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/overlap-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/overlap-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/stripe-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/stripe-border-demo-options.jpg -------------------------------------------------------------------------------- /static/border-style-images/disjointed-border-demo-options.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/bordex-docs/HEAD/static/border-style-images/disjointed-border-demo-options.jpg -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@docusaurus/tsconfig", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/HomepageFeatures/styles.module.css: -------------------------------------------------------------------------------- 1 | .features { 2 | display: flex; 3 | align-items: center; 4 | padding: 2rem 0; 5 | width: 100%; 6 | } 7 | 8 | .featureSvg { 9 | height: 200px; 10 | width: 200px; 11 | } 12 | -------------------------------------------------------------------------------- /docs/api/type-definition/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Types Definition", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "A list of all available types and interfaces for borders, as well as for custom borders." 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Border - Styles", 3 | "position": 2, 4 | "link": { 5 | "type": "generated-index", 6 | "description": "A showcase of unique, pre-designed border styles that add visual appeal and distinction to HTML elements" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /sidebars.ts: -------------------------------------------------------------------------------- 1 | import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; 2 | 3 | /** 4 | * Creating a sidebar enables you to: 5 | - create an ordered group of docs 6 | - render a sidebar for each doc of that group 7 | - provide next/previous navigation 8 | 9 | The sidebars can be generated from the filesystem, or explicitly defined here. 10 | 11 | Create as many sidebars as you want. 12 | */ 13 | const sidebars: SidebarsConfig = { 14 | // By default, Docusaurus generates a sidebar from the docs folder structure 15 | tutorialSidebar: [{ type: "autogenerated", dirName: "border-styles" }], 16 | ApiSidebar: [{ type: "autogenerated", dirName: "api" }], 17 | // But you can create a sidebar manually 18 | /* 19 | tutorialSidebar: [ 20 | 'intro', 21 | 'hello', 22 | { 23 | type: 'category', 24 | label: 'Tutorial', 25 | items: ['tutorial-basics/create-a-document'], 26 | }, 27 | ], 28 | */ 29 | }; 30 | 31 | export default sidebars; 32 | -------------------------------------------------------------------------------- /src/pages/index.module.css: -------------------------------------------------------------------------------- 1 | /** 2 | * CSS files with the .module.css suffix will be treated as CSS modules 3 | * and scoped locally. 4 | */ 5 | 6 | .heroBanner { 7 | padding: 4rem 0; 8 | text-align: center; 9 | position: relative; 10 | overflow: hidden; 11 | background: rgb(191, 255, 0); 12 | background: linear-gradient( 13 | 90deg, 14 | rgba(191, 255, 0, 1) 0%, 15 | rgba(150, 0, 150, 1) 100% 16 | ); 17 | } 18 | 19 | @media screen and (max-width: 996px) { 20 | .heroBanner { 21 | padding: 2rem; 22 | } 23 | } 24 | 25 | .buttons { 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | .quick-start-button { 32 | color: white !important; 33 | background-color: #960096; 34 | border: none; 35 | } 36 | 37 | .header-title { 38 | color: white; 39 | text-transform: uppercase; 40 | } 41 | 42 | .header-description { 43 | color: white; 44 | } 45 | 46 | .tagline { 47 | font-weight: bold; 48 | text-transform: uppercase; 49 | } 50 | -------------------------------------------------------------------------------- /docs/border-styles/intro.md: -------------------------------------------------------------------------------- 1 | --- 2 | sidebar_position: 1 3 | --- 4 | 5 | # Quick Overview 6 | 7 | Bordex is a simple, fun library for adding creative borders to HTML elements with minimal effort. Designed to be easy to use, Bordex offers a variety of pre-styled borders that can be applied with a single function call. 8 | 9 | ## Getting Started 10 | 11 | ### Install Bordex 12 | 13 | ```bash 14 | npm install bordex 15 | ``` 16 | or you can use the CDN link. 17 | ```js 18 | import { addGradientBorder } from "https://unpkg.com/bordex@latest/dist/index.js"; 19 | ``` 20 | 21 | ### Import and Use 22 | 23 | ```js 24 | import { addGradientBorder } from "bordex"; 25 | 26 | // Apply a gradient border to an element 27 | const element = document.getElementById("my-element"); 28 | addGradientBorder(element, {}, "class"); 29 | ``` 30 | 31 | ![example border demo](/border-style-images/gradient-border-demo.jpg) 32 | 33 | ### Explore Options 34 | Customize borders with available settings, but proceed with caution, as some configurations may be unpredictable! Check the [List of Border Styles](/docs/category/border---styles) for more styling examples. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Frost 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/css/custom.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Any CSS included here will be global. The classic template 3 | * bundles Infima by default. Infima is a CSS framework designed to 4 | * work well for content-centric websites. 5 | */ 6 | 7 | /* You can override the default Infima variables here. */ 8 | :root { 9 | --ifm-color-primary:#aab605; 10 | --ifm-color-primary-dark: #29784c; 11 | --ifm-color-primary-darker: #277148; 12 | --ifm-color-primary-darkest: #205d3b; 13 | --ifm-color-primary-light: #33925d; 14 | --ifm-color-primary-lighter: #359962; 15 | --ifm-color-primary-lightest: #3cad6e; 16 | --ifm-code-font-size: 95%; 17 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); 18 | } 19 | 20 | /* For readability concerns, you should choose a lighter palette in dark mode. */ 21 | [data-theme='dark'] { 22 | --ifm-color-primary: #bfff00; 23 | --ifm-color-primary-dark: #21af90; 24 | --ifm-color-primary-darker: #1fa588; 25 | --ifm-color-primary-darkest: #1a8870; 26 | --ifm-color-primary-light: #29d5b0; 27 | --ifm-color-primary-lighter: #32d8b4; 28 | --ifm-color-primary-lightest: #4fddbf; 29 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); 30 | } 31 | -------------------------------------------------------------------------------- /static/img/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bordex-docs", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "docusaurus": "docusaurus", 7 | "start": "docusaurus start", 8 | "build": "docusaurus build", 9 | "swizzle": "docusaurus swizzle", 10 | "deploy": "docusaurus deploy", 11 | "clear": "docusaurus clear", 12 | "serve": "docusaurus serve", 13 | "write-translations": "docusaurus write-translations", 14 | "write-heading-ids": "docusaurus write-heading-ids", 15 | "typecheck": "tsc" 16 | }, 17 | "dependencies": { 18 | "@docusaurus/core": "3.5.2", 19 | "@docusaurus/preset-classic": "3.5.2", 20 | "@mdx-js/react": "^3.0.0", 21 | "clsx": "^2.0.0", 22 | "prism-react-renderer": "^2.3.0", 23 | "react": "^18.0.0", 24 | "react-dom": "^18.0.0" 25 | }, 26 | "devDependencies": { 27 | "@docusaurus/module-type-aliases": "3.5.2", 28 | "@docusaurus/tsconfig": "3.5.2", 29 | "@docusaurus/types": "3.5.2", 30 | "typescript": "~5.5.2" 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.5%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 3 chrome version", 40 | "last 3 firefox version", 41 | "last 5 safari version" 42 | ] 43 | }, 44 | "engines": { 45 | "node": ">=18.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-blur-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addBlurBorder" 3 | --- 4 | 5 | ## Overview 6 | 7 | The `addBlurBorder` function applies a soft, blur-like border effect to a specified HTML element. You can customize the border's color and width, with default values provided for ease of use. 8 | 9 | ### Parameters 10 | 11 | - `element`: The target HTML element to which the blur border will be applied. 12 | - `borderOptions` (**_optional_**): An object for customizing the blur border, including: 13 | - `borderColor`: The color of the blur border (default is the primary color from the theme). 14 | - `borderWidth`: The width of the blur effect (default is 20px). 15 | 16 | ### Returns 17 | 18 | The original `HTMLElement` with the applied blur border effect. 19 | 20 | ## Demo 21 | 22 | ### Example 1 23 | 24 | ```js 25 | import { addBlurBorder } from "bordex"; 26 | 27 | // Assuming you have an HTML element to apply the border to 28 | const element = document.getElementById("element"); 29 | 30 | addBlurBorder(element); 31 | ``` 32 | 33 | ![example border demo](/border-style-images/blur-border-demo.jpg) 34 | 35 | ### Example 2 36 | 37 | ```js 38 | import { addBlurBorder } from "bordex"; 39 | 40 | // Assuming you have an HTML element to apply the border to 41 | const element = document.getElementById("element"); 42 | 43 | addBlurBorder(element, { borderColor: "#BFFF00" }); 44 | ``` 45 | 46 | ![example border demo](/border-style-images/blur-border-demo-options.jpg) 47 | -------------------------------------------------------------------------------- /src/components/api-tables.tsx: -------------------------------------------------------------------------------- 1 | import Link from "@docusaurus/Link"; 2 | 3 | type propertyType = string | { link: string; type: string }; 4 | 5 | type ITableItem = { 6 | propertyName: string; 7 | type: propertyType; 8 | description: string; 9 | }; 10 | 11 | interface ITable { 12 | items: ITableItem[]; 13 | } 14 | 15 | function isLink( 16 | property: propertyType 17 | ): property is { link: string; type: string } { 18 | if (typeof property === "object" && property.link && property.type) { 19 | return true; 20 | } else { 21 | return false; 22 | } 23 | } 24 | 25 | export default function Table({ items }: ITable): JSX.Element { 26 | 27 | return ( 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {items.map((item, index) => { 38 | const propertyName = item.propertyName; 39 | const propertyType = item.type; 40 | const propertyTypeValue = isLink(propertyType) ? ( 41 | {propertyType.type} 42 | ) : ( 43 | propertyType 44 | ); 45 | const propertyDescription = item.description; 46 | return ( 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | })} 54 | 55 |
PropertyTypesDescription
{propertyName}{propertyTypeValue}{propertyDescription}
56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import Link from "@docusaurus/Link"; 3 | import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; 4 | import Layout from "@theme/Layout"; 5 | import HomepageFeatures from "@site/src/components/HomepageFeatures"; 6 | import Heading from "@theme/Heading"; 7 | 8 | import styles from "./index.module.css"; 9 | 10 | function HomepageHeader() { 11 | const { siteConfig } = useDocusaurusContext(); 12 | return ( 13 |
14 |
15 | 19 | {siteConfig.title} 20 | 21 |

22 | Add Stylish Borders{" "} 23 | with Ease 24 |

25 |
26 | 33 | Quick Start 34 | 35 |
36 |
37 |
38 | ); 39 | } 40 | 41 | export default function Home(): JSX.Element { 42 | return ( 43 | 44 | 45 |
46 |
47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-generic-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addGenericBorder" 3 | --- 4 | 5 | ## Overview 6 | 7 | The `addGenericBorder` function applies a pre-styled border to an HTML element. You can specify the border style (such as `"solid"`, `"double"`, or `"dotted"`) and customize optional properties like border color and width. 8 | 9 | ### Parameters 10 | 11 | - `element`: The target HTML element to which the border will be added. 12 | - `borderStyle`: The style of the border (e.g., "solid", "double", "dotted"). 13 | - `borderOptions` (**_optional_**): An object with optional design properties, including: 14 | - `borderColor`: The color of the border. 15 | - `borderWidth`: The thickness of the border (default values apply if not specified). 16 | 17 | ### Returns 18 | 19 | The updated `HTMLElement` with the applied border. 20 | 21 | ## Demo 22 | 23 | ### Example 1 24 | 25 | ```js 26 | import { addGenericBorder } from "bordex"; 27 | 28 | const element = document.getElementById("element"); 29 | 30 | // Adds a generic border to an element. 31 | addGenericBorder(element, "groove"); 32 | ``` 33 | 34 | ![examlp border demo](/border-style-images/generic-border-demo.jpg) 35 | 36 | ### Example 2 37 | 38 | ```js 39 | import { addGenericBorder } from "bordex"; 40 | 41 | // Assuming you have an HTML element to apply the border to 42 | const element = document.getElementById('element'); 43 | 44 | // Adds a generic border to an element with a specified options. 45 | addGenericBorder(element, 'groove', { borderColor: '#BFFF00', borderWidth:'15px' }), 46 | ``` 47 | 48 | ![example border demo](/border-style-images/generic-border-demo-options.jpg) 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | bordex icon 3 | 4 |

Bordex

5 | 6 | This is repository contains the documentation for the JavaScript library [Bordex](https://github.com/Bear-Frost/bordex), which helps create pre-styled borders for HTML elements. 7 |
8 | 9 | ## Installation 10 | 11 | clone the documentation repository using the following command. 12 | 13 | ```bash 14 | git clone https://github.com/Bear-Frost/bordex-docs.git 15 | ``` 16 | 17 | Once cloned, create your own branch and start making changes. 18 | 19 | ```bash 20 | git checkout -b your-branch-name 21 | ``` 22 | 23 | Make the necessary updates or additions to the documentation. When you're ready push your changes and create a pull request. 24 | 25 | ```bash 26 | git add . 27 | git commit -m "chore: description of your changes" 28 | git push origin your-branch-name 29 | ``` 30 | 31 | ## Project Structure 32 | 33 | ```txt 34 | bordex-docs/ 35 | │ 36 | ├── docs/ # Documentation markdown files 37 | ├── static/ # Static assets like images 38 | ├── src/ # Source files for custom Docusaurus components 39 | ├── docusaurus.config.js # Main configuration file 40 | └── README.md # This file 41 | 42 | ``` 43 | 44 | ## Running Locally 45 | 46 | To run the documentation site locally, use the following commands: 47 | 48 | ```bash 49 | npm install 50 | npm run start 51 | ``` 52 | 53 | This will start a local development server and open the documentation in your default web browser. 54 | 55 | ## Useful Resources 56 | - [Docusaurus Documentation](https://docusaurus.io/docs) 57 | 58 | ## License 59 | This project is licensed under the [MIT](/LICENSE) License. -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-disjointed-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addDisjointedBorder" 3 | --- 4 | 5 | import NoteAdmonition from "../../../src/components/note-admonition"; 6 | 7 | ## Overview 8 | 9 | The `addDisjointedBorder` function applies a customizable disjointed border to an HTML element. You can set the border's angle and color, along with an optional class name for additional styling. 10 | 11 | ### Parameters 12 | 13 | - `element`: The target HTML element. 14 | - `borderOptions` (**_optional_**): 15 | - `angle`: The angle of the border (e.g., `'90deg'`). 16 | - `borderColor`: The color of the border. 17 | - `className` (**_optional_**): Custom class name for additional CSS. 18 | 19 | ### Returns 20 | 21 | An `HTMLDivElement` that wraps the original element with the disjointed border applied. 22 | 23 | ## Demo 24 | 25 | 26 | 27 | ### Example 1 28 | 29 | ```js 30 | import { addDisjointedBorder } from "bordex"; 31 | 32 | const element = document.getElementById("element"); 33 | 34 | // Adds a disjointedBorder to an element. 35 | addDisjointedBorder(element, {}, "element"); 36 | ``` 37 | 38 | ![example border demo](/border-style-images/disjointed-border-demo.jpg) 39 | 40 | ### Example 2 41 | 42 | ```js 43 | import { addDisjointedBorder } from "bordex"; 44 | 45 | // Assuming you have an HTML element to apply the border to 46 | const element = document.getElementById("element"); 47 | 48 | // Adds a disjointed border to an element with a specified options. 49 | addDisjointedBorder( 50 | element, 51 | { angle: "45deg", borderColor: "#BFFF00" }, 52 | "element" // classname for the border element 53 | ); 54 | ``` 55 | 56 | ![example border demo](/border-style-images/disjointed-border-demo-options.jpg) 57 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-fancy-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addFancyBorder" 3 | --- 4 | import NoteAdmonition from "../../../src/components/note-admonition"; 5 | 6 | ## Overview 7 | 8 | The `addFancyBorder` function adds a decorative border to an HTML element, allowing customization of border color, width, and style. You can also specify an optional class name for additional styling. 9 | 10 | ### Parameters 11 | 12 | - `element`: The target HTML element. 13 | - `borderOptions` (**_optional_**): 14 | - `borderColor`: The color of the border (default: `COLOR_THEME.primary`). 15 | - `borderWidth`: The thickness of the border (default: `BORDER_SIZE.sm`). 16 | - `borderStyle`: The style of the border (default: `'solid'`). 17 | - `className` (**_optional_**): Custom class name for additional CSS. 18 | 19 | ### Returns 20 | 21 | An `HTMLDivElement` that wraps the original element with the fancy border applied. 22 | 23 | ## Demo 24 | 25 | 26 | 27 | ### Example 1 28 | 29 | ```js 30 | const element = document.getElementById("element"); 31 | 32 | addFancyBorder(element, {}, "element"); 33 | ``` 34 | 35 | ![example border demo](/border-style-images/fancy-border-demo.jpg) 36 | 37 | ### Example 2 38 | 39 | ```js 40 | import { addFancyBorder } from "bordex"; 41 | 42 | // Assuming you have an HTML element to apply the border to 43 | const element = document.getElementById("element"); 44 | 45 | // Adds a fancy border to an element with a specified options. 46 | addFancyBorder( 47 | element, 48 | { borderColor: "#BFFF00", borderStyle: "double", borderWidth: "10px" }, 49 | "element" // classname for the border element 50 | ); 51 | ``` 52 | 53 | ![examnple border demo](/border-style-images/fancy-border-demo-options.jpg) 54 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-corner-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addCornerBorder" 3 | --- 4 | 5 | ## Overview 6 | 7 | The `addCornerBorder` function adds a customizable four-corner border to an HTML element. You can adjust the border's width, color, and style, and apply an optional class name for additional styling. 8 | 9 | ### Parameters 10 | 11 | - `element`: The target HTML element. 12 | - `borderOptions` (**_optional_**): 13 | - `borderWidth`: Thickness of the border (default: BORDER_SIZE.sm). 14 | - `borderColor`: Color of the border (default: COLOR_THEME.primary). 15 | - `borderStyle`: Style of the border (default: 'solid'). 16 | - `className` (**_optional_**): Custom class name for additional CSS. 17 | 18 | ### Returns 19 | 20 | An `HTMLDivElement` that wraps the original element with the corner border applied. 21 | 22 | ## Demo 23 | 24 | ### Example 1 25 | 26 | ```js 27 | import { addCornerBorder } from "bordex"; 28 | 29 | // Assuming you have an HTML element to apply the border to 30 | const element = document.getElementById("element"); 31 | 32 | // Adds a corner border to an element. 33 | addCornerBorder(element, {}, "element"); 34 | ``` 35 | 36 | ![example border demo](/border-style-images/corner-border-demo.jpg) 37 | 38 | ### Example 2 39 | 40 | ```js 41 | import { addCornerBorder } from "bordex"; 42 | 43 | // Assuming you have an HTML element to apply the border to 44 | const element = document.getElementById("element"); 45 | 46 | // Adds a corner boder to an element with a specified options. 47 | addCornerBorder( 48 | element, 49 | { borderColor: "red", borderWidth: "30px", borderStyle: "double" }, 50 | "element" 51 | ); 52 | ``` 53 | 54 | ![example border demo](/border-style-images/corner-border-demo-options.jpg) 55 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-inset-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addInsetBorder" 3 | --- 4 | 5 | import NoteAdmonition from "../../../src/components/note-admonition"; 6 | 7 | ## Overview 8 | 9 | The `addInsetBorder` function adds a stylish inset border to an HTML element. You can customize the border's offset, width, and style, along with an optional class name for additional styling. 10 | 11 | ### Parameters 12 | 13 | - `element`: The target HTML element to which the inset border will be applied. 14 | - `borderOptions` (**_optional_**): An object for customizing the inset border, including: 15 | - `borderOffset`: The distance between the inner and outer borders (default: '15px'). 16 | - `borderWidth`: The thickness of the border (default: BORDER_SIZE.sm). 17 | - `borderStyle`: The style of the border (default: 'solid'). 18 | - `className` (**_optional_**): Custom class name for additional CSS styling. 19 | 20 | ### Returns 21 | 22 | An `HTMLDivElement` that wraps the original element with the inset border applied. 23 | 24 | ## Demo 25 | 26 | 27 | 28 | ### Example 1 29 | 30 | ```js 31 | import { addInsetBorder } from "bordex"; 32 | 33 | const element = document.getElementById("element"); 34 | 35 | // Adds an inset border to an element. 36 | addInsetBorder(element, {}, "element"); 37 | ``` 38 | 39 | ![example border demo](/border-style-images/inset-border-demo.jpg) 40 | 41 | ### Example 2 42 | 43 | ```js 44 | import { addInsetBorder } from "bordex"; 45 | 46 | // Assuming you have an HTML element to apply the border to 47 | const element = document.getElementById("element"); 48 | 49 | // Adds an inset border to an element with a specified options. 50 | addInsetBorder(element, { borderStyle: "dotted" }, "element"); 51 | ``` 52 | 53 | ![example border demo](/border-style-images/inset-border-demo-options.jpg) 54 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-stripe-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addStripeBorder" 3 | --- 4 | 5 | import NoteAdmonition from "../../../src/components/note-admonition"; 6 | 7 | ## Overview 8 | 9 | The `addStripeBorder` applies a customizable striped border to an HTML element, you can adjust adjust stripe width, colors, and border width. 10 | 11 | ### Parameters 12 | 13 | - `element`: The HTML element to which the striped border will be applied. 14 | - `borderOptions` (**_optional_**): An object to customize the striped border, including: 15 | - `stripeWidth`: Width of each stripe (default: inherited or standard width). 16 | - `borderWidth`: Width of the overall border. 17 | - `colors`: Array of colors for alternating stripes. 18 | - `className` (**_optional_**): A custom class name to style the container. 19 | 20 | ### Returns 21 | 22 | An `HTMLDivElement` wrapping the original element with the striped border applied. 23 | 24 | ## Demo 25 | 26 | 27 | 28 | ### Example 1 29 | 30 | ```js 31 | import { addStripeBorder } from "bordex"; 32 | 33 | // Assuming you have an HTML element to apply the border to 34 | const element = document.getElementById("element"); 35 | 36 | // Adds a stripe border to an element. 37 | addStripeBorder(element, {}, "element"); 38 | ``` 39 | 40 | ![example border demo](/border-style-images/stripe-border-demo.jpg) 41 | 42 | ### Example 2 43 | 44 | ```js 45 | import { addStripeBorder } from "bordex"; 46 | 47 | // Assuming you have an HTML element to apply the border to 48 | const element = document.getElementById("element"); 49 | 50 | // Adds a stripe border to an element with a specified options. 51 | addStripeBorder( 52 | element, 53 | { colors: ["red", "orange"], borderWidth: "15px" }, 54 | "element" 55 | ); 56 | ``` 57 | 58 | ![example border demo](/border-style-images/stripe-border-demo-options.jpg) 59 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-gradient-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addGradientBorder" 3 | --- 4 | import NoteAdmonition from "../../../src/components/note-admonition"; 5 | 6 | ## Overview 7 | 8 | The `addGradientBorder` function adds a visually striking gradient border to an HTML element. You can customize the gradient's angle, colors, and border width, along with an optional class name for additional styling. 9 | 10 | ### Parameters 11 | 12 | - `element`: The target HTML element to which the gradient border will be applied. 13 | - `borderOptions` (**_optional_**): An object for customizing the gradient border, including: 14 | - `angle`: The angle of the gradient (e.g., `'20deg'`). 15 | - `colors`: An array of color strings for the gradient. 16 | - `borderWidth`: The thickness of the border (default values apply if not specified). 17 | - `className` (**_optional_**): Custom class name for additional CSS styling. 18 | 19 | ### Returns 20 | 21 | An HTMLDivElement that wraps the original element with the gradient border applied. 22 | 23 | ## Demo 24 | 25 | 26 | 27 | ### Example 1 28 | 29 | ```js 30 | import { addGradientBorder } from "bordex"; 31 | 32 | const element = document.getElementById("element"); 33 | 34 | // Adds a gradient border to an element. 35 | addGradientBorder(element, {}, "element"); 36 | ``` 37 | 38 | ![example border demo](/border-style-images/gradient-border-demo.jpg) 39 | 40 | ### Example 2 41 | 42 | ```js 43 | import { addGradientBorder } from "bordex"; 44 | 45 | // Assuming you have an HTML element to apply the border to 46 | const element = document.getElementById("element"); 47 | 48 | // Adds a gradient border to an element with a specified options. 49 | addGradientBorder( 50 | element, 51 | { angle: "90deg", colors: ["red", "orange"] }, 52 | "element" // classname for the border element 53 | ); 54 | ``` 55 | 56 | ![example border demo](/border-style-images/gradient-border-demo-options.jpg) 57 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-overlap-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addOverlapBorder" 3 | --- 4 | 5 | import NoteAdmonition from "../../../src/components/note-admonition"; 6 | 7 | ## Overview 8 | 9 | The `addOverlapBorder` function applies a unique overlapping border style to an HTML element. You can customize properties like the border color, width, and style, along with an optional class name for further styling. 10 | 11 | ### Parameters 12 | 13 | - `element`: The HTML element to which the overlap border will be applied. 14 | - `borderOptions` (**_optional_**): An object for customizing the overlapping border, including: 15 | - `borderColor`: Color of the border (default: COLOR_THEME.primary). 16 | - `borderWidth`: General border width (default: BORDER*SIZE.sm), with specific options for each side (e.g., borderTopWidth). 17 | - `borderStyle`: Style of the border (default: 'solid'). 18 | - className (***optional***): A custom class name to apply CSS styling to the container. 19 | 20 | ### Returns 21 | 22 | An `HTMLDivElement` that wraps the original element with the overlapping border applied. 23 | 24 | ## Demo 25 | 26 | 27 | 28 | ### Example 1 29 | 30 | ```js 31 | import { addOverlapBorder } from "bordex"; 32 | 33 | // Assuming you have an HTML element to apply the border to 34 | const element = document.getElementById("element"); 35 | 36 | // Adds an overlap border to an element. 37 | addOverlapBorder(element, {}, "element"); 38 | ``` 39 | 40 | ![example border demo](/border-style-images/overlap-border-demo.jpg) 41 | 42 | ### Example 2 43 | 44 | ```js 45 | import { addOverlapBorder } from "bordex"; 46 | 47 | // Assuming you have an HTML element to apply the border to 48 | const element = document.getElementById("element"); 49 | 50 | // Adds an overlap border to an element with a specified options. 51 | addOverlapBorder( 52 | element, 53 | { borderColor: "#BFFF00", borderWidth: "15px", borderStyle: "double" }, 54 | "element" 55 | ); 56 | ``` 57 | 58 | ![example border demo](/border-style-images/overlap-border-demo-options.jpg) 59 | -------------------------------------------------------------------------------- /docusaurus.config.ts: -------------------------------------------------------------------------------- 1 | import { themes as prismThemes } from "prism-react-renderer"; 2 | import type { Config } from "@docusaurus/types"; 3 | import type * as Preset from "@docusaurus/preset-classic"; 4 | 5 | const config: Config = { 6 | title: "Bordex", 7 | tagline: "Add Stylish Borders with Ease", 8 | favicon: "img/favicon.ico", 9 | 10 | url: "https://bordex.netlify.app", 11 | baseUrl: "/", 12 | onBrokenLinks: "ignore", 13 | onBrokenMarkdownLinks: "warn", 14 | 15 | i18n: { 16 | defaultLocale: "en", 17 | locales: ["en"], 18 | }, 19 | 20 | presets: [ 21 | [ 22 | "classic", 23 | { 24 | docs: { 25 | sidebarPath: "./sidebars.ts", 26 | sidebarCollapsed: false, 27 | editUrl: "https://github.com/Bear-Frost/bordex-docs/tree/main", 28 | }, 29 | theme: { 30 | customCss: "./src/css/custom.css", 31 | }, 32 | } satisfies Preset.Options, 33 | ], 34 | ], 35 | 36 | themeConfig: { 37 | // Replace with your project's social card 38 | image: "img/bordex-social-card.jpg", 39 | navbar: { 40 | title: "Bordex", 41 | logo: { 42 | alt: "My Site Logo", 43 | src: "img/logo.svg", 44 | }, 45 | items: [ 46 | { 47 | type: "docSidebar", 48 | sidebarId: "tutorialSidebar", 49 | position: "left", 50 | label: "Guides", 51 | }, 52 | { 53 | type: "docSidebar", 54 | sidebarId: "ApiSidebar", 55 | position: "left", 56 | label: "API", 57 | }, 58 | { 59 | href: "https://github.com/Bear-Frost/bordex", 60 | label: "GitHub", 61 | position: "right", 62 | }, 63 | ], 64 | }, 65 | footer: { 66 | style: "dark", 67 | copyright: `Copyright © ${new Date().getFullYear()} Bordex`, 68 | }, 69 | prism: { 70 | theme: prismThemes.github, 71 | darkTheme: prismThemes.dracula, 72 | }, 73 | } satisfies Preset.ThemeConfig, 74 | }; 75 | 76 | export default config; 77 | -------------------------------------------------------------------------------- /src/components/note-admonition.tsx: -------------------------------------------------------------------------------- 1 | import Admonition from "@theme/Admonition"; 2 | import CodeBlock from "@theme/CodeBlock"; 3 | 4 | export default function NoteAdmonition(): JSX.Element { 5 | return ( 6 |
7 | 11 | To ensure proper functionality, the HTMLDivElement wrapper around the 12 | original element must have a background applied. You can create a class 13 | for this purpose as follows: 14 |
15 |
16 | set the styling of the class first using css. 17 | 18 | {`/* the provided class name of the border container element, 19 | the style in this class is going to get applied to the border-container-element */ 20 | .boder-container-element { 21 | background-color: black; 22 | } 23 | `} 24 | 25 | we can then add a generated border to our element. 26 | 27 | {`const element = document.getElementById('element'); 28 | /* we passed in a third argument to the function, and that is the class 29 | that is going to get applied to the border container element, 30 | that we and target in css. */ 31 | addGradientBorder(element,{},'border-container-element') 32 | `} 33 | 34 | or if you want you can just add the style for the border container 35 | element in javascript like this. 36 | 37 | {`const element = document.getElementById('element'); 38 | const borderContainer = addGradientBorder(element,{},'border-container-element'); 39 | 40 | borderContainer.style.backgroundColor = "black"; 41 | `} 42 | 43 |
44 | If you have specific styling to apply to the original element, simply 45 | add those styles directly to the border container element instead. 46 | 47 |
48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /src/components/HomepageFeatures/index.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import Heading from "@theme/Heading"; 3 | import styles from "./styles.module.css"; 4 | 5 | type FeatureItem = { 6 | title: string; 7 | description: JSX.Element; 8 | }; 9 | 10 | const FeatureList: FeatureItem[] = [ 11 | { 12 | title: "Most of the time it Works", 13 | description: ( 14 | <> 15 | Generate stylish borders with a single function call! Most of the time 16 | they look great, but sometimes they play hard to get. Embrace the 17 | unpredictability! 18 | 19 | ), 20 | }, 21 | { 22 | title: "Customizable with Limits", 23 | description: ( 24 | <> 25 | Adjust your borders with a variety of settings, just be careful what you 26 | pass in! The wrong choice might lead to unexpected surprises. 27 | 28 | ), 29 | }, 30 | { 31 | title: "Lots of Bugs", 32 | description: ( 33 | <> 34 | This library has its fair share of lovable bugs! While it’s working 35 | sometimes, expect some quirks as improvements are made. Your patience is 36 | appreciated! 37 | 38 | ), 39 | }, 40 | ]; 41 | 42 | function Feature({ title, description }: FeatureItem) { 43 | return ( 44 |
45 |
53 |
54 | {title} 55 |

{description}

56 |
57 |
58 | ); 59 | } 60 | 61 | export default function HomepageFeatures(): JSX.Element { 62 | return ( 63 |
64 |
65 |
66 | {FeatureList.map((props, idx) => ( 67 | 68 | ))} 69 |
70 |
71 |
72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /docs/api/type-definition/type/border-types.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Border Types" 3 | --- 4 | 5 | ## `CommonBorderStyles` Type 6 | 7 | The `CommonBorderStyles` type defines the various styles that can be applied to borders. It includes all of the valid CSS `border-style` value. 8 | 9 | ```ts 10 | type CommonBorderStyles = 11 | | "solid" 12 | | "double" 13 | | "dotted" 14 | | "dashed" 15 | | "outset" 16 | | "inset" 17 | | "groove" 18 | | "ridge"; 19 | ``` 20 | 21 | ## `BorderColorOptional` Type 22 | 23 | An optional value of the [IBorderColor](../interface/border-interfaces#ibordercolor-interface) interface. 24 | 25 | ```ts 26 | type BorderColorOptional = Partial; 27 | ``` 28 | 29 | ## `BorderWidthOptional` Type 30 | 31 | An optional value of the [IBorderWidth](../interface/border-interfaces#iborderwidth-interface) interface. 32 | 33 | ```ts 34 | type BorderWidthOptional = Partial; 35 | ``` 36 | 37 | ## `BorderStyleOptional` Type 38 | 39 | An optional value of the [IBorderColor](../interface/border-interfaces#ibordercolor-interface) 40 | 41 | ```ts 42 | type BorderStyleOptional = Partial; 43 | ``` 44 | 45 | ## `BorderOptions` Type 46 | 47 | An intersection value of [IBorderWidth](../interface/border-interfaces#iborderwidth-interface), [IBorderColor](../interface/border-interfaces#ibordercolor-interface), [IBorderStyle](../interface/border-interfaces#iborderstyle-interface) 48 | 49 | ```ts 50 | type BorderOptions = IBorderWidth & IBorderColor & IBorderStyle; 51 | ``` 52 | 53 | ## `BorderOptionsOptional` Type 54 | 55 | An Optional value of the [BorderOptions](./border-types#borderoptions-type) 56 | 57 | ```ts 58 | type BorderOptions = Partial; 59 | ``` 60 | 61 | ## `FullBorderOptions` Type 62 | A type alias for [BorderOptionsOptional](./border-types#borderoptionsoptional-type) 63 | ```ts 64 | type FullBorderOptions = BorderOptionsOptional; 65 | ``` 66 | 67 | ## `ThinBorderSides` Type 68 | 69 | Specifies the sides to which a thin border can be applied. 70 | 71 | ```ts 72 | type ThinBorderSides = 73 | | "top" 74 | | "right" 75 | | "bottom" 76 | | "left" 77 | | "horizontal" 78 | | "vertical"; 79 | ``` 80 | -------------------------------------------------------------------------------- /docs/border-styles/border-styles/add-thin-border.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "addThinBorder" 3 | --- 4 | 5 | ## Overview 6 | 7 | The `addThinBorder` function applies a thin, customizable border to an HTML element on a specified side or orientation. It allows you to define the color, side placement, and outset spacing, along with an optional class name for further styling. 8 | 9 | ### Parameters 10 | 11 | - `element`: The target HTML element to which the thin border will be applied. 12 | - `borderOptions` (**_optional_**): An object for configuring the thin border, including: 13 | - `color`: The color of the thin border (defaults to a secondary theme color). 14 | - `side`: The side(s) where the thin border should be placed (e.g., `'top'`, `'bottom'`, `'left'`, `'right'`, `'horizontal'`, or `'vertical'`). 15 | - `outset`: The amount of spacing between the thin border and the element (applies horizontally or vertically depending on the selected side). 16 | - `className` (**_optional_**): Custom class name for applying additional CSS styles to the border container. 17 | 18 | ### Returns 19 | 20 | An `HTMLDivElement` that wraps the original element with the thin border applied. 21 | 22 | ## Demo 23 | 24 | :::warning Function Notice: Limited Background Support 25 | This function may not work properly if the original element or the border container element has a background applied. 26 | 27 | For best results, avoid setting a background on these elements until improvements are made. 28 | ::: 29 | 30 | ### Example 1 31 | 32 | ```js 33 | import { addThinBorder } from "bordex"; 34 | 35 | // Assuming you have an HTML element to apply the border to 36 | const element = document.getElementById("element"); 37 | 38 | // Adds a thin border to an element. 39 | addThinBorder(element, {}, "element"); 40 | ``` 41 | 42 | ![example border demo](/border-style-images/thin-border-demo.jpg) 43 | 44 | ### Example 2 45 | 46 | ```js 47 | import { addThinBorder } from "bordex"; 48 | 49 | // Assuming you have an HTML element to apply the border to 50 | const element = document.getElementById("element"); 51 | 52 | // Adds a thin border to an element with a specified options. 53 | addThinBorder(element, { side: "horizontal" }, "element"); 54 | ``` 55 | 56 | ![example border demo](/border-style-images/thin-border-demo-options.jpg) 57 | -------------------------------------------------------------------------------- /docs/api/type-definition/interface/border-styles-interfaces.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Border Style Interfaces 3 | --- 4 | 5 | import Table from "../../../../src/components/api-tables"; 6 | 7 | ## `IBlurBorderOptions` Interface 8 | 9 | The `IBlurBorderOptions` interface defines the properties for configuring a blurred border effect. It includes attributes for specifying the border color and border width, just make sure that valid CSS values are used. 10 | 11 | 27 | 28 | ## `IDisjointedBorderOptions` Interface 29 | 30 | The `IDisjointedBorderOptions` interface defines the properties for creating a disjointed border effect. It includes options for specifying the angle and color of the border, just make sure that valid CSS values are used. 31 | 32 |
48 | 49 | ## `IGradientBorderOptions` Interface 50 | 51 | **Extends**: [BorderWidthOptional](../type/border-types/#borderwidthoptional-type) 52 | 53 | The `IGradientBorderOptions` interface defines the properties for creating a gradient border effect. It includes options for specifying the angle and an array of colors that will form the gradient. 54 | 55 |
71 | 72 | ## `IInsetBorderOptions` Interface 73 | 74 | **Extends**: [BorderWidthOptional](../type/border-types/#borderwidthoptional-type) 75 | 76 | The `IInsetBorderOptions` interface defines properties for configuring inset borders. It includes options for specifying the border offset and style. 77 | 78 |
97 | 98 | ## `IStripeBorderOptions` Interface 99 | 100 | **Extends**: [BorderWidthOptional](../type/border-types/#borderwidthoptional-type) 101 | 102 | The `IStripeBorderOptions` interface defines properties for configuring striped borders. It includes options for specifying the width of each stripe and the colors used in the border. 103 | 104 |
120 | 121 | ## `IThinBorder` Interface 122 | 123 | The `IThinBorder` interface defines properties for configuring a thin border. It includes options for specifying the border color, the side on which the border is applied, and its outset. 124 | 125 |
151 | -------------------------------------------------------------------------------- /docs/api/type-definition/interface/border-interfaces.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Border Interfaces" 3 | sidebar_position: 1 4 | --- 5 | 6 | import Table from "../../../../src/components/api-tables"; 7 | 8 | ## `IBorderColor` Interface 9 | 10 | The `IBorderColor` interface defines color properties for each side of a border in a CSS-compatible format. Each property accepts a string representing a valid CSS color value, such as a named color (`"red"`), a hexadecimal color (`"#ff0000"`), or an `rgba` color value (`"rgba(255, 0, 0, 1)"`). 11 | 12 | This interface provides flexibility in setting individual colors for the top, right, bottom, and left borders of an element. You can also set a singl 13 | 14 |
48 | 49 | ## `IBorderWidth` Interface 50 | 51 | The `IBorderWidth` interface defines properties to set the width of each side of a border using valid CSS width values. Each property accepts a string representing any valid CSS width unit, such as pixels (`"1px"`), em units (`"2em"`), or percentages (`"50%"`). 52 | 53 | This interface enables you to define individual border widths for each side top, right, bottom, and left. Additionally, you can use the `borderWidth` property to apply the same width to all four borders. 54 | 55 |
89 | 90 | ## `IBorderStyle` Interface 91 | 92 | The `IBorderStyle` interface defines properties to set the style of each side of a border using predefined border styles. Each property accepts a value from the [CommonBorderStyles](../type/border-types#commonborderstyles-type) type, which includes options like `'solid'`, `'dashed'`, and `'dotted'`. 93 | 94 | This interface allows you to specify individual border styles for each side top, right, bottom, and left. Additionally, you can use the `borderStyle` property to apply the same style to all four borders. 95 | 96 |
145 | 146 | ## `IShortHandBorderOptions` Interface 147 | 148 | The `IBorderOptions` interface defines the attributes for configuring borders in a consistent manner. It includes properties for border width, color, and style, which can be applied to all sides of an element. 149 | 150 |
175 | 176 | ## `IshorthandBorder` Interface 177 | 178 | The `IBorderOptions` interface defines the attributes for configuring borders in a consistent manner. It includes properties for all of the border options. 179 | 180 |
204 | -------------------------------------------------------------------------------- /docs/api/api.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bordex API 3 | 4 | sidebar_position: 1 5 | --- 6 | 7 | import Table from "../../src/components/api-tables"; 8 | 9 | # Bordex Border Styles API 10 | 11 | ## `addBlurBorder()` 12 | 13 | **Returns:** `HTMLElement` - return the HTMLElement passed as the first argument 14 | 15 | **Description**: 16 | 17 | Applies a blur border style to the specified element and returns that element. 18 | 19 |
37 | 38 | ## `addCornerBorder()` 39 | 40 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with a blur border applied. 41 | 42 | **Description**: 43 | 44 | Applies a corner border style to the specified element and returns a new div element that wraps around the original element or the element provided. 45 | 46 |
68 | 69 | ## `addDisjointedBorder()` 70 | 71 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with a blur border applied. 72 | 73 | **Description**: 74 | 75 | Applies a disjointed border style to the specified element and returns a new div element that wraps around the original element or the element provided. 76 | 77 |
99 | 100 | ## `addFancyBorder()` 101 | 102 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with a blur border applied. 103 | 104 | **Description**: 105 | 106 | Applies a faancy border style to the specified element and returns a new div element that wraps around the original element or the element provided. 107 | 108 |
130 | 131 | ## `addGenericBorder()` 132 | 133 | **Returns:** `HTMLElement` - return the HTMLElement passed as the first argument 134 | 135 | **Description**: 136 | 137 | Applies a generic border style to the specified element and returns that element. 138 | 139 |
162 | 163 | ## `addGradientBorder()` 164 | 165 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with a gradient border applied. 166 | 167 | **Description**: 168 | 169 | Applies a gradient border style to the specified element and returns a new div element that wraps around the original element or the element provided. 170 | 171 |
195 | 196 | ## `addInsetBorder()` 197 | 198 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with an inset border applied. 199 | 200 | **Description**: 201 | 202 | Applies an inset border style to the specified element and returns a new div element that wraps around the original element or the element provided. 203 | 204 |
223 | 224 | ## `addOverlapBorder()` 225 | 226 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with an overlap border applied. 227 | 228 | **Description**: 229 | 230 | Applies an overlap border style to the specified element and returns a new div element that wraps around the original element or the element provided. 231 | 232 |
252 | 253 | ## `addStripeBorder()` 254 | 255 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with a stripe border applied. 256 | 257 | **Description**: 258 | 259 | Applies a stripe border style to the specified element and returns a new div element that wraps around the original element or the element provided. 260 | 261 |
282 | 283 | ## `addThinBorder()` 284 | 285 | **Returns:** `HTMLDivElement` - A `div` element that wraps the target element with a thin border applied. 286 | 287 | **Description**: 288 | 289 | Applies a thin border style to the specified element and returns a new div element that wraps around the original element or the element provided. 290 | 291 |
311 | {/* A `div` element that wraps the target element with a blur border applied. */} 312 | --------------------------------------------------------------------------------