Joseph Murray

Joseph Murray

1661503140

Svelte Implementation Of The Carbon Design System

carbon-components-svelte

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.

Design systems facilitate design and development through reuse, consistency, and extensibility.

The Carbon Svelte portfolio also includes:

Installation

Install carbon-components-svelte as a development dependency.

A minimum Svelte version of 3.48.0 is required to use this library.

# Yarn
yarn add -D carbon-components-svelte

# npm
npm i -D carbon-components-svelte

# pnpm
pnpm i -D carbon-components-svelte

Usage

Styling

Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).

  • white.css: Default Carbon theme (light)
  • g10.css: Gray 10 theme (light)
  • g80.css: Gray 80 theme (dark)
  • g90.css: Gray 90 theme (dark)
  • g100.css: Gray 100 theme (dark)
  • all.css: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables

Each StyleSheet is generated from the flagship carbon-components library.

The compiled CSS is generated from the following .scss files:

CSS StyleSheet

// White theme
import "carbon-components-svelte/css/white.css";

// Gray 10 theme
import "carbon-components-svelte/css/g10.css";

// Gray 80 theme
import "carbon-components-svelte/css/g80.css";

// Gray 90 theme
import "carbon-components-svelte/css/g90.css";

// Gray 100 theme
import "carbon-components-svelte/css/g100.css";

// All themes
import "carbon-components-svelte/css/all.css";

CDN

An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like unpkg.com.

This is best suited for rapid prototyping.

HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/carbon-components-svelte/css/white.css"
    />
  </head>
</html>

svelte:head

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/carbon-components-svelte/css/white.css"
  />
</svelte:head>

SCSS

The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.

Refer to the official Carbon guide on SASS for documentation.

Dynamic theming

Use the "all.css" StyleSheet for dynamic, client-side theming.

import "carbon-components-svelte/css/all.css";

Update the theme by setting the theme attribute on the html element. The default theme is "white".

<!DOCTYPE html>
<html lang="en" theme="g10">
  <body>
    ...
  </body>
</html>

Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.

<script>
  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
</script>

Importing components

Import components from carbon-components-svelte in the script tag of your Svelte file. Visit the documentation site for examples.

<!-- App.svelte -->
<script>
  import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>

<Accordion>
  <AccordionItem title="Section 1" open> Content 1 </AccordionItem>
  <AccordionItem title="Section 2"> Content 2 </AccordionItem>
  <AccordionItem title="Section 3"> Content 3 </AccordionItem>
</Accordion>

Refer to COMPONENT_INDEX.md for component API documentation.

Preprocessors

carbon-preprocess-svelte is a collection of Svelte preprocessors for Carbon.

# Yarn
yarn add -D carbon-preprocess-svelte

# npm
npm i -D carbon-preprocess-svelte

# pnpm
pnpm i -D carbon-preprocess-svelte

optimizeImports

optimizeImports is a script preprocessor that rewrites base imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can greatly speed up compile times during development while preserving typeahead and autocompletion hinting offered by integrated development environments (IDE) like VSCode.

The preprocessor optimizes imports from the following packages:

Example

- import { Button } from "carbon-components-svelte";
- import { Add16 } from "carbon-icons-svelte";
- import { Airplane } from "carbon-pictograms-svelte";
+ import Button from "carbon-components-svelte/src/Button/Button.svelte";
+ import Add16 from "carbon-icons-svelte/lib/Add16.svelte";
+ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";

Usage

// svelte.config.js
import { optimizeImports } from "carbon-preprocess-svelte";

export default {
  preprocess: [optimizeImports()],
};

Examples

Documentation

The documentation site is deployed to Render as a Static Site. See render.yaml for details.

Deploy to Render

Other forms of documentation are auto-generated:

Download details:

Author: carbon-design-system
Source code: https://github.com/carbon-design-system/carbon-components-svelte
License: Apache-2.0 license

#svelte #javascript #typescript

What is GEEK

Buddha Community

Svelte Implementation Of The Carbon Design System
Wilford Pagac

Wilford Pagac

1602759600

Glossary: Design Systems Defined for Developers and Designers

Design systems are interdisciplinary by nature. They are built and consumed by designers and developers, therefore it is important for common terminologies to exist to support the communication between these two disciplines and other related actors.

Note: while some of the concepts are explained in a way that is more related to the context of web development, most of them are applicable to other contexts as well.

📖 Glossary

In this post we will present some key concepts from design and development, explain their meaning in the context of design systems and point to any ambiguity that may exist.

Foundation/Essentials/Principles

Example of Material Design foundations

Every design system is built on top of a set of fundamental rules which are shared across components or other parts. These rules can relate to visual design (e.g. animation, colors, typography) or define more abstract principles such as brand personality or writing style.

Components

Example of Kor UI button component

Perhaps the most used term, components are individual units (such as buttons, inputs, tabs) that have defined appearances and interaction paradigms. Components can have different variations and be customized through APIs (Application Programming Interfaces).

Patterns

Example of Carbon Design login pattern

Patterns define how different components can be combined in a certain way to serve specific user goals that are often repeated across screens or applications. For example, input fields, icons and buttons can be combined in a certain way to serve the goal of signing into an application. Examples of patterns are forms, navigation and onboarding.

