scarab-core

KO | EN

gitlite — search

#javascript #typescript #llm #machine-learning #rust #linux #nodejs #windows #cli #awesome-list #pytorch #ios #openai #open-source

(★ 18)

Sass library for rapid stylesheet development

scarab-core 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center" style="text-align:center;">
<img src="https://raw.githubusercontent.com/kyleoliveiro/scarab-core/master/scarab-logo.svg?sanitize=true" width="128">
<h1>Scarab Core</h1>
<strong>Sass library for rapid stylesheet development</strong>

Design token management · Responsive mixins · Helper functions

[![npm-beta](https://img.shields.io/npm/v/@scarab/core.svg)](https://www.npmjs.com/package/@scarab/core)
[![Build Status](https://travis-ci.org/kyleoliveiro/scarab-core.svg)](https://travis-ci.org/kyleoliveiro/scarab-core)

---

[💿 Installation](#installation)&ensp;·&ensp;[📚 Documentation](#documentation)&ensp;·&ensp;[⭐️ Features](#features)&ensp;·&ensp;[🍃 Ecosystem](#ecosystem)
<br>
[🎉 Motivation](#motivation)&ensp;·&ensp;[❤️ Contributing](#contributing)&ensp;·&ensp;[📃️ License](#license)
</div>

---

## 💿 Installation
1. Install Scarab Core as a dev-dependency:

```bash
# With yarn
$ yarn add @scarab/core -D

# Or with npm
$ npm install @scarab/core --save-dev
```

2. Add `node_modules/` to your Sass [`includePaths`](https://github.com/sass/node-sass#includepaths).

3. Import the Scarab Core library before all other stylesheets:

```scss
// Import the Scarab Library
@import '@scarab/core/_';

// Write your Sass here...
```

## 📚 Documentation
API documentation and guides:<br>
[**https://scarab.style/core**](https://scarab.style/core)

## ⭐️ Features

### Design token management

Design systems consist of reusable “tokens”. Each token has a name and a value associated with it. Constructing digital interfaces using only the values of tokens that are defined in a design system ensures visual consistency. Scarab provides a simple interface for managing design tokens.

### Helper functions
Provides additional syntactic sugar on top of the default Sass functions.

### Responsive mixins
Simplifies working with breakpoints and media queries.

## 🍃 Ecosystem

In addition to the core library, the following packages are available in the Scarab ecosystem:

## 🎉 Motivation

### Why another Sass library?
Scarab is the resulting by-product of years of web development work. It's designed and built as a library to manage design tokens and to provide additional syntactic sugar for writing stylesheets.

### Why use Scarab?

- Define design tokens in Sass (ideal since it's a styling language)
- Use tokens in Sass with Scarab, and in HTML with Carapace
- Ability to export design tokens from Sass to JSON
- Written in Sass; No additional dependencies
- Well tested with 100+ unit tests
- Ecosystem of related packages

### Why not just use Sass variables?
Using Sass variables to manage design tokens can be a viable solution for small projects. However, this approach has its limitations. For instance, in Sass, it's not possible to dynamically reference a variable by name. On the other hand, this becomes possible if tokens are stored in a Sass map instead of variables. This opens up many possibilities, and is the main impetus behind the Scarab library.

### Alternative libraries
Other options are available, and you should pick one that caters to your project's requirements.

- [Tailwind](https://tailwindcss.com/) — Generates CSS utility classes with short compile time. Requires PostCSS or Tailwind CLI.
- [Tachyons](https://tachyons.io/) — Good for smaller sites that use native CSS variables (a.k.a. custom properties).
- [BassCSS](http://basscss.com/) — Alternative to Tachyons. Also uses CSS variables.
- [Vue DS](https://vueds.com) — Full-featured design system framework for Vue.

### ❤️ Contributing
Issues and feature requests and PR's are welcome!

scarab-core

scarab-core 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

scarab-core

scarab-core 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README