Skip to content
This repository was archived by the owner on Sep 6, 2021. It is now read-only.

Reworked the getting started guide. #3498

Merged
jasonsanjose merged 1 commit into from
Apr 19, 2013
Merged

Reworked the getting started guide. #3498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
254 changes: 137 additions & 117 deletions samples/root/Getting Started/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,123 +10,143 @@
</head>
<body>

<h1>GETTING STARTED WITH BRACKETS</h1>
<h2>This is your guide!</h2>

<!--
MADE WITH <3 AND JAVASCRIPT
-->

<p>
Welcome to an early preview of Brackets, a new open-source editor for the next generation of
the web. We’re big fans of standards and want to build better tooling for JavaScript, HTML and CSS
and related open web technologies. This is our humble beginning.
</p>

<!--
WHAT IS BRACKETS?
-->
<p>
<em>You are looking at an early build of Brackets.</em>
In many ways, Brackets is a different type of editor. One notable difference is that this editor
is written in JavaScript. So while Brackets might not be ready for your day-to-day use quite yet,
we are using it every day to build Brackets.
</p>


<h2>We're trying out a few new things</h2>

<!--
THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
-->
<h3>Quick Edit for CSS and JavaScript</h3>
<p>
When editing HTML, use the <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 editor, they’ll all collapse. No more switching between
documents and losing your context.
</p>

<samp>
Want to see it in action? Place your cursor on the <!-- <samp> --> tag above and press
<kbd>Cmd/Ctrl + E</kbd>. You should see a CSS quick editor appear above. On the right you will see
a list of the CSS rules that are related to this tag. Simply scroll the rules with
<kbd>Alt + Up/Down</kbd> to find the one you want to edit.
</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 in JavaScript code to view the body of a function you're calling, by
placing the cursor on the function name. Or open a graphical color picker by placing the cursor on
any color in hex, rgb or hsl format. 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
-->
<h3>Preview CSS changes live in the browser</h3>
<p>
You know that "save/reload dance" we've been doing for years? The one where you make changes in
your editor, hit save, switch to the browser and then refresh to finally see the result?
With Brackets, you don't have to do that dance.
</p>
<p>
Brackets will open a <em>live connection</em> to your local browser and push CSS updates as you
type! You might already be doing something like this today with browser-based tools, but with Brackets
there is no need to copy and paste the final CSS 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>
To help visualize the relationship between CSS and HTML, when your cursor is on a CSS rule,
Brackets will highlight all affected elements in the browser. Also, 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
icon in the top right 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 1px to 10px or change the background
color from "dimgray" 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>
<h1>GETTING STARTED WITH BRACKETS</h1>
<h2>This is your guide!</h2>

<p class="note">
Today, Brackets only supports Live Preview for CSS. We are currently working on Live Preview support
for HTML and JavaScript. In the current version, changes to HTML or JavaScript files are automatically
reloaded when you save. Live previews are only possible with Google Chrome. We want to bring this
functionality to all major browsers, and we're looking forward to working with those vendors to do so.
</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
a better code editor. Let us know what you think, share your ideas or contribute directly to the
project.
</p>
<ul>
<li><a href="http://brackets.io">Brackets.io</a></li>
<li><a href="http://blog.brackets.io">Brackets Team Blog</a></li>
<li><a href="https://github.com/adobe/brackets">Brackets on GitHub</a></li>
<li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
<li><a href="http://groups.google.com/group/brackets-dev">Brackets Developer Mailing List</a></li>
<li><a href="https://twitter.com/#!/brackets">@Brackets on Twitter</a></li>
<li>Chat with Brackets developers on IRC in #brackets on Freenode</li>
</ul>
<!--
MADE WITH <3 AND JAVASCRIPT
-->

<p>
Welcome to an early preview of Brackets, a new open-source editor for the next generation of
the web. We’re big fans of standards and want to build better tooling for JavaScript, HTML and CSS
and related open web technologies. This is our humble beginning.
</p>

<!--
WHAT IS BRACKETS?
-->
<p>
<em>Brackets is a different type of editor.</em>
One notable difference is that this editor is written in JavaScript, HTML and CSS.
This 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. It also has some unique features like Quick Edit,
Live Preview and others that you may not find in other editors.
To learn more about how to use those features, read on.
</p>


<h2>We're trying out a few new things</h2>

<!--
THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
-->
<h3>Quick Edit for CSS and JavaScript</h3>
<p>
No more switching between documents and losing your context. When editing HTML, use the
<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.
</p>

<samp>
Want to see it in action? Place your cursor on the <!-- <samp> --> tag above and press
<kbd>Cmd/Ctrl + E</kbd>. You should see a CSS quick editor appear above. On the right you will see
a list of the CSS rules that are related to this tag. Simply scroll the rules with
<kbd>Alt + Up/Down</kbd> to find the one you want to edit.
</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 for JavaScript code to view the body of a function by
placing the cursor on the name of the function you are calling. 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
-->
<h3>Preview CSS changes live in the browser</h3>
<p>
You know that "save/reload dance" we've been doing for years? The one where you make changes in
your editor, hit save, switch to the browser and then refresh to finally see the result?
With Brackets, you don't have to do that dance.
</p>
<p>
Brackets will open a <em>live connection</em> to your local browser and push CSS updates as you
type! You might already be doing something like this today with browser-based tools, but with Brackets
there is no need to copy and paste the final CSS 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
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 1px to 10px or change the background
color from "dimgray" 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 CSS. However, in the current version, changes to HTML
and JavaScript files are automatically reloaded when you save. We are currently working on Live Preview
support for HTML and 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
it quick and easy to see exactly what color is being used. In either CSS or HTML, simply hover over any
color value or gradient and Brackets will display a preview of that color/gradient automatically. The
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 hover preview 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
color values within the CSS. You can also see it in action on gradients by opening a CSS quick editor
on the HTML tag at the top of this page and hovering over any of the background image values. To test
out the image preview, place your cursor over the screenshot image included earlier in this document.
</samp>

<!--
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
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>
<ul>
<li><a href="http://brackets.io">Brackets.io</a></li>
<li><a href="http://blog.brackets.io">Brackets Team Blog</a></li>
<li><a href="https://github.com/adobe/brackets">Brackets on GitHub</a></li>
<li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Brackets Extensions</a></li>
<li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li>
<li><a href="http://groups.google.com/group/brackets-dev">Brackets Developer Mailing List</a></li>
<li><a href="https://twitter.com/#!/brackets">@Brackets on Twitter</a></li>
<li>Chat with Brackets developers on IRC in #brackets on Freenode</li>
</ul>

</body>
</html>
Expand All @@ -151,4 +171,4 @@ <h2>Get Involved</h2>
[:::::::::::::: ::::::::::::::]
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]

-->
-->
5 changes: 5 additions & 0 deletions samples/root/Getting Started/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
html {
background-color: #eeeeee;
background-image: linear-gradient(bottom, rgb(238,238,238) 18%, rgb(153,153,153) 59%, rgb(238,238,238) 80%);
background-image: -o-linear-gradient(bottom, rgb(238,238,238) 18%, rgb(153,153,153) 59%, rgb(238,238,238) 80%);
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 18%, rgb(153,153,153) 59%, rgb(238,238,238) 80%);
background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 18%, rgb(153,153,153) 59%, rgb(238,238,238) 80%);
background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 18%, rgb(153,153,153) 59%, rgb(238,238,238) 80%);
}

body {
Expand Down