jairyara/yard-sale

Web page for yard sale

Yard Sale

E-commerce for yard sale in your neighborhood.

Resources

• Desktop design. Click in guidelines.
• Mobile design. Click in guidelines.
• Scene guidelines. Click in zeplin

Installation

For this project I use HTML, Postcss, git.

Install postcss

npm install --save-dev postcss-cli postcss

Install in dev dependencies, isn't necessary production compile

For use nesting is necessary install nesting plugin

npm install --save-dev postcss-nesting

Create a file .postcssrc (JSON file) with this configuration

{
  "plugins": {
    "postcss-nesting": true,
    "autoprefixer": true
  }
}

In postcss.config.js (JS)

module.exports = {
  plugins: {
    "postcss-nesting": true,       /* Nesting CSS */
    "autoprefixer": true           /* CSS Vendor prefixes */
  }
}

I use browserslist for major support in this project. For install

npm install --save-dev browserslist

In package.json set next information

{
  ...
  "browserslist": [ "last 1 versions" ]
}

For installation autoprefixer

npm install --save-dev postcss-cli autoprefixer

Activate plugin for use autoprefixer

Compile postcss

For compilation code traditional mode

• Option 1 - Compile 1 time

npx postcss index.pcss -u postcss-nesting --no-map -o index.css

• Option 2 - Compile watching changes

npx postcss --watch src/css/style.pcss -o public/css/style.css

• Option 3 - Compile using npm

Compiling option 1 using npm

npm run css

Compiling option 2 using npm

npm run css-watch