Target Audience of This Tutorial
- designers and developers, and advanced users
- some knowledge of HTML and CSS
- access to developer console on the browser.
CSS of Go and Talk Page Builder - Tachyons
- define small utility classes with mostly single purpose
- compose classes to achieve desired result
- apply classes to apply style
- remove classes to reset style
- design elements freely, without worrying about somewhere else collapsing
- remain slim even for complicated projects
- be gentle to mobile browsers with less resources
Strategies to Customize Styles
- customize primary colors, accent colors and shades (dark, primary, light, lighter) in site and page settings
- apply existing Tachyons classes to elements. Here is a full list of tachyons classes
- dropdown input fields of the page builder accept CSS classes from suggested list and manually entered values
- declare or redeclare CSS rules
- load custom CSS files
Declaring CSS Rules
- apply a CSS class to the element you want to style by adding the class name to the element through one of the dropdown input fields. You can find how classes are applied by examining the elements in developer console.
- adding the class to section background to apply to the whole section.
- click or tap on the left edge of the screen to show the vertical toolbar
- click on the globe icon to show the site setting window
- go to “Custom Styles” tab and declare your CSS rules there. the changes take effect immediately
- optionally download the CSS rules and save as styles.css under css folder on your website. The styles.css file will be loaded and will apply to all pages.
- By default, the styles are rendered as inline CSS declarations in the head of a webpage, and apply to all webpages updated afterwards.
Loading Custom CSS Files such as Google Fonts
- hover on the left edge of the screen to show the vertical toolbar, click on the globe icon to show site setting window
- go to tab “Custom Styles”, and enter the full URL to the custom CSS files in one of the CSS URL fields.
- you can select a Google font to get the font URL and paste in a CSS URL field
Exercise: Using Google Fonts
- go to Google Fonts and choose your favorite font.
- after selecting a font, look for the selection bar at the bottom of the screen, click on it to show the selection window.
- follow the prompts on the screen, and find the URL of embedding the font. For example, the URL for a handwriting font Gloria Hallelujah looks like below
https://fonts.googleapis.com/css?family=Gloria+Hallelujah
- copy the URL from Google Fonts page. That is the link between double quotes after href.
- come back to the tutorial, hover on the left edge of the screen to show the vertical toolbar, and click on the globe icon to show site setting window.
- go to Custom Styles tab, and paste the embed URL in one of the CSS URL field.
- then define a CSS class in the text area labelled Custom CSS in Custom Styles tab. Here is an example of defining a class called “handwriting”. Note the leading dot (.) is required before the name “handwriting”. You can find the value of font family in Google Font page.
.handwriting {
font-family: 'Gloria Hallelujah', cursive;
}- go to the cover of this tutorial, click Edit on the horizontal app toolbar to enter edit mode.
- click on the H icon below the tutorial title, clear the value of Title Font Family field, and paste the class name you have defined in the field.
- Click on Editing button to exit edit mode, and see the effect of applying your selected font to the title of this tutorial.
What People Say About It
Love It
Using Custom Styles and Fonts
Go and Talk page builder uses Tachyons CSS to achieve flexible and modular designs. The utility classes take effect only when applied to an element. The element styles are reset to default when the classes are removed. This approach helps to keep the CSS slim even for complicated projects. Designers can style an element freely without worrying about breaking something else.
Go and Talk page builder supports inline style declaration and external CSS files. The inline styles written in the site settings window take effect immediately, and are saved automatically. Professional designers may find this feature useful in creating custom animations as you can watch the animation taking place while you change the parameters. When you are happy about the result, the parameters are already included in the site setting ready for production.
The external CSS URLs can load custom CSS files, external CSS library, or custom fonts such as Google fonts.
About Go and Talk Page Builders
Go and Talk page builder is a lightweight web design tool running in the browser. It empowers designers and marketers to create presentable pages quickly without coding. It is optimized for running on mobile devices such as tablets. The generated web pages are responsive, lightweight and optimized for search engines.