TweakStyle Docs

• Introduction
  • What is TweakStyle
  • Why TweakStyle
  • What TweakStyle is Not
  • System requirements
  • Trial & Licensing model
• Getting Started
• Workspace
• Create a project
  • From scratch
  • From existing files on your computer
  • From an online website
  • From a git/github repository
  • From a remote server (ftp/sftp)
• Project setup
  • Use embedded static server
  • Use your own local server
  • Work directly on an online website
• Preview
  • Navigating
  • Request mapping & Override
• Code
• Build on change
• Preprocessors support
• How can I help?
  • Spread the word
  • Purchase a license
  • Report bugs
  • Give us feedback

# Introduction

Welcome to the TweakStyle documentation. This is a work in progress and will be continuously updated. Pull requests are welcome so if you would like to contribute, please fork me on GitHub.

# What is TweakStyle

TweakStyle is an Integrated Development Environment for Web Development.
Unlike most IDEs, TweakStyle is tailor-made for Front-end Development and understands Web Design.
It tends to packs all you need to code, preview and debug Web interfaces with the perfect blend of features.

# Why TweakStyle

“It first started with a daily frustration. I was developing the front end of a web app and with the tools I had, the development process was really painful. I was switching all day long between tools that didn’t integrate well with each other (code editor, build tools, browser & development tools) and was taking a ridiculously long time to make small adjustments.”, Félicien François, Creator of TweakStyle

Our usual workflow was heavily splitted, inefficient and unconfortable.
TweakStyle steps up your workflow to the next level by letting you preview and test as you code in a breeze.

# What TweakStyle is Not

TweakStyle is not a Content Management System, even if it can be used to edit web contents.
TweakStyle is not a Visual Editor, even if it packs some visual tools.

TweakStyle is definitely made to Code.
As a result it requires a minimum knowledge of Web Development to be used.

# System requirements

Operating System:

• Mac OS X 10.9+ 64bit
• Windows 7+ (ARM version of Windows is not supported for now)
• Linux (Verified to work on Ubuntu 12.04 and later, Fedora 21 and Debian 8)

Hardware requirements:

• 2GB of RAM
• 125MB of available hard-disk space
• 1280x800 display with 16-bit video card

# Trial & Licensing model

TweakStyle may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation However, you will get occasionally a trial reminder.
TweakStyle license is per user, with a one time fee. With one license you can run it on all your computers and operating systems and you get all future updates free of charge.

# Getting Started

TweakStyle UI is split in 2 panes.
When opening TweakStyle, you’ll see the Workspace tab on the left side and the Preview pane on the right side.
When you’ll open files for editing or when you’ll navigate in the preview pane, code files will be pined in new tabs, on the left side.

When first opening TweakStyle, a sample project is added to your Workspace to let you make tests without having to Create a project.

# Workspace

The workspace tab is where you add, remove and manage your projects and files.

Here a few things you can try:

• Open a page in the preview by either double clicking on a .html file or draging it to the preview tab.
• Simply pin a file to edit it by either double clicking on it (except for html files), draging it to a new (or existing) code tab or right click on it and choose “Pin in code tab”
• Right click on the project, directory and files to see all what you can do

As soon as you’re ready, you should create a new project.
You can also remove the sample project to clear your workspace by right clicking on the project and click on “Delete project”.

# Create a project

In TweakStyle, there are several ways of starting a project. You can either create a project from scratch, from existing files or from an online website.

# From scratch

• Create an empty project ^[1]
  • Click on the “Add project” button in the workspace tab (left pane)
  • You can leave all options to default or change the project location
  • Then click on “Ok”, this will creates an empty project directory, at the bottom of the workspace tab.
• Create directory structure ^[2]
  • Right click on the project to get a context menu and click on “New directory”
  • Name the directory and apply
  • Do the same for each directory you want to create
  • To create a subdirectory, right click on the parent directory instead of the project
• Create new files
  • Right click on the project or a directory and click on “New file”
  • Name your file
  • Then open it to edit it (Either double click, or drag it to a tab or right click > pin in code tab)
• Copy files from another project ^[3]
  • Right click on the project or a directory and click on “Open in explorer/finder”
  • Make your files operations and come back to TweakStyle
  • TweakStyle workspace should update automatically. If not, you can force it using right click > “Refresh”
• Edit files
  • Double click on the files you want to edit or drag it to a code tab or right click > “Pin in code tab”
  • Tips: you can recursively pin all files in a directory by dragging it to a code tab or right click > “Pin all in code tab”
• Preview html files
  • Double click on html file or drag it to a preview tab or right click > “Preview”

# From existing files on your computer

