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.
Timeline:
If you encounter any issues during migration:
Use this checklist to track your migration progress:
<link> tags to new CDN URLsstuds-ui-kit.css with ui-kit.css/studs/ to /ui-kit/current-2.5 paths to latestOnce you've completed all the steps above, you're successfully migrated to the new cdn.strongtie.io CDN!
Your application will now benefit from improved performance, reliability, and access to future enhancements. Thank you for updating to our new CDN infrastructure.