@city-furniture/cityfurniture-scss

city-furniture project for scss design

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@city-furniture/cityfurniture-scss
2.6.224 days ago3 years agoMinified + gzip package size for @city-furniture/cityfurniture-scss in KB

Readme

cityfurniture-scss

Setup environment locally

  1. Run yarn to install dependencies
  2. Run yarn build to check everything is working fine

Documentation

Read docs http://digital-scss.s3-website-us-west-2.amazonaws.com/

Publishing a new version

  1. By default, release version is patch. But you can change it in the package.json file. There is a prop called "releaseVersion": "patch",, and there you can set as patch, minor or major according to the release you want to do.
  2. Then you have to create a PR to publish branch, and a Job in Jenkins will start, and it will generate the new version, and it sends a notification to Slack too.

(Remote) Install the package inside a project

  • install the package using npm: npm install @city-furniture/cityfurniture-scss --save
  • install the package using yarn: yarn add @city-furniture/cityfurniture-scss

(Locally) Install the package inside a project

  • To work with the scss package without installing it, we must clone the project cityfurniture-scss, install the packages with npm install and run the command npm link.
  • This will take the package and create a symbolic link in the npm global folder to it.
  • After this, in order to use the local package inside project we need to open the project into a terminal and run the command npm link @city-furniture/cityfurniture-scss and the dependency is created between the projects.

Importing the package

  • We can use the package inside any javascript file from project by importing it with:
import '@city-furniture/cityfurniture-scss/scss/main.scss’
  • or other importing methods like - inside scss files:

@import '~@city-furniture/cityfurniture-scss/scss/main';

@import '~@city-furniture/cityfurniture-scss/dist/main.min.css';

Override the variables:

  • inside a scss file from the project we write the following:

$font-weight--thin: 120px;

@import '~@city-furniture/cityfurniture-scss/scss/main';

Resources:

  • compile and minify a sass project: https://www.jamesedwards.name/npm-compile-sass
  • overriding variables inside scss files: https://medium.com/@bajena3/a-story-about-overriding-scss-variables-and-the-default-keyword-eace1de34631
  • creating a step-by-step npm package: https://dev.to/therealdanvega/creating-your-first-npm-package-2ehf
  • theming with scss: https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1