Atom for designers

The "non-code" way

If you are a designer and want to code your websites with Atom, because it's simply awesome and use Github for your choise of cooperation, than this is a small guide for you.

Explainaition

What is Github Desktop for?

To collaborate with others & work together

What is Atom for?

To write and edit your code

The Setup

1. Create a Github account
2. Download Github Desktop
3. Install Github Desktop
4. Login (same as on github.com)
5. Setup github desktop

First Start

6. Create a new repository (File - New)
7. Publish your repository in Github Desktop (Publish)
8. Uncheck upload Privat
9. Wait until uploaded

Edit code in Atom

10. Open Atom
11. Add code

Upload the added code

12. Open Github Desktop
13. See changes
14. “Fetch Origin”

Got it? Get it? Good.

Aditional Explainations

How to work on other projects

1. Open a repository
2. Button “Clone or Download”
3. Copy Link (HTTPS)
4. Open Github Desktop
   1. File
   2. Clone Repository
   3. Paste Link
   4. Clone
5. Show some love

Html preview on Github

1. Take your html file
2. Add

http://htmlpreview.github.io/?

infont of the link.

3. You get: something like this

Html preview in Atom

1. Install “atom-html-preview”
2. Press CNRL+SHIFT+H while you are on an html document

Install packages in Atom

1. CNRL+Komma
2. "+ Install"
3. Search or past link
4. Klick on "install"

Packages you need as a (web-) designer

• atom-html-preview /* Preview your html */
• atom-beautify /* Cleanes your code */

Commit new Code

• Write a comment
• Commit
• Fetch origin

But what does it mean?

"Pull"

Means to "pull a request" - get data from the git repository

"Push"

Means to "push a request" - send data to the git repository

"Fetch origin"

Syncronise with the git repository

Branch

From Githubs official guide

Branching is the way to work on different versions of a repository at one time.

Branch visualisation

Yes you can watch the "tree" grow and how versions flow together

• Go to your repository
  • Insights
    • Graph
      • Network

#SCSS

Installation

• https://www.youtube.com/watch?v=GIn6w6u-rPY

Learning

• Learn sass (scss) http://sass-lang.com/guide

Atom Packages

• For prossesing you can use package: "sass-autocompile"
• To preview non-min css use atom-beautify */

More

Realy nice help guides by Github: Get more

Disclaimer

Be kind I am a newbie and giving other newbie designers an simple instruction