Skip to content

CSS Live reloader is a firefox extension that reloads a page CSS when it gets notified of changes (via WebSockets)

License

Notifications You must be signed in to change notification settings

sergiosgc/CSS-Live-Reloader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSS Live Reloader

CSS Live Reloader is a firefox extension to ease website CSS development. The extension reloads a page CSS whenever it changes on the server, resulting in something close to live editing of the Cascading Stylesheet.

To detect changes to the CSS, the extension relies on a daemon running on the same webserver the page originated from. The daemon pushes down notifications whenever it detects changes to the CSS.

Even without a notifier running, the extension behaves normally, albeit without the live component. You may press F9 to request a refresh of the current page CSS.

You can see it in action in this demo video:

ScreenShot

Usage

Install the add-on from AMO: https://addons.mozilla.org/en-US/firefox/addon/css-live-reloader/

For simple usage, without live-reload, you are set. Just press F9 to reload the CSS whenever you need.

To get live CSS refresh, you need to install a notifier. Follow the instructions on the page.

After you get the notifier up and running, press F9 to connect the web page to the change notifier. From then on, changes to any CSS file will trigger a refresh of the CSS.

Development

Should you wish to further develop this addon, just fork the repository and clone it to your computer. You'll need to install the Jetpack SDK from Mozilla. Navigate to the root of the git repository and run cfx run. Jetpack will launch a firefox browser in a temporary profile, with the addon installed for testing.

Pull requests are welcome, namely writing notifiers for more platforms. Currently only linux+inotify is written. I'd like to get OSX, BSD and Windows notifiers in the repo.

About

CSS Live reloader is a firefox extension that reloads a page CSS when it gets notified of changes (via WebSockets)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published