CDN libraries for design and prototyping

Search

Internal libraries

wsbc.css

wsbc.css is a foundational bootstrap-based CSS framework that enhances web development with responsive and mobile-first design. It provides a wide range of pre-styled components, grids, and utilities, enabling designers and developers to create visually appealing, accessible and consistent user interfaces across different devices.



<!--GLOBAL CSS UX LIBRARY Bootstrap 5.2 version-->
<link rel="stylesheet" href="https://ux.online.worksafebc.com/latest/bs5/wsbc.css">



<!--GLOBAL CSS UX LIBRARY Bootstrap 5.2 version DEV -->
<link rel="stylesheet" href="https://ux-static.online.worksafebc.com/css/wsbc.css">



<!--GLOBAL CSS UX LIBRARY Bootstrap 4.6 version CDN -->
<link rel="stylesheet" href="https://ux.online.worksafebc.com/latest/wsbc.css">



<!--GLOBAL CSS UX LIBRARY Bootstrap 4.6 version - from  DEMOS CDN -->
<link rel="stylesheet" href="https://ux-demo.online.dv.worksafebc.com/UXLIBRARY-BS4/wsbc.css">



<!--Alternative Open source - Bootstrap 4.6 version-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dolius/uilib/orangy/orangy-bs4.css">

wsbc.js

wsbc.js is a micro library that complements the wsbc.css library, making it easier to create responsive, mobile-first web applications. It powers a collection of dynamic components that are part of WorkSafeBC design system.



<!--WSBC Javascript-->
<script src="https://ux-static.online.worksafebc.com/js/wsbc.js"></script>

WSBC fonts

By leveraging the power of a CDN, you can seamlessly incorporate halis (WorkSafeBC) fonts into your websites or applications without the need for local installation.



