Code Editor
The second work area in Quarkly is the code editor. It displays all the components and their props that you can see on the screen, as well as work with the components, their props, and values much faster than on the page. You are supposed to follow JSX syntax, know the set of the available components, CSS props and values.
List of Primitives:
  • <Box/>
  • <Button/>
  • <Hr/>
  • <Icon/>
  • <Image/>
  • <Input/>
  • <List/>
  • <Text/>
List of Quarkly UI Components:
  • <Formspree/>
  • <GoogleMap/>
  • <Menu/>
  • <Section/>
  • <SocialMedia/>
  • <Stack/>
  • <StackItem/>
States / Pseudo-classes
Pseudo-classes are added through a prefix in the code, for example, hover-opacity='1'. Available pseudo-classes:
  • hover
  • focused
  • active, for a button and an input
  • disabled, for a button
  • link, for a link
  • visited, for a link
Example of adding a component with properties:
<Box width='100px' height='100px' background-color='blue' color='white'>Hello World</Box>
The props values for the breakpoint are set through a prefix, for example, md-width=’50%’.