This project's aim is to redesign Freebox OS's UI by injecting custom stylesheets into its web interface via a Google Chrome or Firefox extension.
As you can see, the redesign is hugely inspired from Google's Material design guidelines and Chrome OS specs.
See below for more screenshots.
Quite straight-forward actually: injector.js file is injected by either Chrome or Firefox inside the tab.
His aim is to inject the necessary resources - style.css, content-script.js, MaterialDesignIcons stylesheet and Roboto font.
We use SCSS (compiled CSS) to override Freebox OS's styles alongside with some Javascript when necessary.
That's it!
This project relies on the following resources:
- Material Design Icons
- Roboto font
- Wallpaper credits: see
material-freebox-os.js/MaterialFreeboxOS.wallpaper.wallpapers
That's a legitimate question: you can browse Javascript files (injector.js and content-script.js)
in this repo or directly from Chrome's debugger tools - to see that their sole purpose is to manipulate the DOM to apply
some styling that couldn't be set in CSS.
Do not hesitate to open issues or to create pull requests against the master branch! The main project is based on SCSS to build CSS files: you'll need an appropriate compiler alongside with some Chrome extensions notions.
Note: we're using the EditorConfig standard to supply coding rules for this project, learn more about it here.
Warning: this is not meant to be perfect. Freebox OS's UI is quite difficult to style, and some changes aren't possible for now. I'd rather keep this project maintainable and compatible with upcoming releases of Freebox OS than doing some Javascript black magic to set these minimize/maximize/close buttons padding.
Check Material Freebox OS's page on the Chrome Web Store or Firefox addons repository for some more.
Material-Freebox-OS is distributed under the GNU GPL version 2.