/*GENERAL FONTS */
@font-face {
font-family: halis;
src: url(../css/assets/fonts/halis-regular.otf);
}
@font-face {
font-family: halis-bold;
src: url(../css/assets/fonts/halis-bold.otf);
font-weight: bold;
}
/*BRANDED FONT: HALIS WORKSAFE;
*/
@font-face {
font-family: halisws-bold;
src: url(https://ux-static.online.worksafebc.com/css/assets/fonts/worksafebchalisrbold-webfont.eot);
}
@font-face {
font-family: halisws-medium;
src: url(https://ux-static.online.worksafebc.com/css/assets/fonts/worksafebchalisrmedium-webfont.eot);
}
@font-face {
font-family: halisws;
src: url(https://ux-static.online.worksafebc.com/css/assets/fonts/worksafebchalisrregular-webfont.eot);
}
@font-face {
font-family: halisws-bold;
src: url(https://ux-static.online.worksafebc.com/css/assets/fonts/worksafebchalisrbold-webfont.eot);
}
@font-face {
font-family: halisws-bold;
src: url(https://ux-static.online.worksafebc.com/css/assets/fonts/worksafebchalisrbold-webfont.woff);
}
@font-face {
font-family: halisws-medium;
src: url(https://ux-static.online.worksafebc.com/css/assets/fonts/worksafebchalisrmedium-webfont.woff);
}
@font-face {
font-family: halisws;
src: url(https://ux-static.online.worksafebc.com/css/assets/fonts/worksafebchalisrregular-webfont.woff);
}

Mobile Safe

MobileSafe is a cutting-edge micro library designed to create adaptive, mobile-only components with a focus on utilizing Bootstrap's foundation. It empowers developers with a versatile set of mobile UI elements, all while maintaining Bootstrap's ease of use and component-based architecture.



<!--WSBC MOBILESAFE CSS-->
<link rel="stylesheet" href="https://ux-static.online.dv.worksafebc.com/mobilesafe/wsbc-mobile.css">

External libraries used in WorkSafeBC

Font Awesome

Font Awesome is a widely used icon library that offers a vast collection of scalable vector icons, accessible through CSS classes, providing developers with a seamless way to enhance the visual appeal of web applications.



<!--FONT AWESOME 4.7-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Bootstrap.js

Bootstrap.js is a popular JavaScript library that complements the Bootstrap framework, making it easier to create responsive, mobile-first web applications. It provides a collection of dynamic components, such as dropdowns, modals, and carousels, along with interactive features like tooltips and popovers. By seamlessly integrating with Bootstrap's CSS, Bootstrap.js empowers developers to build attractive and functional user interfaces with minimal effort.



<!-- Bootstrap 4.6 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>



<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap 5 JS (Popper.js is required for certain components) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

Jquery

jQuery is a lightweight and fast JavaScript library designed to simplify DOM manipulation and event handling. It offers a wide range of useful functions that streamline common tasks like selecting elements, animating elements, making AJAX requests, and handling events. As a cross-browser compatible library, jQuery has been instrumental in creating interactive and dynamic web applications with a concise and intuitive syntax.



<!--JQUERY 3.6-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Am charts

AmCharts is a powerful JavaScript library that simplifies the creation of visually stunning and interactive charts, graphs, and maps for web applications. With an easy-to-use API, it offers a wide range of chart types and customization options, making it a popular choice for data visualization and analysis.



<!--AMCHARTS 4 -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

Quills.js

Quill.js is a feature-rich JavaScript library for embedding a powerful WYSIWYG editor into web applications. With its modular architecture and customizable API, developers can effortlessly integrate a rich text editor that supports formatting, media embedding, and real-time collaboration, enhancing the user experience for content creation.



<!-- quill html editor -->
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet" />
<!-- <link href="//cdn.quilljs.com/1.3.7/quill.core.css" rel="stylesheet" /> -->
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>

charts.js

Chart.js is a versatile and user-friendly JavaScript library for creating responsive and visually appealing charts and graphs. It provides a wide variety of customizable chart types, from bar and line charts to pie and radar charts, making it an ideal choice for data visualization and data-driven web applications.



<!-- CHARTS JS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.js"></script>

Autocomplete.js

Autocomplete.js is a JavaScript library that simplifies the implementation of interactive autocomplete functionality in web forms. With support for various data sources and customizable behavior, developers can easily enhance user experience by providing real-time suggestions and filtering options as users type, improving data input efficiency.



ADDCODECOMPILEDHERE

prism.js

Prism.js is a lightweight and extensible JavaScript library for syntax highlighting in code blocks. It supports a wide range of programming languages and styles, making it easy for developers to display beautifully formatted code snippets on their websites.



<!--PRISM JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<!--PRISM WSBC Theme-->
<link rel="stylesheet" href="https://wsdvuxstatic.blob.core.windows.net/demos/CDN/css/prism.css">



<!--PRISM Synthwave Theme-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.5.0/prism-synthwave84.min.css" integrity="sha512-kKKIzqvMkAVKf4rkc2g/T+PM+QWgLttDiL8SJ+k8Q/v9H+hJdcZ7KnD4Cq6TXL/eJy7h33OzfRagQiXDKC4Fmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

animate.css

Animate.css is a popular CSS animation library that enables developers to add stunning and predefined animations to HTML elements with minimal effort. With a simple-to-use class-based approach, it enhances the visual appeal and interactivity of web pages without the need for complex JavaScript code.



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Popper js

Popper.js is a robust JavaScript library that facilitates positioning and pop-up behavior for tooltips, popovers, and dropdown menus. As a fundamental part of modern UI frameworks, it ensures accurate element positioning relative to reference elements in dynamic web applications.



<!--POPPER JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

Jquery popover js

jQuery Popover.js is a lightweight jQuery plugin that simplifies the creation of customizable popovers, offering interactive tooltips, modals, and pop-up content. Ideal for enhancing user experience and providing context-sensitive information in web applications.



<!--Jquery PopOver -->
<!-- -->
<script src="https://rawgithub.com/padolsey/jQuery-Plugins/master/sortElements/jquery.sortElements.js"></script>
<script src="https://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.js"></script>