openmastery / semantic-ui-theme Goto Github PK

need a really simple YAML file to use for testing the compiler with

need to create a base project to work off from. why not use semantic ui directly!

Overview

we need a compiler that will take a base .yml file containing theme style fields and functions and create a JS module that can be loaded into a webpage. The JS module will consist of:

• Renderer
• Injector
• Rules

Specification

The compiled module's renderer will dynamically create a new stylesheet <link/> into the <head/> of the document with the renderer. The renderer will create new rules in the stylesheet by injecting the rules with the injector. Rules can dynamically be set by calling an update function within the renderer.

This could be kinda helpful, right!

Need a simple JS Module skeleton that we can use as a base class to put compiled JS into

Overview

We need a mechanism that will load the compiler JS into a projects webpage using a require or import declaration. The main purpose of the loader is to load the compiled JS module into a webpage, and execute the renderer process.

Specification

The loader needs to be able to look for a static pre-compiled JS module to import into the JS scope of the webpage, or function as a service that dynamically compiles the JS by calling the the compiler on the server side, and returning the JS module to be loaded into the webpage.

Let's layout the goals of this project and break down a roadmap to getting there. I'll update this description as we develop the requirements.

Initial Proposal

I would suggest replacing all CSS with a CSS-in-JS solution be deferred for a later time. Instead, I think we would be well served by a theme builder around customizing the LESS build of SUI. LESS provides an in-browser compiler that makes this very easy. We can run this in a web worker so as not to block the main ui thread.

Users would have photoshop-like controls (i.e. color pickers, range sliders, etc.) for tweaking the global variables, component variables, and adding LESS overrides. The LESS editor and all input fields would have typeahead support for variables to make things easier for the user. The user could then download the customized theme CSS and/or LESS.

The benefit here is that we can leverage the already existing SUI CSS teams to manage the CSS/LESS for us. Our system would only have to update the LESS package, parse it, and generate the controls for users.

Todo

Web-based theme editor web app

Right now, this list is based on the idea of editing a LESS theme. We're also experimenting with porting the LESS to CSS-in-JS, in which case some of this will not apply. I've marked items that do not apply to CSS-in-JS with 🚫 CSS-in-JS.

• Create skeleton react app with CRA
• Create Three panel layout; Navigation (component tree layout, theme name), Content (SUI theme layout page), Property (property editor for the component)
• Create SUI theme layout page in Content Panel(center panel)
• Create Navigation Panel (left panel) (fixed position so as not to screw up responsive width calcs)
• Create right Property Panel (right panel) (fixed position so as not to screw up responsive width calcs)
• Slide left and right panels in/out ; collapable
• 🚫 CSS-in-JS Allow choosing limited components to include
• Provide controls for setting site.variables
• Provide controls for setting <component>.variables
• Provide high-level theme control view with option to switch to detailed controls for every variable
• Real time theme update on control change
• Color picker for color variable inputs
• Typeahead for code/text inputs. Typeahead to include either LESS or JS support, depending on direction we go.
• 🚫 CSS-in-JS Download compiled CSS
• Download theme as a single JSON file (serverless, use Blob API)
• Load theme as a single JSON file
• Validate a JSON theme file against a specific version

NPM theme editor package

• Allow running a locally hosted instance of the theme editor
• Allow to include theme editor into existing applications; toggles theme mode as build argument

just a simple JS class that can create a new stylesheet and add a few test classes into it

Need to have the compiler generate a very simple JS module that is used by the hardcoded loader. Loader will assume that this file exists,, if it doesn't .. raise exception

Lets load the compiled JS upfront by knowing the static name of the compiled file. Not using the loader project

set up basic gulp tasks for creating the compiler.. basically gulp task should execute some JS classes to handle processing

This will prevent alot of future headaches and a quick mechanism for running compiler against future YAML theme rules