Tag - SCSS

Web Components: The Future of Modular UI Design
Frontend-Technology
Web Components: The Future of Modular UI Design
Poojan Gujarati
Jul 26, 2024

Have you ever wanted to create reusable JavaScript building blocks that work in any project, no matter what framework others are using? If so, then Web Components might be the solution you're looking for! This Guide is intended to dive into custom components. Web Components are a collection of tools that expand the web platform. This allows you to define new HTML elements with specific functionality and behavior. There’s a lot to think about, and writing a component can require a lot of boilerplate code. Fortunately, some great libraries can make creating custom elements more straightforward, and save you a lot of time and effort. However, if you’re writing lots and lots of custom elements, using a library can make your code simpler and cleaner, and your workflow more efficient. What are the Web Components? That allows developers to create custom, reusable, encapsulated HTML elements. Custom Elements: Enables the creation of new HTML tags. Shadow DOM: Provides encapsulation for custom elements, ensuring that their internal structure and styles do not interfere with the rest of the document. HTML Templates: Allows the definition of HTML templates that can be reused and instantiated in custom elements. Note: The name of a Web Component needs to contain a dash (-). This naming convention is put into place to enable the HTML parser to distinguish custom from regular elements and also avoid creating your own components that could be added as part of future HTML standards. <mycard></mycard>, <card></card> or <CardComponent></CardComponent> are all invalid names, while <my-card></my-card> is allowed.   Why Web Components? Web components allow us to take our frontend widgets off this cycle of getting rebuilt in the newest framework flavor Reuse is King: Ever build the same button style ten times? With Web Components, you define a button component once and use it everywhere! Framework Freedom: No more framework lock-in! Web Components work seamlessly with vanilla JavaScript, React, Angular, or any framework you choose. Encapsulation Power: Components keep their styles and functionality isolated, preventing conflicts and promoting cleaner code. To define a new custom element using the v1 implementation, you simply create a new class that extends HTMLElement using ES6 syntax and register it with the browser:   class MyElement extends HTMLElement {...} window.customElements.define('my-element, MyElement); //example usage in your app: <my-element></my-element> NOTE: Only Chrome V67 and up supports customized built-in elements! Let's Jump over the example, Building with LitElement. Certainly! Below is an example of a toggle switch web component using Lit. This example includes the essential parts: defining the component, its styles, and its template. Code Snippets for User Template:   // component's template render() { return html` <label class="switch"> <input type="checkbox" .checked="${this.checked}" @change="${this._toggle}"> <span class="slider"></span> </label> `; } // Method handler. // The toggle handler public _toggle(event): void { this.checked = event.target.checked; this.dispatchEvent(new CustomEvent('toggle', { detail: this.checked })); } Explanation: We import LitElement and the html function for templating. We define a AppToggle class that extends LitElement. We set the name property to accept a string value. The render method defines how the component looks using LitElement's HTML-like syntax. Finally, we register the app-toggle custom element.   Now, you can use your app-toggle component anywhere in your HTML: <div style="display: block; padding:200px"> <app-toggle name="toggle" checked="true"></app-toggle> <app-toggle name="World"></app-toggle> </div> The Future is Modular! Web Components offer a powerful and versatile approach to building user interfaces. With Reusability, framework independence, and clear separation of concerns, they are poised to be a significant force in the future of web development. So, start building your UI block party with Web Components today! I have included a screenshot below from WebComponents.org that shows the current browser support - a really nice community guide worth checking out and adding to your Bookmarks: Conclusion In this article, you took your first step into the world of web components. Web components have no third-party dependencies, so using them won't have a big impact on your bundle size. But for more complex components, you may want to reach for a library like Svelte or Lit.    

Read More
CSS vs SCSS: Key Differences & Examples
Web-Design
CSS vs SCSS: Key Differences & Examples
Bijal Bhavsar
Feb 01, 2024

What is CSS?  CSS stands for Cascading Style Sheet. We can use it as a scripting language for developing and creating different web pages.It is well like web technology mostly used with HTML and JavaScript. CSS styles are saved in separate files with the .css extension. It is designed to separate content and presentation, like Layout, fonts, and colors.  By separating the content (HTML) from its presentation(CSS), web developers can create consistent and visually appealing designs across multiple pages and ensure a better experience.   What is SCSS? SCSS stands for sassy Cascading Style Sheets. It is a more advanced and evolved variant of the CSS language.It adds additional functionality to CSS and gives web developers more flexibility and power when creating web designs.SCSS contains file extension as .scss. SCSS is a part of the larger Sass (syntactically Awesome Stylesheets) language, which was created to explore the capabilities of traditional CSS. We can add some extra features to CSS using SCSS, like Variables, Nesting, and many more. using these features, we can write the SCSS in a much simpler and quicker way than writing the standard CSS.    Differences between CSS and SCSS: 1. Syntax: Plain text is used for CSS whereas more structured syntax with additional features is used for SCSS. 2. Variables: SCSS allows you to define variables to store commonly used values like font sizes, color, and spacing, whereas CSS does not. CSS example: body{ color: #ffffff; font: $section-font: 'Arial','sans-serif'; font-size: xx-large; padding: 2rem; } SCSS example: $white: #ffffff; $section-font: $section-font: 'Arial', sans-serif; body { color: $white; font: $section-font; font-size: xx-large; padding: 2rem; }   3. Nesting: SCSS language promotes rules that are properly nested whereas regular CSS language does not assign various nested rules. SCSS example: .parent-selector { .child-selector { // Styles for child selector } } .container { width: 100%; h1 { color: blue; font-size: 24px; } } Benefits of Using Nesting in SCSS: 1. Improved Readability: Nesting allows for more organized code structure, making it easier to read and understand the styles. 2. Reduced Repetition: The user can avoid repetitive code by addressing parent elements directly, saving time and effort. 4. Mixins: Mixins are like functions in programming languages, SCSS allows to creation and reuse of code snippets using mixins. CSS example: nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { display: inline-block; margin-left: -2px; margin-right: 2em; } SCSS example: @mixin reset-list { margin: 0; padding: 0; list-style: none; } @mixin vertical-list { @include reset-list; li { display: inline-block; margin: { left: -2px; right: 2em; } } } nav ul { @include vertical-list; } Arguments: Mixins can also take arguments, which allows their behavior to be customized every time they are called. The arguments are specified in the @mixin rule after the mixin's name, as a list of variable names surrounded by parentheses. CSS example: .sidebar { float: left; } [dir=rtl] .sidebar { float: right; } SCSS example: @mixin rtl($property, $ltr-value, $rtl-value) { #{$property}: $ltr-value; [dir=rtl] & { #{$property}: $rtl-value; } } .sidebar { @include rtl(float, left, right); } 5. File Extension: CSS files use the .css file extension, whereas SCSS files use the .scss file extension. 6. Compilation: CSS files are interpreted by web browsers directly, whereas SCSS files must be preprocessed into standard CSS files using a preprocessor such as Sass. 7. Language Used: SCSS is mostly used in the Ruby language while CSS is mostly used in the HTML and JavaScript languages.

Read More
magnusminds website loader