Giter VIP home page Giter VIP logo

pd-css's Introduction

How I do css-ing

This is how I deal with CSS for my printing website, directly on a the production website. This way I see my CSS injected on the real website and I can test different designing scenarios CSS wise. The modifications accepted will then be uploaded permanently by FTP a la '90' style.

You need installed

  • sassc compiler
  • yui compressor
  • inotify-tools

Also a Linux operating system

What it does

sass:watch

It monitors any changes to files hosted in src directory and convert scss files to coresponding css files.

In order to inject your modifications, you cd to bin/ fire a node server-style.js that runs on port 3000 and copy to the browser console browset-style.js. The production website must have Content-Security-Policy set to allows localhost:3000. Every time you switch to browser window and activate it, by clicking your CSS modification will appear laid out on your production website. They are not permanent, they are shown only in that browser window.

css:up

Minify css files, move minified files to dist folder and clean up/remove minified css and css files.

By FTP, it upoads css files from dist directory to the web location, which it is specified in .env).

Into bin directory there are 4 file that need executable flag on.

  • wait use inotify to watch modifications on only certain scss files. It ignores scss files starting with underscore, css files and any other files that are not scss.
  • .env set your FTP credentials into terminal, so, the FTP actually knows where to put style.min.css.
  • .unenv unset credentials.
  • .ftp takes credentials from environment, placed there by .env and moves minified css files from dist to final destination

Files fom bin are not intended to be run manually.

pd-css's People

Contributors

innermond avatar

Watchers

 avatar  avatar

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.