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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
Would love to know, time taken to build in HTML/css only and what the mobile score would be on a page like that? 👍🏻👍🏻
It will take less time in case no frameworks used.
It will also requires less qualificated labor.
Framework == high mobile score ? Rubbish. Exactly opposite
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.
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.
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
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!
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
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.
Yeah we can improve this..once I LL get time I LL do it.
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!!
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?
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";
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
Awesome!
wow this is nice and practical, love it.
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