- Pixeldraft is a Front End Page and Website Creator
- It runs mostly on Javascript. After the inital page load even AJAX requests to the server are very rare. It is therefore probably one of the fastest if not the fastest editor when it comes to workflow since you never have to wait for any command to be executed. (Tested almost all actions and they would make a first person shooter proud with panel and element generation times usually between 25-50ms)
- Low server resources: currently: a page with 200 elements is generated within 0.15 seconds and 35mb peak memory usage. Compare that to elementor which may take up to 2 seconds and twice that amount of memory
- Generated Output (aka Frontend HTML Pages) are small and use very little resources: HTML code is as clean as if it were written by hand since “Divception” should be a thing of the past in 2022. jQuery is no longer required on the frontend, icons are small svg files instead of large css font files and the CSS and JS is loaded conditionally and only when required.
- Uses a drag and drop system that actually works. No constant jittering of elements or guessing were a dragged element will end up. When you start dragging the editor will show you all the available drop target positions and moving the element wont constantly shift the layout.
- Elements use the “Handlebars” template engine. this allows to separate template logic from HTML structure and also allows us to define a single template that can be interpreted by PHP and Javascript alike. Handlebars is based on the Moustache Templating engine.
- Allows for easy manipulation for developers via a registry class that controls most aspects of the editor
- A global styling system, based on 3 main pillars that can be user generated or imported from our (planed) design library:
- Font stacks: define and apply shared font styles to elements (a basic font stack consists of 5 styles: 2 heading styles, 2 content styles and one for meta information)
- Color Schemes: generated predefined colors and color sets that can be used by all elements (a basic color schemes consists of (currently) 8 colors)
- Element Style Packs: allows you to set up shared default styles for element types. A style pack has allows you to generate one predefined style for each element type. (those being container, heading, textblock etc etc) eg: apply a basic styling for buttons that is shared among all buttons. these styles can then be overwritten on a per element basis. this leads to small stylesheets and an extremely fast workflow since often times there is no need to divert from your predefined styles.
- Style inheritance: Element settings have multiple states that can be inherited. Were other editors allow you to change a few settings for the hover state for example or for tablet or mobile screen size, Pixeldraft allows to store all style settings for each of those states in any combination:
- Screen Size styles are usually set for the regular Desktop screen size but all options can be changed for Tablet as well as Mobile. This is also the inheritance chain: If you set a green background for desktop then the tablet and mobile screen size will inherit it. If you then set a blue background for tablet it will be inherited by the mobile size.
- This mode also works for mouse states: you got “default state” > “hover state (:hover)” > “click state (aka :active)”
- 3 Default Screen sizes but can esaily extended (currently via setting file, planned: admin panel for extra sizes)
- Know what has changed: the editor shows you if a setting was changed with a small dot that indicates and on hover details the states were settings have been modified
- Flexbox Based: Alignment of elements is no longer based on tons of container and column elements but on the modern Flexbox Styling Standard
- A good number of simple(!) Keyboard shortcuts to speed up the workflow. planed: admin panel for changing Keyboard shortcuts