August and September 2020
NEW Publish your project on Netlify
How it works:
  • Commit your Quarkly project to the GitHub repository;
  • Log in to Netlify (or sign up if you don't have an account);
  • Select the GitHub repositories that Netlify will be able to access;
  • Select an existing site on Netlify or create a new one;
  • Press the "Deploy to Netlify" button;
  • Click on the link to the site when the "Success" sign appears on the badge.
How to publish changes:
  • Commit the changes to the master branch of the GitHub repository via the builder interface;
  • Click the "Deploy to Netlify" button that will start the process of building and publishing the project
After deploying, the "Deploy to Netlify" button will not be available until new changes in the project are committed. The repository that is used to build a site in Netlify can be replaced with another.
Upload Images
Now you can upload your images to the project. Upload several files at a time with the maximum size of 4MB.
Page settings
Configure the description, URL, global styles, and favicon for each page.
What's inside:
  • Favicon. Install unique icons for different devices and individual tile background color for Windows 10.
  • SEO settings. Specify the title, description and add Open Graph markup for social networks.
  • Global styles. Assign styles directly to the "body" tag of the page. They can affect the default styles of nested components.
And more!
  • Enjoy the new breakpoint selection interface. Now, when you enter the project, the last active page is shown;
  • You can sort variables in the theme;
  • Double click on Image opens the image selection modal window;
  • Google Page Insight metrics have been improved for projects
Some fixes
  • The shadow color is now displayed;
  • Code components nested in other code components are now available for export
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.
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.
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
We updated the repository and made a page for our library to create atomic React components.
  • 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
It’s a library of UI components used in Quarkly and designed in Storybook.
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.
Unsplash images
Unsplash is one of the most popular free image stocks. Search and select images directly from the Quarkly interface.
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 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.
Help button
A button to call a window with links to documentation and other materials.
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.
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.
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.
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.
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.
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.
Nesting pages
From now on, you can nest pages into each other.
Renaming layers
Give names to layers so that you could easily find the right one when needed.
Layer icons
To make navigation easier, we added icons for layers.
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.
Context menu
Now you can make use of the new context menu with actions for elements and pages.
New basic blocks
On top of this, we added new blocks. Find them under the "Simple" category.
Made on Quarkly