Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

tutti-ch-styleguide

Package Overview
Dependencies
Maintainers
7
Versions
445
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tutti-ch-styleguide

React-based styleguide for tutti.ch

  • 2.4.99
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
7
Created
Source

tutti.ch Styleguide

CircleCI

How to start

To develop:

git clone https://github.com/tutti-ch/react-styleguide.git
cd react-styleguide
npm install
npm run styleguide

Then open http://localhost:6060 in your browser.

To include in your project:

npm install --save tutti-ch-styleguide

or

yarn add tutti-ch-styleguide

We do work with scss files. In order to include the styles in your project, simply:

@import '~tutti-ch-styleguide/dist/normalize.scss'
@import '~tutti-ch-styleguide/dist/index.scss'

The first file normalize.scss is a normalizer to have a common style accross browsers. The second file will give you access to all variables that are mentioned in the styleguide.

Then you can easily import our components like:

import { Table, Spinner, Image } from 'tutti-ch-styleguide' // See our styleguide for a full list of components

Changing content

We have currently divided the style guide into two sections.

1. Styles

Everything related to styles (colors, sizes, icons etc...) goes under this folder. The styleguide will look into the src/styles folder and load every file matching the following glob:

src/styles/**/[A-Z]*.js

These files will be directly included in the style guide under the Styles Section.

2. Components

Components that will be used in our project will be grouped under this section. The styleguide will look into the src/components folder and load every file matching the following glob:

src/components/**/[A-Z]*.js

These files will be directly included in the style guide under the UI Components Section.

3. Icons

In order to generate icons one must execute the following command:

npm run icons

This command will search for svg files recursively under styles/ folder and will create an index.js file within each folder that svgs are located. This index file serves to import the svgs files directly into react as images. If you prefer to use it as a font, then simply use the corresponding class name. For instance, for kanton-aargau.svg file one will be able to write:

import { icons } from "tutti-ch-styleguide"
icons.cantons.CantonAargau
icons.categories.Tv
icons.SocialFacebook

Publishing to Github Pages


For detailed information regarding publishing on GitHub pages, you can check this link.

We use the docs/ way. GitHub will read everything under this folder. The index.html is the main file to be loaded.

To facilitate the build procedure, we have configured the styleguide to build directly into the docs/ folder. If you ever have to change this behaviour, check the styleguideDir configuration under styleguide.config.js file.

Publishing to npm


In order to publish to npm one must first create an npm user. npm adduser

Once done, an admin should provide access to the created user on npm's admin page. Afterwards it is as simple as executing the following command:

npm run dist:publish

This command will pull the latest version from the master, build the styleguide, patch the package version, push the changes to master and finally will publish.

Keywords

FAQs

Package last updated on 15 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc