Giter Club home page Giter Club logo

tinnef-scss-starter-kit's Introduction

Tinnef SCSS Starter Kit

This is an SCSS starter kit for the design system setup described in this article series: https://www.mathiaspolligkeit.com/tags/design-systems/.

It includes:

  • project layout as described in the articles
  • themes, components, layouts and base styles
  • style dictionary
  • mixins and functions
  • webpack
  • dart-sass
  • stylelint
  • postcss
  • style guide generation

It doesn't have all the features I'd like it to have yet, but you can certainly use it to get started with a project. Just clone the repository.

Commands

  • dev build (tokens + : yarn build
  • build style dictionary tokens: yarn build-tokens
  • watch mode (does not watch style dictionary tokens): yarn watch
  • stylelint: yarn stylelint
  • fix stylelint errors: yarn stylelint --fix
  • format with prettier: yarn prettier . --write

tinnef-scss-starter-kit's People

Contributors

dependabot[bot] avatar renovate[bot] avatar woylie avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

tinnef-scss-starter-kit's Issues

style dictionary

  • configure style dictionary
  • export JSON for style guide
  • define design tokens with style dictionary, import into SCSS
    • colors
    • font families
    • base size
    • modular scale / sizes
    • base line height
    • line heights
    • lines
    • letter spacings
    • weights
    • radii
    • spacers
    • border widths
    • gutter
    • measure
    • shadows
    • breakpoints
    • time
  • support themes
  • merge radius into border?
  • merge weight into font?
  • replace custom property accessor functions with style dictionary formatter

documentation

  • initialize documentation
  • design token guide
  • project structure guide
  • general CSS guide
  • component guide

Theme style sheets

Maybe change setup, so that custom properties are defined in separate theme style sheets.

Components

  • alert/notification
  • box
  • breadcrumbs
  • buttons
  • card
  • drawer
  • image/figure
  • menu
  • navbar
  • pagination
  • spinner
  • tabs

Layouts

  • container
  • grid
  • group
  • hero
  • level
  • modal
  • stack
  • with-sidebar

specification

  • specification for design tokens
  • specification for components
    • specification for component meta data
    • specification for component attributes
    • specification for component structure

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.