• Add the project to workspace
  • Click on the “Add project” button in the workspace tab (left pane)
  • Select the root directory of your project
  • Then click on “Ok”, this will add the project at the bottom of the workspace tab.
• Edit files
  • Double click on the file you want to edit or drag it to a code tab or right click > “Pin in code tab”
  • Tip: you can recursively pin all files in a directory by dragging it to a code tab or right click > “Pin all in code tab”
• Preview html files
  • Double click on html file or drag it to a preview tab or right click > “Preview”

# From an online website

• Create an empty project
  • Click on the “Add project” button in the workspace tab (left pane)
  • You can leave all options to default or change the project location
  • Then click on “Ok”, this will create an empty project directory, at the bottom of the workspace tab.
• Navigate to the website
  • In the right pane, type the url of the website in the url bar and press Enter
  • Navigate to the desired page(s)
  • Requests involved in the display are automatically listed in the left pane
  • You can open each file and edit it. Just click on it and edit.
• Save / Dump files in the project
  • You can save the changes and/or dump requests to your project
  • Click on the “Save” or “Add to workspace” button (or use ⌘+S / Ctrl+S)
  • This will open the “Add to workspace” tool
  • Click on the first arrow of the “To” field and select the project you want to save the file(s) in.
  • Then click on the next arrow(s) to select the directory path inside the project
  • Click on OK to save/dump the file
  • Tip: You can save several requests in bulk by changing the “From” path with wildcards. Click on the parts of the path you want to change into a wildcard.

# From a git/github repository

For now, TweakStyle does not natively support version control. You can use TweakStyle with a versioned project, but you’ll have to use a third party software for all git operations (clone, pull, compare, commit, …).

• Clone repository: Use third party software or command line: git clone https://github.com/xxx/xxx
• Create the project in TweakStyle: From existing files on your computer
• Make your changes
• Commit/Push: Use third party software or command line: git commit, git push

# From a remote server (ftp/sftp)

For now, TweakStyle does not natively support FTP or SFTP. You can use TweakStyle on a project published on FTP, but you’ll have to use a third party software for all ftp operations (get source and push to remote server).

• Get source: Use third party software
• Create the project in TweakStyle: From existing files on your computer
• Make your changes
• Push to remote server: Use third party software

# Project setup

# Use embedded static server

TweakStyle is shipped with an embedded static server. It is the default option when creating a new project, and you don’t have anything to do to use it.
When opening an html file in the preview, it will automatically start, on an available port and with root path equal to the project root.
It allows to preview html files seemlessly, without having to wonder about root path or security restriction issues.
But this is a basic static server: It does not support any configuration files nor server side languages (PHP, Nodejs, Rails, Java).
For those, you’ll have to use your own local server.

# Use your own local server