Note: UX patterns should not be mistaken with ‘design patterns’ in software engineering, which are also common ways of solving problems but specifically related to the context of engineering.

#ux #design #design-systems #web-development #frontend #software-development #design-systems-glossary #latest-tech-stories

DataIT Solutions

DataIT Solutions

1609840501

Landscapes Website Design | Nature Landscapes Website Designer

Most landscapers think of their website as an online brochure. In reality of consumers have admitted to judging a company’s credibility based on their web design, making your website a virtual sales rep capable of generating massive amounts of leads and sales. If your website isn’t actively increasing leads and new landscaping contracts, it may be time for a redesign.

DataIT Solutions specializes in landscape website designing that are not only beautiful but also rank well in search engine results and convert your visitors into customers. We’ve specialized in the landscaping industry for over 10 years, and we look at your business from an owner’s perspective.

Why use our Landscapes for your landscape design?

  • Superior experience
  • Friendly personal service
  • Choice of design layout
  • Budget sensitive designs
  • Impartial product choice and advice
  • Planting and lighting designs

Want to talk about your website?
If you are a gardener or have a gardening company please do not hesitate to contact us for a quote.
Need help with your website? Get in touch

#nature landscapes website design #landscapes website design #website design #website designing #website designer #designer

Ruth Nabimanya

Ruth Nabimanya

1620633584

System Databases in SQL Server

Introduction

In SSMS, we many of may noticed System Databases under the Database Folder. But how many of us knows its purpose?. In this article lets discuss about the System Databases in SQL Server.

System Database

Fig. 1 System Databases

There are five system databases, these databases are created while installing SQL Server.

  • Master
  • Model
  • MSDB
  • Tempdb
  • Resource
Master
  • This database contains all the System level Information in SQL Server. The Information in form of Meta data.
  • Because of this master database, we are able to access the SQL Server (On premise SQL Server)
Model
  • This database is used as a template for new databases.
  • Whenever a new database is created, initially a copy of model database is what created as new database.
MSDB
  • This database is where a service called SQL Server Agent stores its data.
  • SQL server Agent is in charge of automation, which includes entities such as jobs, schedules, and alerts.
TempDB
  • The Tempdb is where SQL Server stores temporary data such as work tables, sort space, row versioning information and etc.
  • User can create their own version of temporary tables and those are stored in Tempdb.
  • But this database is destroyed and recreated every time when we restart the instance of SQL Server.
Resource
  • The resource database is a hidden, read only database that holds the definitions of all system objects.
  • When we query system object in a database, they appear to reside in the sys schema of the local database, but in actually their definitions reside in the resource db.

#sql server #master system database #model system database #msdb system database #sql server system databases #ssms #system database #system databases in sql server #tempdb system database

Houston Sipes

Houston Sipes

1602752400

Improving Design Handoffs: A Guide

To build an awesome and successful digital product you need to do a lot of things. Such as planning, market research, build a prototype, design it, code it, ship it etc. For this whole process, you need to go through lots of handoffs and team communications. One of the more painful handoffs is the Design-to-Development Handoff.

This happens usually as the design and development happen in 2 separate teams. The design team handles creating the design system, user interfaces, graphics and visuals. The dev team turn the design deliverables into a functional product.

What is Design-to-Development Handoff?

Design handoff is when the design team hands their deliverables over to the dev team. The dev team then begins with the implementation. This process could turn into a nightmare if there are no standards implemented. Since the product’s quality is at stake, it’s a good idea to enable a good collaboration between the two teams.

This is not rocket science. There are tons of tools and platforms available that ease the design handoff.

To maintain a smooth design handoff, both designers and developers must take part in the process.

Here are some tips for the designers and developers on how to improve the design handoff.

Tips for Designers

Be interested in the frameworks. Talk with the developers on what framework they plan to use and read about it. Are they using Bootstrap? Or Tailwind CSS? Get to know it and its possible limitations. Knowing the possibilities and limitations will help you create more suitable design elements. After studying the framework, try to use the UI elements that come with it. Map the framework’s color palette, spacing, typography settings and everything that you can. Follow the design trends for the platform that you’re designing. For example, if you’re designing an iOS app, don’t set the tab bar height by random. There are Design Guidelines for both iOS and Android available, so make sure you read them. The development team will thank you for it! Use a modern tool for UI Design. It’s time to ditch Photoshop. If you want to stay in the Adobe ecosystem, then check out Adobe XD. If not, I recommend taking a look at Figma.

#figma #ux #ux-design #web-design #ui-design #ui #design-systems #website-design

Juned Ghanchi

1621315250

Designing Mobile Apps using the latest UI Design Principles

The mobile technology world is growing at the speed of light, and the apps have become an integral part of our daily life. We can now see an influx of technology with tools that can help create mobile apps. All of them are becoming more accessible and hence people are getting on their first app making journeys. Since the mobile app industry is getting bigger and better than ever, businesses from all corners of the world are trying to develop mobile apps for their operations and marketing. Designing a mobile app for businesses is the first step, though. Company owners are in charge of the basic look and feel of the designed product. With a brilliant mobile app design, one can establish a relationship between app and user very well.

Read Blog Here: https://www.indianappdevelopers.com/blog/designing-mobile-apps-using-latest-ui-design-principles/

#designing mobile apps #ui design principles #mobile ui design #mobile app design #ui design #app design