aradotso LaunchKit Dev Tool Landing Template
Skill by ara.so — Devtools Skills collection.
LaunchKit is a free, ready-to-deploy HTML landing page template specifically designed for developer tools and open source products. It's a static HTML/CSS/JS template that requires no build process and can be deployed immediately to any static hosting service.
Installation
Clone the repository:
git clone https://github.com/evilmartians/devtool-template.git my-landing-page
cd my-landing-page
Or use it as a GitHub template by clicking "Use this template" on the repository page.
Project Structure
├── index.html # Main landing page
├── index.css # Styles and CSS variables
├── index.js # Interactive components
├── images/ # Image assets
└── fonts/ # Custom fonts
Quick Start
- Choose your blocks: Edit
index.htmland remove sections you don't need - Replace content: Update all placeholder text with your product copy
- Add images: Upload your images to the
images/folder - Configure buttons: Update href attributes and add tracking
- Deploy: Upload to any static hosting
Theme Customization
Light/Dark Mode
Add the theme-dark class to the <html> element for dark theme:
<!-- Light theme (default) -->
<html lang="en">
<!-- Dark theme -->
<html lang="en" class="theme-dark">
Color Palette Customization
Edit the CSS variables in index.css:
:root {
/* Primary brand color */
--color-primary-h: 210;
--color-primary-s: 100%;
--color-primary-l: 50%;
/* Accent color */
--color-accent-h: 350;
--color-accent-s: 100%;
--color-accent-l: 60%;
/* Background */
--color-bg: #ffffff;
--color-bg-secondary: #f5f5f5;
/* Text */
--color-text: #1a1a1a;
--color-text-secondary: #666666;
}
.theme-dark {
--color-bg: #1a1a1a;
--color-bg-secondary: #2a2a2a;
--color-text: #ffffff;
--color-text-secondary: #cccccc;
}
Use the color theme tool to generate matching light/dark palettes.
Common HTML Patterns
Hero Section
<section class="hero">
<div class="container">
<h1 class="hero__title">Your Dev Tool Name</h1>
<p class="hero__description">
A brief, compelling description of what your tool does
</p>
<div class="hero__cta">
<a href="#get-started" class="button button--primary">Get Started</a>
<a href="https://github.com/yourname/repo" class="button button--secondary">
View on GitHub
</a>
</div>
</div>
</section>
Features Grid
<section class="features">
<div class="container">
<h2 class="section__title">Key Features</h2>
<div class="features__grid">
<div class="feature">
<div class="feature__icon">🚀</div>
<h3 class="feature__title">Fast Setup</h3>
<p class="feature__description">Get started in minutes</p>
</div>
<div class="feature">
<div class="feature__icon">🔧</div>
<h3 class="feature__title">Easy Configuration</h3>
<p class="feature__description">Minimal config required</p>
</div>
</div>
</div>
</section>
Code Example Block
<section class="code-example">
<div class="container">
<h2 class="section__title">Quick Start</h2>
<pre class="code-block"><code>npm install your-tool
npx your-tool init
your-tool run</code></pre>
</div>
</section>
CTA Section
<section class="cta">
<div class="container">
<h2 class="cta__title">Ready to get started?</h2>
<p class="cta__description">Join thousands of developers using this tool</p>
<a href="#signup" class="button button--large button--primary">
Start Free Trial
</a>
</div>
</section>
JavaScript Interactivity
Add interactive elements in index.js:
// Mobile menu toggle
const menuButton = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');
menuButton?.addEventListener('click', () => {
nav.classList.toggle('nav--open');
});
// Smooth scroll to anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
target?.scrollIntoView({ behavior: 'smooth' });
});
});
// Track CTA clicks
document.querySelectorAll('.button--primary').forEach(button => {
button.addEventListener('click', () => {
// Analytics tracking
if (window.gtag) {
gtag('event', 'cta_click', {
'button_text': button.textContent
});
}
});
});
Adding Analytics
Add Google Analytics or Plausible to index.html:
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
<!-- Or Plausible -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>
Replace GA_MEASUREMENT_ID with your actual ID (use environment variables in your build process).
Deployment
GitHub Pages
- Push your code to GitHub
- Go to Settings → Pages
- Select branch (usually
main) and/(root) - Your site will be live at
https://username.github.io/repo-name
Netlify
# Install Netlify CLI
npm install -g netlify-cli
# Deploy
netlify deploy --prod
Or connect your GitHub repo in the Netlify dashboard.
Vercel
# Install Vercel CLI
npm install -g vercel
# Deploy
vercel --prod
Custom Server
Upload all files to your web server's public directory via FTP/SFTP:
# Using rsync
rsync -avz --exclude '.git' ./ user@yourserver.com:/var/www/html/
Responsive Design
The template is mobile-first. Breakpoints are defined in index.css:
/* Mobile: default styles */
.container {
padding: 0 16px;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
padding: 0 32px;
}
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
Image Optimization
Optimize images before uploading:
# Using ImageOptim CLI (macOS)
imageoptim images/**/*.{jpg,png}
# Using imagemin
npx imagemin images/*.{jpg,png} --out-dir=images/optimized
Use WebP format for better compression:
<picture>
<source srcset="images/hero.webp" type="image/webp">
<img src="images/hero.jpg" alt="Hero image">
</picture>
SEO Configuration
Update meta tags in index.html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Dev Tool - Tagline</title>
<meta name="description" content="Your concise product description for search results">
<!-- Open Graph -->
<meta property="og:title" content="Your Dev Tool">
<meta property="og:description" content="Your product description">
<meta property="og:image" content="https://yourdomain.com/images/og-image.jpg">
<meta property="og:url" content="https://yourdomain.com">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Dev Tool">
<meta name="twitter:description" content="Your product description">
<meta name="twitter:image" content="https://yourdomain.com/images/twitter-card.jpg">
</head>
Troubleshooting
CSS not loading
- Ensure
index.cssis in the same directory asindex.html - Check the path in
<link rel="stylesheet" href="index.css"> - Clear browser cache
Dark theme not applying
- Verify the
theme-darkclass is on the<html>element, not<body> - Check that CSS variables are defined for both
:rootand.theme-dark
Images not displaying
- Verify image paths are relative:
images/photo.jpgnot/images/photo.jpg - Check image file names match case-sensitive references
- Ensure images are committed to the repository
Mobile menu not working
- Verify
index.jsis loaded before</body>closes - Check console for JavaScript errors
- Ensure menu toggle button has correct class name
Fonts not loading
- Host fonts locally in the
fonts/directory - Use
@font-facedeclarations in CSS - Avoid relying on external CDNs for production
Best Practices
- Keep it simple: Remove unused sections to maintain fast load times
- Optimize images: Use WebP format and lazy loading
- Test responsiveness: Check on multiple devices and screen sizes
- Validate HTML: Use W3C validator to catch errors
- Add structured data: Include JSON-LD for better SEO
- Monitor performance: Use Lighthouse to maintain high scores
- Version control: Commit changes incrementally with clear messages