зеркало из https://github.com/mozilla/brackets.git
Revert "Getting Started project: remove useless whitespace, fix an arrow"
This commit is contained in:
Peter Flynn
Родитель
6345cf1228
Коммит
e9ef74afa8
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
|
@ -8,42 +9,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
|
||||
|
|
@ -52,7 +54,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
|
||||
-->
|
||||
|
|
@ -62,7 +64,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>
|
||||
|
||||
|
|
@ -71,25 +73,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
|
||||
-->
|
||||
|
|
@ -105,34 +107,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
|
||||
|
|
@ -141,7 +143,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
|
||||
|
|
@ -149,23 +151,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 -> 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>
|
||||
|
|
@ -179,7 +181,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>
|
||||
<!--
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче