DEV Community

Prasoon
Prasoon

Posted on

How to Build a Stylish Website with Spider.css

#webdev #css #programming #beginners

✨ How to Build a Stylish Website with Spider.css

A lightweight, modular CSS + JS framework for fast, stylish websites.

🚀 What is Spider.css?

Spider.css (available as shopisticate-css on NPM) is a custom-built CSS + JS framework focused on beautiful UI, easy-to-use components, and dynamic interactivity.

  • 🎯 Lightweight & fast
  • 🧩 Prebuilt components (buttons, headers, etc.)
  • 🎨 Stylish themes and effects
  • âš¡ JavaScript-powered UI (via Spider.js)
  • 🌐 CDN, NPM, and local linking supported

🔧 3 Easy Ways to Use Spider.css

✅ Option 1: Use via CDN (No install required) 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pjdeveloper896/Spider.css/dist/Spider.css" />
<script src="https://pjdeveloper896.github.io/Spider.css/dist/Spider.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

✅ Option 2: Install via NPM 

npm install shopisticate-css
Enter fullscreen mode Exit fullscreen mode

Then use the files directly in your HTML like this:

<link rel="stylesheet" href="/node_modules/shopisticate-css/dist/Spider.css" />
<script src="/node_modules/shopisticate-css/dist/Spider.js" defer></script>
Enter fullscreen mode Exit fullscreen mode

✅ No bundler required — just use paths from node_modules.

🖼️ Example: Stylish Page with Spider.css 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Spider.css Demo</title>
  <link rel="stylesheet" href="/node_modules/shopisticate-css/dist/Spider.css" />
  <script src="/node_modules/shopisticate-css/dist/Spider.js" defer></script>
</head>
<body class="spider-dark">
  <header class="spider-header">
    <h1>Welcome to Spider.css 🕸️</h1>
    <p>Build stylish UIs with minimal effort</p>
  </header>

  <main>
    <button class="spider-btn primary large">Click Me</button>
    <button class="spider-btn glow danger">Delete</button>
  </main>

  <footer>
    <p>Made with 💖 using Spider.css</p>
  </footer>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🕹️ JavaScript Magic: Create Buttons Dynamically 

spider.button({
  text: "Dynamic Click",
  type: "success",
  size: "large",
  effect: "glow",
  onClick: () => alert("Hello from Spider.css!"),
});
Enter fullscreen mode Exit fullscreen mode

🎨 Button Styles You Can Use

  • Types: primary, secondary, success, danger, warning
  • Sizes: small, medium, large
  • Effects: glow, pulse, hover-zoom 
<button class="spider-btn warning glow large">Warning Glow</button>
Enter fullscreen mode Exit fullscreen mode

🛠️ More Features Coming Soon

  • Cards and layout components
  • Theme switcher (light/dark)
  • Modal system
  • Utility classes
  • Animated forms

🔗 Try It Out Now!

🧠Final Thoughts

Spider.css is perfect if you're building stylish frontends without bloat. It’s great for:

  • Projects where you want a quick UI setup
  • Custom components without Tailwind classes
  • Developers looking to learn framework building

💬 Questions or Feedback?

Share your thoughts in the comments, or reach out on GitHub. I’d love to see what you build with Spider.css!

Top comments (0)