Plasmic's approach to styling and layout
Deterministic styling
In browsers today, certain (mostly typographic) styles are inherited / cascaded, and elements come with a default set of styles (e.g. buttons are pre-styled to look very different from a div).
In Plasmic, by default, each component fully specifies its own styles; we block css inheritance at component boundaries. This insulates the look and feel of each component from the browser’s defaults and from inheritance. This deterministic styling yields more predictable results, and guarantees that the final app faithfully reflects the design.
For instance, if you drop a button into a header, this insulation helps ensure the button won’t suddenly have large type just because of where it is placed. Similarly, it prevents the styles you already have in your app from getting inherited into and affecting the appearance of Plasmic components that you drop into the app.
Lastly, this approach allows the UI you design in Plasmic to be cross-platform—feasible on platforms other than the web, which is unique in its treatment of inheritance.
Style isolation
Normally, Plasmic goes to lengths to isolate the styles that it applies to elements from the rest of your app. This is for both directions:
- To not interfere with parts of your app that are built outside of Plasmic. For instance, we won’t simply style
h1everywhere. - To not let common declarations of styles affect Plasmic styles. For instance, we reset styles so that a global
h1won’t affect Plasmic.
However, sometimes you may want to penetrate this barrier and allow elements rendered by your own code components to receive Plasmic styling.
In this case, you can use the themeResetClass setting on code components.
Learn more.
Layout system
In Plasmic, rather than directly expose users to the raw CSS layout properties like display, position, flex-basis, etc., we provide some simpler layout abstractions. This is for a few reasons:
- To distill the complex space of possibilities into a more compact and intuitive set of controls. CSS layout can be tricky to understand and debug even for seasoned web developers.
- To ensure that the layouts one can express in Plasmic can be executed across different platforms other than the web.
Layout is accomplished using boxes, which are containers. There are currently two types of boxes in Plasmic:
- Horizontal and vertical stacks correspond to flexbox layouts. By default their children are auto-positioned within the flex flow, but can also include “free-floating” (absolutely positioned) children. These are generally the most common type of container in a UI that is meant to go into production.
- Free blocks contain only free-floating children. These are esp. handy for exploratory design when just wanting to draw things. These are anchored to the top/left/bottom/right.
Gap support
Stacks support specifying a default gap between the children items. This is implemented as a polyfill for the gap property coming to CSS. Margins that individual children specify for themselves are added to this gap. Besides the gap along the main axis, a cross-axis gap can also be specified (separating rows in a horizontal stack, for instance).
