Updates
July 2020
NEW Integration with GitHub
Create a repository on GitHub for your Quarkly project. Make commits with changes to the master branch or a new pull request branch from your GitHub repository.
New
Adaptive images
Use srcSet to set specific images for different widths of the viewport and pixel-devices with higher density.
With sizes, you have more opportunities to set up image switching in srcSet in case the image behavior changes at breakpoints.
New
Props for text
We added more opportunities for word breaking, transferring, spacing, and paragraphing.
What can you do with the new props:
  • “Overflow wrap” and “Word break” will configure hard line breaks when there are long words in the text or the container is too narrow.
  • “White space” adjusts the behavior of characters on a new line, spaces, and tabs, as well as overflow wrap
  • “Text indent” adds an indented line to a paragraph
  • “Text overflow” displays an ellipsis instead of the hidden overflow content
  • “Hyphens” specifies how words should be hyphenated when the text wraps across multiple lines
atomize update promo image
New
Atomize
We updated the repository and made a page for our library to create atomic React components.
Features:
  • Create components that support atomic CSS and themes
  • Set styles for specific media breakpoints
  • Use variables from the theme in composite CSS properties
  • Support for hover and any other pseudo-classes
  • Short aliases for each property
atomize.quarkly.iogithub.com/quarkly/atomize
New
Molecules
It’s a library of UI components used in Quarkly and designed in Storybook.
molecules.quarkly.iogithub.com/quarkly/molecules
molecules update promo image
June 2020
export to the gatsby project promo image
NEW Export to the Gatsby Project
Now, you can export your Quarkly projects not only to Create-React-App, but also to Gatsby — one of the most popular static site generators.
Benefits of Gatsby:
  • Performance optimizations. Gatsby enables some useful performance optimizations for you, by default.
  • Expansive ecosystem. Gatsby has hundreds of plugins to drop in additional features such as:  SEO, responsive images, RSS feeds, and much more;
  • Unified GraphQL data layer. Plugins can also pull in data from any number of sources like APIs, CMSs, or the filesystem. That data is combined into a unified data layer that you can query with GraphQL throughout your app.
  • SSR and browser APIs. Gatsby is server-side rendered at build time, meaning that the code that gets to your browser has already been run to build pages and content, but this doesn’t mean you can’t still have dynamic pages.
New
Unsplash images
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface.
New
New types of props
New prop types for custom components: Image and Text-area. Image type calls a modal window that returns the image URL. Text-area is a convenient control for a large amount of text.
May 2020
NEW Element resizing with absolute and fixed position
Elements with absolute and fixed position can not only be moved on a page but also resized.
New
New props in the Styles panel
→ Text shadow is a shadow for text elements. It consists of four parameters: deviation by X and Y, blurring, and the shadow color. You can set a few shadows.
→ Min width, Max width, Min height, Max height are indispensable assistants in adaptive design, and more. You are sure to know why you may need it. Now, it's available on Quarkly!
→ Overflow X, Overflow Y help your page control the content of the element when the content goes beyond its boundaries. You can set the overflow to or make it visible or hidden. If you set it the “auto” value, the container can display a scrollbar only when the overflow is clipped. So you don’t have a useless scrollbar when your content doesn’t need it.
→ List style type is a functional property for the “List” element which allows you to select any kind of numbered or bulleted list.
New
Help button
A button to call a window with links to documentation and other materials.
New
Page renaming
Now, you can rename the pages in the panel. To do it, call the context menu by right-clicking on the page. In the current version, only the page title can be renamed, not its URL. The next step is to add the option for changing the page URL.
IMPROVE
Updated StackItem
StackItem is a child element for Stack. In the updated version, you can set styles not only to StackItem, but also to its internal container — StackItemContent. This allows Stack and StackItem to be a good basis for placing the content.
IMPROVE
Updated Section
Section is the basis of the blocks. The element allows you to set the max and min width of the area with content. In the updated version, you can set styles for the SectionContent internal container, which lets manage the Section content easily.
April 2020
NEW Creating components from page, just like in design tools
Elements with absolute and fixed position can not only be moved on a page but also resized.
  • Overrides: copies of such a component can be changed however you like.
  • Push to Master: if you changed one copy, using the "Push to Master" command, you can apply this change to the rest of copies (unless they have their unique changes).
  • Reset Overrides: if you want to reset unique changes and bring back the inheritance from Master.
NEW Menu component
It creates the navigation menu for your site. 
This is a dynamic component that takes into account which pages are there on the site and displays them as a list. Another feature of Menu is a connection between child components. This means if you style one menu item, the other will inherit this style. However, you may also apply styles individually.
Menu details:
  • Menu synchronizes and displays site pages.
  • Page order is synchronized with the Pages tab.
  • Menu styling opportunities: you can style the main wrap component, all menu items at once, all text links at once, only the active menu item, or each item individually.
  • You can style individually the menu items of the second, third and other levels.
  • You can add several menus to the page.
  • You can hide the menu items by specifying the "none" value in the "display" property.
New
SocialMedia component
This component creates button links to groups and accounts in popular social networks. This means that if you style one button, the other will inherit the styles. Still, you may want to style buttons individually.
SocialMedia details:
  • This component shows links to groups and accounts in social networks you specified.
  • Menu styling opportunities: you can style the main wrap component, all menu items at once, all text links at once, only the active menu item, or each item individually.
  • You can change the icon size.
New
Collaboration & project sharing
We introduced the collaboration option so that you could build a project as a team. At this point, the access rights are given via link, i.e. everyone who has a link can edit the project.
In the top right corner, we added the icon. Click on it to see the list of users that have access to the project. In this area, you will also find a button that generates shareable links. This link can be sent to other users so that they can join the project.
new
Integration with GoogleFonts
Before, you could enjoy only sets of system fonts. But now Google Fonts are at your fingertips. Take advantage of them to make your site even more impressive and unique.
new
Nesting pages
From now on, you can nest pages into each other.
new
Renaming layers
Give names to layers so that you could easily find the right one when needed.
New
Layer icons
To make navigation easier, we added icons for layers.
IMPROVE
Clearing styles for the specific part of text
Before, when clearing styles on texts, the action was applied to the texts throughout the whole project. Now you can do it for a particular piece.
NEW
Context menu
Now you can make use of the new context menu with actions for elements and pages.
New
New basic blocks
On top of this, we added new blocks. Find them under the "Simple" category.