Getting Started With Tweak
On this example we will:
- Install Nodejs and Tweak
- Get started with Tweak template
Prequisite
- Install Nodejs:https://nodejs.org/en/download/
- Install Tweak Chrome Extension: https://tweak.crewspace.io/
Setting up Tweak Server and Template
Click Tweak browser icon after installing the extension.
If prompted login or signup using your gmail credentials.
Choose a template to start from, in this case we are going to get started with blank template, click download on the template.
The template comes with a Tweak server. Tweak requires a server to serve the page, which Tweak can then access through the browser. In theory Tweak can be used with any server, however only with Tweak server is it possible to use save and live reload features.
Extract the template to a location of your choice, in this example we extract it to Documents.
Navigate to the location where you extracted the template.
If you do not know how to navigate to a folder using terminal here is a link showing how:
For Windows users:
For Mac users:
For Linux users:
You are using Linux so I assume you already know this…or should :D.
Now to install the Tweak server, in the folder of the template execute:
npm installAfter installation to start the server execute:
npm startThis will start the tweak server. On Chrome navigate to http://localhost:8080. Congrats you have your first Tweak template running!
Let’s Tweak!
To start tweaking the page simply click the Tweak browser icon.
Ok now the template is editable. The empty template is not really empty as it has the basic skeleton of a Tweak page and comes with initial section and component added to the page.
Let’s make the page look more interesting. First thing let’s change the background colour of the initial section. Click on the background colour action on the left side of the section and change the section colour to blue.
Next drag the text component “Tweak Empty Page”, to the middle and change the colour to white as well as change the text to “My Tweak Page” by clicking edit. Then align text to center.
Let’s add another section under this one, click on the Tweak FAB (Floating Action Button) on the lower right.
Click on the add action. This will open up a sidebar with three tabs: Elements, Sections and Images. These are page specific components that are used to build your page.
Open the sections tab and click on the section white section.
Add section indicator will appear below the initial section, click on it to add the section.
Let’s add a component to the new section. Using the Tweak FAB choose add component and click on the example component and place it on the newly added section. Justify the text and drag it to the center using the align guides.
Finally add Tweak logo through the images tab on the Tweak add sidebar, Place the image on new section and resize by dragging it from the left or right border, then align it on top of the example component as shown in the image below.
Mobile layout
Switch to mobile layout by clicking on Tweak FAB and choosing the mobile layout action.
As you might see the design is all messed up now, but no reason to panic! This is only because you switched to mobile layout and you haven’t yet designed the layout for it.
Simple the way you did before drag the components and align them to center. When you switch back to desktop layout you can see the layout is preserved.
Saving changes
To save your changes simple click on the Tweak FAB and click save, this will save all your changes.
That’s it! That is the very basics of Tweak. But to truly get the full benefit of Tweak, you need some HTML and CSS knowledge to create your own custom components and sections.
Feel free to leave questions on the comments section or write me in twitter @ilmiali.
