Getting Started
Foundations
Components
Search for a command to run...
This guide will help you migrate from the legacy CDN URL to the new cdn.strongtie.io CDN infrastructure.
| Item | Old (Legacy) | New (CDN) |
|---|---|---|
| Base URL | https://www.strongtie.com/studs/ | https://cdn.strongtie.io/ |
| File Name | studs-ui-kit.css | ui-kit.css |
| Font Path | https://www.strongtie.com/studs/font/ | https://cdn.strongtie.io/fonts/ |
| UI Kit Path | /studs/v2.5.4/studs-ui-kit.css | /ui-kit/v2.5.4/ui-kit.css |
| Styles Path | N/A | /styles/latest/all.css |
| Current Path | /studs/current-2.5/studs-ui-kit.css | /ui-kit/latest/ui-kit.css |
The new cdn.strongtie.io infrastructure provides:
Update all <link> tags that reference the old CDN to use the new CDN URLs.
<!-- Version-specific -->
<link
rel="stylesheet"
href="https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css"
/>
<!-- Current/Latest -->
<link
rel="stylesheet"
href="https://www.strongtie.com/studs/current-2.5/studs-ui-kit.css"
/><!-- Version-specific Telerik UI Kit -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"
/>
<!-- Latest Telerik UI Kit version -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>
<!-- Or use modular Design System styles -->
<link rel="stylesheet" href="https://cdn.strongtie.io/styles/latest/all.css" />If you're loading fonts directly from the CDN, update those URLs as well.
<link
rel="stylesheet"
href="https://www.strongtie.com/studs/font/helvetica-now.css"
/>@font-face {
font-family: "Helvetica Now";
src: url("https://www.strongtie.com/studs/font/HelveticaNow-Regular.woff2")
format("woff2");
}<link
rel="stylesheet"
href="https://cdn.strongtie.io/fonts/helvetica-now.css"
/>@font-face {
font-family: "Helvetica Now";
src: url("https://cdn.strongtie.io/fonts/HelveticaNow-Regular.woff2")
format("woff2");
}If you have documentation or download pages that link to CDN resources, update those as well.
<a href="https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css" download>
Download CSS
</a><a href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css" download>
Download CSS
</a>If you're importing CDN URLs in JavaScript or CSS files, update those references.
// JavaScript
const stylesheetUrl = "https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css"/* CSS */
@import url("https://www.strongtie.com/studs/v2.5.4/studs-ui-kit.css");// JavaScript
const stylesheetUrl = "https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"/* CSS */
@import url("https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css");After updating all references:
Clear your browser cache:
Ctrl/Cmd + Shift + DeleteCtrl/Cmd + Shift + DeleteCmd + Option + ETest your application:
Use browser DevTools to verify:
Open DevTools → Network tab → Filter by CSS
Reload the page and confirm requests go to cdn.strongtie.io
Use your code editor's find-and-replace feature to update all references:
Find: https://www.strongtie.com/studs/
Replace: https://cdn.strongtie.io/ui-kit/
Find: studs-ui-kit.css
Replace: ui-kit.css
Find: ui-kit/current-2.5/ui-kit.css
Replace: ui-kit/latest/ui-kit.css
# Update base URL for UI Kit
find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" -o -name "*.jsx" -o -name "*.tsx" \) \
-exec sed -i '' 's|https://www.strongtie.com/studs/|https://cdn.strongtie.io/ui-kit/|g' {} +
# Update file name
find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" -o -name "*.jsx" -o -name "*.tsx" \) \
-exec sed -i '' 's|studs-ui-kit\.css|ui-kit.css|g' {} +
# Update current path to latest
find . -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" -o -name "*.jsx" -o -name "*.tsx" \) \
-exec sed -i '' 's|ui-kit/current-2\.5/ui-kit\.css|ui-kit/latest/ui-kit.css|g' {} +# Update base URL
Get-ChildItem -Recurse -Include *.html,*.css,*.js,*.jsx,*.tsx |
ForEach-Object {
(Get-Content $_.FullName) -replace 'https://www\.strongtie\.com/studs/', 'https://cdn.strongtie.io/ui-kit/' |
Set-Content $_.FullName
}
# Update file name
Get-ChildItem -Recurse -Include *.html,*.css,*.js,*.jsx,*.tsx |
ForEach-Object {
(Get-Content $_.FullName) -replace 'studs-ui-kit\.css', 'ui-kit.css' |
Set-Content $_.FullName
}
# Update current path to latest
Get-ChildItem -Recurse -Include *.html,*.css,*.js,*.jsx,*.tsx |
ForEach-Object {
(Get-Content $_.FullName) -replace 'ui-kit/current-2\.5/ui-kit\.css', 'ui-kit/latest/ui-kit.css' |
Set-Content $_.FullName
}latest or a Specific Version?Use latest when:
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>Use a specific version when:
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"
/>Recommendation: Use specific versions in production to avoid unexpected styling changes. Test new versions in a staging environment before updating.
The new CDN provides access to multiple resources organized into different paths:
<!-- All UI Kit styles in one file (recommended for most projects) -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>
<!-- Or use a specific version -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/v2.5.4/ui-kit.css"
/><!-- All styles combined -->
<link rel="stylesheet" href="https://cdn.strongtie.io/styles/latest/all.css" />
<!-- Or load individual modules -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/styles/latest/tokens.css"
/>
<link
rel="stylesheet"
href="https://cdn.strongtie.io/styles/latest/fonts.css"
/>
<link
rel="stylesheet"
href="https://cdn.strongtie.io/styles/latest/components.css"
/>
<link
rel="stylesheet"
href="https://cdn.strongtie.io/styles/latest/reset.css"
/>You can also add fonts to your application by including the fonts.css file
from the modular design system styles.
<!-- Font stylesheet with @font-face declarations -->
<link
rel="stylesheet"
href="https://cdn.strongtie.io/fonts/helvetica-now.css"
/>Direct font file access:
https://cdn.strongtie.io/fonts/HelveticaNow-Regular.woff2https://cdn.strongtie.io/fonts/HelveticaNow-Medium.woff2https://cdn.strongtie.io/fonts/HelveticaNow-Bold.woff2Problem: Page loads but styles are missing or broken.
Solution:
https://cdn.strongtie.io/ui-kit/latest/ui-kit.cssProblem: Text appears in fallback fonts instead of Helvetica Now.
Solution:
Verify the font CSS is loading:
<link
rel="stylesheet"
href="https://cdn.strongtie.io/fonts/helvetica-now.css"
/>Check browser DevTools Network tab for font file requests
Ensure font files aren't being blocked by CORS or CSP policies
Problem: Browser shows "Mixed Content" warnings.
Solution:
https:// (not http://)Problem: Changes aren't appearing even after updating URLs.
Solution:
Ctrl/Cmd + Shift + RProblem: Specific version URL returns 404 error.
Solution:
Verify the version number exists. Available versions:
Use latest instead of a specific version:
<link
rel="stylesheet"
href="https://cdn.strongtie.io/ui-kit/latest/ui-kit.css"
/>Check the Resources page for available versions
If you use Content Security Policy headers, you'll need to allow the new CDN domain.
Content-Security-Policy:
style-src 'self' https://cdn.strongtie.io;
font-src 'self' https://cdn.strongtie.io;
<meta
http-equiv="Content-Security-Policy"
content="style-src 'self' https://cdn.strongtie.io; font-src 'self' https://cdn.strongtie.io;"
/>The old CDN URLs (https://www.strongtie.com/studs/) will continue to work for the foreseeable future, but we strongly encourage migrating to the new CDN as soon as possible.
If you encounter any issues during migration: