Mirrors/brackets
1
0
Fork 0
mirror of https://github.com/adobe/brackets.git synced 2024-11-20 18:02:54 +01:00
Code Issues Releases Activity

Getting Started project: remove useless whitespace, fix an arrow

Browse Source 
In Getting Started project
– remove useless whitespace
– replace “an arrow” (<) with “->”
This commit is contained in:
Valtteri Laitinen 2015-04-14 16:27:37 +03:00
parent 209806170d
commit 0da08f5be4
1 changed files with 32 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
samples/root/Getting Started/index.html
View File

@ -1,6 +1,5 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -9,43 +8,43 @@
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>GETTING STARTED WITH BRACKETS</h1>
<h2>This is your guide!</h2>
<!--
MADE WITH <3 AND JAVASCRIPT
-->
<p>
Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight,
yet powerful, code editor that blends visual tools into the editor so you get the right amount of help
Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight,
yet powerful, code editor that blends visual tools into the editor so you get the right amount of help
when you want it.
</p>
<!--
WHAT IS BRACKETS?
-->
<p>
<em>Brackets is a different type of editor.</em>
Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other
editors. And Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets
have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build
Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other
editors. And Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets
have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build
Brackets. To learn more about how to use the key features, read on.
</p>
<!--
GET STARTED WITH YOUR OWN FILES
-->
<h3>Projects in Brackets</h3>
<p>
In order to edit your own code using Brackets, you can just open the folder containing your files.
Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and
Quick Edit only use files within the currently open folder.
</p>
<samp>
Once you're ready to get out of this sample project and edit your own code, you can use the dropdown
in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the
@ -54,7 +53,7 @@
You can also use the dropdown later to switch back to folders you've opened previously, including this
sample project.
</samp>
<!--
THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
-->
@ -64,7 +63,7 @@
<kbd>Cmd/Ctrl + E</kbd> shortcut to open a quick inline editor that displays all the related CSS.
Make a tweak to your CSS, hit <kbd>ESC</kbd> and you're back to editing HTML, or just leave the
CSS rules open and they'll become part of your HTML editor. If you hit <kbd>ESC</kbd> outside of
a quick inline editor, they'll all collapse. Quick Edit will also find rules defined in LESS and
a quick inline editor, they'll all collapse. Quick Edit will also find rules defined in LESS and
SCSS files, including nested rules.
</p>
@ -73,25 +72,25 @@
<kbd>Cmd/Ctrl + E</kbd>. You should see a CSS quick editor appear above, showing the CSS rule that
applies to it. Quick Edit works in class and id attributes as well. You can use it with your
LESS and SCSS files also.
You can create new rules the same way. Click in one of the <!-- <p> --> tags above and press
<kbd>Cmd/Ctrl + E</kbd>. There are no rules for it right now, but you can click the New Rule
button to add a new rule for <!-- <p> -->.
</samp>
<a href="screenshots/quick-edit.png">
<img alt="A screenshot showing CSS Quick Edit" src="screenshots/quick-edit.png" />
</a>
<p>
You can use the same shortcut to edit other things as well - like functions in JavaScript,
colors, and animation timing functions - and we're adding more and more all the time.
colors, and animation timing functions - and we're adding more and more all the time.
</p>
<p>
For now inline editors cannot be nested, so you can only use Quick Edit while the cursor
is in a "full size" editor.
</p>
<!--
LIVE PREVIEW
-->
@ -107,34 +106,34 @@
there is no need to copy and paste the final code back into the editor. Your code runs in the
browser, but lives in your editor!
</p>
<h3>Live Highlight HTML elements and CSS rules</h3>
<p>
Brackets makes it easy to see how your changes in HTML and CSS will affect the page. When your cursor
is on a CSS rule, Brackets will highlight all affected elements in the browser. Similarly, when editing
an HTML file, Brackets will highlight the corresponding HTML elements in the browser.
</p>
<samp>
If you have Google Chrome installed, you can try this out yourself. Click on the lightning bolt
If you have Google Chrome installed, you can try this out yourself. Click on the lightning bolt
icon in the top right corner of your Brackets window or hit <kbd>Cmd/Ctrl + Alt + P</kbd>. When
Live Preview is enabled on an HTML document, all linked CSS documents can be edited in real-time.
The icon will change from gray to gold when Brackets establishes a connection to your browser.
Now, place your cursor on the <!-- <img> --> tag above. Notice the blue highlight that appears
around the image in Chrome. Next, use <kbd>Cmd/Ctrl + E</kbd> to open up the defined CSS rules.
Try changing the size of the border from 10px to 20px or change the background
color from "transparent" to "hotpink". If you have Brackets and your browser running side-by-side, you
will see your changes instantly reflected in your browser. Cool, right?
</samp>
<p class="note">
Today, Brackets only supports Live Preview for HTML and CSS. However, in the current version, changes to
JavaScript files are automatically reloaded when you save. We are currently working on Live Preview
support for JavaScript. Live previews are also only possible with Google Chrome, but we hope
to bring this functionality to all major browsers in the future.
</p>
<h3>Quick View</h3>
<p>
For those of us who haven't yet memorized the color equivalents for HEX or RGB values, Brackets makes
@ -143,7 +142,7 @@
same goes for images: simply hover over the image link in the Brackets editor and it will display a
thumbnail preview of that image.
</p>
<samp>
To try out Quick View for yourself, place your cursor on the <!-- <body> --> tag at the top of this
document and press <kbd>Cmd/Ctrl + E</kbd> to open a CSS quick editor. Now simply hover over any of the
@ -151,23 +150,23 @@
on the <!-- <html> --> tag and hovering over any of the background image values. To try out the image
preview, place your cursor over the screenshot image included earlier in this document.
</samp>
<h3>Need something else? Try an extension!</h3>
<p>
In addition to all the goodness that's built into Brackets, our large and growing community of
extension developers has built hundreds of extensions that add useful functionality. If there's
something you need that Brackets doesn't offer, more than likely someone has built an extension for
it. To browse or search the list of available extensions, choose <strong>File &gt; Extension
it. To browse or search the list of available extensions, choose <strong>File -> Extension
Manager</strong> and click on the "Available" tab. When you find an extension you want, just click
the "Install" button next to it.
</p>
<!--
LET US KNOW WHAT YOU THINK
-->
<h2>Get involved</h2>
<p>
Brackets is an open-source project. Web developers from around the world are contributing to build
Brackets is an open-source project. Web developers from around the world are contributing to build
a better code editor. Many more are building extensions that expand the capabilities of Brackets.
Let us know what you think, share your ideas or contribute directly to the project.
</p>
@ -181,7 +180,7 @@
<li><a href="https://twitter.com/brackets">@brackets on Twitter</a></li>
<li>Chat with Brackets developers on IRC in <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets on Freenode</a></li>
</ul>
</body>
</html>
<!--