Styling in svelte

#beginners #svelte #tutorial

Introduction

Svelte is a free and open-source front-end compiler created by Rich Harris.

The first release was in November 2016. Version 3.0.0 is currently in use, and it was released in April 2019. That year, it grew in popularity among developers.

Svelte is used to create reactive web apps and interfaces, which means that changes are visible immediately, similar to react.js or vue.js. It is popular among developers due to its ease of use and high performance.

Perquisites

To follow along with this article :

Have a good knowledge of JavaScript or libraries like React.js
Install node.js on your system.

styling in svelte

Styling in svelte is different unlike in React, where we have the styling components* index.css or app.css file*. In svelte, styling is found right inside the file component.

A single file component consists of the Script Tag, Html Tag and Style Tag



<script>

</script>

<main>

</main>

<style>

</style>

Styling in svelte is in 3 ways

Global style: The global style applies to all the different components (pages) we have in our project. It is like a universal style sheet. As we build svelte applications in our CMD (command line), these global style sheets are generated for us. It is found under the public folder of our application.

The marked area shows global.css which is created by default

By default, these global styles come with already pre-made CSS.styles which were generated during the build-up of the svelte application. It is your choice to keep the styles or delete them.

Pre-Made Css-Style



HTML, body {
    position: relative;
    width: 100%;
    height: 100%;
}

body {
    color: #333;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

Component-specific styles: These styles are component-based, which means they are applied to a specific component rather than being applied to all the components in the application(general).

The picture above it shows the differences between the two style-sheet

Result from component-specific style

Conditional Style or Advance style: This is the addition of a style based on a certain condition, i.e., the value is either true or false.

For example changing the background-color of the modal using conditional class.

Initially set the modal background-color to true.
For it to gain the background-color purple we will give it a class called isModal **and set it to **false .

Code



<script>
 let modal = true;
 let isModal = false;
</script>

{#if modal}
 <div class="bg-cover" class:bg-modal={isModal}>
 <div class="modal" >
 <p>This is a modal!</p>
 </div>
 </div>
{/if}

<style>
 .bg-cover{
 width:100%;
 height: 100%;
 position: fixed;
 background-color: cyan;
 }

 .modal {
 padding: 10px;
 border-radius: 10px;
 max-width: 400px;
 margin: 10% auto;
 text-align: center;
 background: purple;
 color: white;
 }
.bg-modal .modal {
 background-color: orange;
 color: white;
 }
</style>

Result when set to false

To change the background-color of the modal to get another background-color:

Set the class isModal to** true**.

Code



<script>
 let modal = true;
 let isModal = true;
</script>

{#if modal}
 <div class="bg-cover" class:bg-modal={isModal}>
 <div class="modal" >
 <p>This is a modal!</p>
 </div>
 </div>
{/if}

<style>
 .bg-cover{
 width:100%;
 height: 100%;
 position: fixed;
 background-color: cyan;
 }

 .modal {
 padding: 10px;
 border-radius: 10px;
 max-width: 400px;
 margin: 10% auto;
 text-align: center;
 background: purple;
 color: white;
 }
 .bg-modal .modal {
 background-color: orange;
 color: white;
 }
</style>

Result when set to true