@city-furniture/cityfurniture-scss

city-furniture project for scss design

Usage no npm install needed!

<script type="module">
  import cityFurnitureCityfurnitureScss from 'https://cdn.skypack.dev/@city-furniture/cityfurniture-scss';
</script>

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: