DEV Community

Build a Responsive Website using Svelte in 30 minutes.

Nikhil karkra on December 31, 2019

In This tutorial, we will build a beautiful responsive app in 30 Minutes using svelte. Let's look at the design we are going to build. I have div...
Collapse
 
dealloc profile image
Wannes Gennar

This is not directly related to Svelte; but I'm seeing a trend where websites like this with almost purely static content are written in frontend frameworks like Svelte, Vue, React or Angular while they don't need the overhead.
Websites like this should just be plain HTML files, some CSS sprinkled in and no Javascript.

Collapse
 
theague profile image
Kody James Ague

Would love to know, time taken to build in HTML/css only and what the mobile score would be on a page like that? πŸ‘πŸ»πŸ‘πŸ»

Collapse
 
bigbott profile image
bigbott

It will take less time in case no frameworks used.
It will also requires less qualificated labor.

Framework == high mobile score ? Rubbish. Exactly opposite

Collapse
 
karkranikhil profile image
Nikhil karkra

I agree with you this demo is more of HTML and CSS but Svelte is not a framework or library it's a Compiler. So at the end everything is plain JS.

Collapse
 
rbok6 profile image
Mayckoll Abreu

I agree. I haven't seen the first tutorial who actually makes use of the real benefits of using svelte. Besides from the official docs.

Collapse
 
karkranikhil profile image
Nikhil karkra

I agree Svelte actual use case comes when we have Single page application where i can reuse my components. But with the same demo i can achieve better page speed and SEO. Svelte is a compiler; it compiles components into JavaScript. SO bundle size is very less compare to other lib and frameworks

Collapse
 
wearahelmet profile image
Vern Martin

Thank you for this. I'm just getting started with Svelte, and while I see comments saying this "should" be done in pure HTML and CSS, I needed to see how this much could be done in Svelte and how Svelte components might be organized -- and above all how to add bootstrap!

Collapse
 
karkranikhil profile image
Nikhil karkra

github.com/bestguy/sveltestrap

You can use sveltestrap. I have used the CDN of Bootstrap. You can download the bootstrap and place it under public folder and give the same path in index.html

Collapse
 
peterthompsonnz profile image
Peter Thompson

Thank you for sharing your tutorial. The finished product looks great. I analyzed the completed page, using the link you provided, with Google Pagespeed and found that the mobile score was only 76, and that some easy optimizations could be made.

Collapse
 
karkranikhil profile image
Nikhil karkra

Yeah we can improve this..once I LL get time I LL do it.

Collapse
 
dbshanks profile image
Derek Shanks

Fantastic. This is what I love about Svelte and you showed a great representation of how to use Svelte and its practicality for simpler but truly dynamic and re-usable code.

Svelte truly is a designers toolset and absolutely capable of very complex application logic.

Great job!!

Collapse
 
mjosborne1 profile image
Michael Osborne

I have a question on style for you.
If you wanted to split the 'About' page out onto it's own page, would the route be to a static file in PUBLIC (e.g. about.html) or to another svelte component and how could the Nav bar be reused in that case?

Collapse
 
mjosborne1 profile image
Michael Osborne

If you don't want to load the whole CSS framework, you can load it in with node-sass in your package bundler and use a styles.scss file. Example of that for Bulma is:

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/components/_all.sass";
@import "../node_modules/bulma/sass/elements/_all.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/grid/_all.sass";
@import "../node_modules/bulma/sass/layout/_all.sass";

Collapse
 
igorfilippov3 profile image
Ihor Filippov

If your goal is to slow down browser rendering speed - yes, it is great idea. Instead of loading and rendering static html page browser should load index.html, than load, parse and execute js bundle, and at the end the user will see some content.

It will be much better to apply your vision with sapper and data in json format

Collapse
 
gndx profile image
Oscar Barajas Tavares

Awesome!

Collapse
 
sonyarianto profile image
Sony AK • Edited

wow this is nice and practical, love it.

Collapse
 
sambhavyadavtech profile image
sambhav yadav

Thnaks for the awesome use case. May i know the best backend to be used for login OAuth and payment page? Which will not hamper the svelte speed. Also Can i see nay examples with sveltestrap