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 :
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
Conclusion
Svelte offers three ways to manage CSS styles: Global style, Component specific or Advance style, and Conditional style.
Resource
To improve your understanding of svelte or want to learn these are some of the resources that can help.
To help manage your time best download this visual studio code extension Svelte for VS Code.
Thanks for Reading
Top comments (1)
you have done great effort. its really valuable information . Kamakhya devi vashikaran totke