How to use Bootstrap in Svelte apps (using CDN)

 Bootstrap is one of most used CSS/Sass framework nowadays, even though the bundle size is larger than that of TailwindCSS. So how do we use Bootstrap in Svelte and Svelte kit. Importing the CDN link from the entry point would be an ideal approach.SvelteIn Svelte apps we can use the app.svelte to import the Link and scripts. Svelte provides svelte:head component for including external links...

Read More

Configure TailwindCSS in Svelte Kit

 TailwindCSS can be configured in Svelte Kit. Install the dependencies first 🤜. npm install -D tailwindcss postcss autoprefixer svelte-preprocess npx tailwindcss init tailwind.config.cjs -p   Configure the the Tailwind config content key with the following //tailwind.config.cjs content: ['./src/**/*.{html,js,svelte,ts}'],  Create app.css file and import Tailwind classes...

Read More

How to create a component in Svelte

 Components are basic building block in a Svelte app. A Svelte component cane made of simple HTML statements , styles, scripts etc.Property, ReactivityThere can be only one top level script in a component. Here is a Quick example. //src/components/Message.svelte<script> export let message="Hi";</script> <h1>{message}<h1>Property can be defined using a reactive assignment...

Read More

Configure Sass in Svelte Kit

 Sass is the most mature, stable, and powerful professional grade CSS extension language. Svelte simplify the use of Sass.  In order to use Sass or scss in Svelte app we have to use the preprocess.First up all install the node dependencies and sass.npm i --save-dev bootstrap node-sass svelte-preprocessIn our project locate the  svelte.config.js and import the svelte preprocess...

Read More

How to include external CSS and Scripts in Svelte

 One of the problem I was faced in Reactjs and Vue is linking external style sheets and script from CDN which may require special approach.  In Svelte we can include the CSS and Script using the dedicated <svelte:head> tag.<svelte:head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" ...></svelte:head>Sometimes...

Read More

How to create a Svelte app

 Svelte is a Javascript Framework for create web app. We can create a Svelte web app using Svelte Kit. The prerequisites required are Nodejs should be installed on development machineWeb browserCode editor , (VS Code recommended)Create a project After setting up the Node and npm package manager you can create new project using the following npm create svelte@latest my-app cd my-app npm...

Read More

Svelte, a compiler based Javascript framework

 Svelte is one of the Javascript Frame work , most loved by the developer community. It is little bit different from React, Vuejs and Angular. Unlike React Svelte uses a compiler to generate bundles,  as result of this when user launches the app, it run faster, and bundle size will be minimal. 🚀  Learning curveLearning Svelte is not so hard, it is just another language. Documentation...

Read More