Code Editor
The second most important work area in Quarkly is the code editor. It displays all the components and their props that you can see on the screen. You can also work with the components, their props, and values much faster than on the page. You need to be able to follow JSX syntax, know the set of available components, CSS props and values.
Components
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 are:
  • hover
  • focused
  • active, for a button and an input
  • disabled, for a button
  • link, for a link
  • visited, for a link
Example of how to add 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%’.
Made on Quarkly