• In the workspace tab, right click on the project and choose “Project settings”
• Uncheck “Use Embedded static server” and fill in the base url of your local server corresponding to the project root (Example: http://localhost:8000/myproject/)
• Click on OK. Opening a file in the preview will now use your local server and requests will be automatically mapped to your project files. If parts of the requests are not well mapped (in orange instead of blue), you can add a mapping rule using the “Add to workspace” tool
• Tip: your can also do it when creating the project by clicking on the “Advanced settings” button

# Work directly on an online website

TweakStyle allows you to preview changes on an online website, through a feature called “Override”.

• Navigate to the website
  • In the right pane, type the url of the website in the url bar and press Enter
  • Navigate to the desired page(s)
  • Requests involved in the display are automatically listed in the left pane
  • You can open each file and edit it. Just click on it and edit. When editing a stylesheet, preview is updated live, while typing.
• Save / Dump files in the project
  • You can save the changes and/or dump requests to your project
  • Click on the “Save” or “Add to workspace” button (or use Control/Command + S)
  • This will open the “Add to workspace” tool
  • Click on the first arrow of the “To” field and select the project you want to save the file(s) in.
  • Then click on the next arrow(s) to select the directory path inside the project
  • Click on OK to save/dump the file
  • Tip: You can save several requests in bulk by changing the “From” path with wildcards. Click on the parts of the path you want to change into a wildcard.
• Publish changes to the website
  • For now, TweakStyle does not have any publishing feature, so you’ll have to use a thrid party software^[4]

If you want to set this as the default for a project, you can set the project host:

• In the workspace tab, right click on the project and choose “Project settings”
• Uncheck “Use Embedded static server” and fill in the base url of the online website corresponding to the project root (Example: http://mywebsite.com/myproject/)
• Click on OK. Opening a file in the preview will now open the corresponding url online and requests will be automatically mapped to your project files. If parts of the requests are not well mapped (in orange instead of blue), you can add a mapping rule using the “Add to workspace” tool

# Preview

# Navigating

The preview pane lets you navigate like in a browser^[5].
To navigate, you can either type an url in the address bar and press Enter or open a file from the workspace.
When opening a file from the workspace, the preview will browse an URL that depends on your Project setup. It defaults to the embedded local static server.

# Request mapping & Override

When navigation occurs, a new Code tab is opened in the left side, with the files involved in the previewed page.
TweakStyle tries to map the requests to your project files. All the files successfully mapped, are colored in blue while others remain in orange.
At the same time, Stylesheets (usually .css files) are Overridden with the resolved local files and synced with the code tab.
This means that the preview is updated live and instantly:

• When loading the page (may occasionally cause a very short blinking)
• When local stylesheet files change on the file system
• When changing a stylesheet in the code pane (while typing)

Since v0.9.0, TweakStyle supports Override for all kind of files (HTML, Javascript, Images, …). But Live Update without reloading is only available for Stylesheets.
You’ll have to save the changes (Ctrl+S / ⌘+S) and refresh preview in order to see the changes applied.
If the Auto Reload feature of the preview is toggled on, it will automatically reload on save.

# Code

A code tab is automatically added to the left pane when opening files from the workspace, navigating in the preview or selecting an element.

A code tab can have several files pined in it.

• Blue files are local ones and can be edited
• Orange files are remote ones. For now they can’t be edited

Here a few things you can do with files:

• Click to fold / unfold the code editor in accordion mode
• Ctrl+Click to fold / unfold keeping other code editors open
• Drag and drop to the left to unpin the code editor
• Drag and drop up and down to sort files in the pane
• Drag to another tab to pin the file in another tab

# Build on change

TweakStyle v0.9.0 introduced a new “Build On Change” feature, available on local files (blue ones).
Click on the wrench icon to open the build settings dialog:

• Path: The path of the file(s) that should be watched for change.
• Build command: The command line to execute. TweakStyle provide some variables about the changed file to help you specify the input and output path of you command:
  • $workingdir: The directory from where the command is executed (ex: /path/to/my/project)
  • $fullpath: The absolute path (ex: /path/to/my/project/subdir/myfile.sass)
  • $relpath: The path relative to the working directory (ex: subdir/myfile.sass)
  • $dirpath: The absolute path of the directory (ex: /path/to/my/project/subdir)
  • $reldirpath: The relative path of the directory (ex: subdir)
  • $filename: The name of the file including extension (ex: myfile.sass)
  • $basename: The name of the file without extension (ex: myfile)
  • $extension: the file extension (ex: .sass)

For a few known Preprocessors, the Build command is prefilled with a default command line:

• LESS: lessc $relpath $reldirpath/$basename.css --source-map
• SASS & SCSS: node-sass $relpath $reldirpath/$basename.css --source-map
• Stylus: stylus --compress --sourcemap < $relpath > $reldirpath/$basename.css
• TypeScript: tsc $relpath $reldirpath/$basename.js --sourceMap
• Coffee: coffee -c $relpath $reldirpath/$basename.js --map
• Dart: dart2js --out=$reldirpath/$basename.js $relpath

Note: Compiler binaries are not included with TweakStyle. You’ll have to install them separatly.

The command line will be executed each time one of the matching files change or is saved.
To trigger a build manually you can open the file, focus the editor and press Ctrl+S / ⌘+S.

# Preprocessors support

SASS, LESS or Stylus are examples of Preprocessors for the CSS language.
When using one of those, the source code must be processed (i.e. built) into CSS before it can be used by browsers.

TweakStyle v0.8.0 and v0.9.0 introduces some support of Preprocessors and custom builds:

• Source files automatically pined
• Live Update on save without having to reload preview
• Build on change to compile files

This is made possible through Sourcemap support and Watch for file change

For now, TweakStyle does not embed any preprocessor compiler. To get this working, you’ll have to setup the compiler yourself.
Don’t forget to enable sourcemaps and use watch mode (compile on save).
You should find easily how to setup those options in the documentation of the Preprocessor you use.

# How can I help?

# Spread the word

Tell about TweakStyle! Share your though, your screenshots, videos and gif. Forward and comment the latest updates on Twitter.
The more, the merrier!

# Purchase a license

https://tweakstyle.com/#buy.html

# Report bugs

Got a crash, an error or an unexpected behavior? Please Report the bug. We’ll answer you and fix it as soon as possible.

# Give us feedback

Help us improve TweakStyle, Give us feedback. Vote for the features you expect the most and post your ideas.