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

Incorporating changes for the brackets.io redesign #205

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
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
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@ Thumbs.db

#OSX .DS_Store files
.DS_Store
node_modules/
npm-debug.log
*.map
3 changes: 3 additions & 0 deletions .gitmodules
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
[submodule "dev"]
path = dev
url = https://github.com/adobe/brackets-site-sass
244 changes: 213 additions & 31 deletions 404.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,62 +29,244 @@
<meta name="viewport" content="width=device-width" />
<title>Brackets - Page Not Found (404)</title>

<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/foundation.min.css" />
<link rel="stylesheet" href="./css/normalize.css" />
<link rel="stylesheet" href="./css/foundation.min.css" />
<link rel="stylesheet" href="./css/brackets.min.css" />

<link rel="stylesheet" href="/css/brackets.io.css">

<!-- Linked Favicon -->
<link rel="shortcut icon" href="favicon.ico" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Has the icon and the fonts below at lines 39 and 40 legally validated to be used in the site? Check with PgM once on the legal.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The favicon used is the existing one. I have not changed that.
As for the webfonts. They are served though Google fonts API, and are free to use in a commercial and Non-commercial project. https://developers.google.com/fonts/

All other icons used have been properly attributed for, in consultation with Legal

<!-- Linked Web font -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<!-- This needs to be at the top, not at the bottom like the other JS. Source Sans Pro - Light, Regular, Italic, Semibold -->
<script src="//use.edgefonts.net/source-sans-pro:n3,n4,n6,i3,i4;source-code-pro:n4.js"></script>

<!-- These stop FOUT -->
<style type="text/css">
.wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4,
.wf-loading h5, .wf-loading h6, .wf-loading p, .wf-loading a {
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading h5,
.wf-loading h6,
.wf-loading p,
.wf-loading a {
visibility: hidden;
}
</style>

</style>

<link rel="shortcut icon" href="/favicon.ico" />
</head>

<body>
<div id="header-wrapper">
<div id="header" class="row">
<div class="large-12 columns clearfix">
<h1 class="brackets-logo">
<a href="index.html">
<i></i>Brackets</a>
</h1>
<div class="mobile-nav">
<a id="hamburger" href="#">Menu</a>
<body class="background-body">
<!-- Header Section -->
<header>
<div class="row">
<div class="large-12 columns">
<div class="logo">
<a href="index.html"><i></i>Brackets</a>
</div>
<div class="nav clearfix">
<div class="nav-links">

<div class="nav">
<div class="nav-right hide-mobile">
<a title="Download" id="download-plain-brackets" class="action-download-brackets" href="#">
<i class="nav-download"></i>
<span>Download
<d class="download-brackets-version"></d>
</span>
</a>
<div class="divider"></div>
</div>
<div class="nav-center">
<a href="contribute.html" class="contribute" data-i18n="nav.contribute">Contribute</a>
<a href="docs/current/modules/brackets.html" data-i18n="nav.apidocs">API Docs</a>
<a href="https://registry.brackets.io/" data-i18n="nav.extensions">Extensions</a>
<a href="http://blog.brackets.io" data-i18n="nav.blog">Blog</a>
<a href="https://github.com/adobe/brackets/wiki/Troubleshooting" data-i18n="nav.support">Support</a>
</div>
<div class="social-links">
<a class="social-links-item github-icon" href="https://www.github.com/adobe/brackets" title="GitHub">GitHub</a>
<a class="social-links-item twitter-icon" href="https://twitter.com/brackets" title="Twitter">Twitter</a>
</div>

<div class="collapsed-menu">
<a><i class="hamburger"></i></a>
</div>

<div class="nav-user">
<div class="nav-button hide-mobile">
<a title="Download" id="download-plain-brackets" class="action-download-brackets" href="#">
<i class="nav-download"></i>
<span>Download
<d class="download-brackets-version"></d>
</span>
</a>
</div>
</div>
</div>
</div>
</div>

<div id="hero-wrapper" class="gradient">
<div id="hero" class="row no-bg-img">
<div class="large-12 columns">
<h1>You found our 404 page!</h1>
<p>Check if you have the right URL or go to the <a href="/">Homepage</a>.</p>
</header>

<!-- Hero Section -->
<section>
<div id="hero-wrapper">
<div id="hero" class="row">
<div class="large-12 large-centered columns">
<h1><i class="error"></i><br>You found our 404 page!</h1>
<p>Check if you have the right URL or go to the <a href="/">Homepage</a>.</p>
</div>
</div>
</div>
<div class="top-bottom-margin"></div>
</section>

<!-- Footer Section -->
<footer>
<div class="row">
<div class="small-12 medium-6 large-3 columns">
<h5 class="logo-footer">
<a href="index.html">
<i></i>Brackets</a>
</h5>
<p id="footer-desc">
Brackets was founded by Adobe as a community guided, open source project to push web development editors to the next level.
</p>
<p>Brackets is released under the MIT License.</p>
</div>
<div class="small-12 medium-6 large-3 columns">
<h5 data-i18n="footer.links.header">Quick Links</h5>
<ul>
<li>
<a href="https://github.com/adobe/brackets" data-i18n="footer.links.content.source">Source Code on Github</a>
</li>
<li>
<a href="docs/current/modules/brackets.html" data-i18n="footer.links.content.apidocs">API Documentation</a>
</li>
<li>
<a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" data-i18n="footer.links.content.extension-updates">Weekly Extension Updates</a>
</li>
<li>
<a href="https://github.com/adobe/brackets/wiki/Troubleshooting" data-i18n="footer.links.content.troubleshooting">Troubleshooting Help</a>
</li>
<li>
<a href="https://github.com/adobe/brackets/wiki" data-i18n="footer.links.content.wiki">Wiki</a>
</li>
</ul>
</div>
<div class="small-12 medium-6 large-3 columns">
<h5 id="try-it" data-i18n="footer.videos.header">Videos</h5>
<ul>
<li>
<a href="http://youtu.be/rvo3Mv1Z4qU" data-i18n="footer.videos.content.intro" data-yt-id="rvo3Mv1Z4qU">Introducing Brackets</a>
</li>
<li>
<a href="http://youtu.be/Nhvj1NYC3Uc" data-i18n="footer.videos.content.livedev" data-yt-id="Nhvj1NYC3Uc">Live Development for HTML</a>
</li>
<li>
<a href="http://youtu.be/T6d5C3rLeFY" data-i18n="footer.videos.content.theseus" data-yt-id="T6d5C3rLeFY">JavaScript Debugger for Brackets</a>
</li>
<li>
<a href="http://tutsplus.com/courses/introduction-to-brackets?utm_source=Bracketsio&utm_medium=website&utm_campaign=BracketsWebsite" data-i18n="footer.videos.content.tutsplus">Tuts+ Introduction to Brackets</a>
</li>
<li>
<a href="https://www.youtube.com/user/CodeBrackets" data-i18n="footer.videos.content.youtube">Brackets Videos on Youtube</a>
</li>
</ul>
</div>
<div class="small-12 medium-6 large-3 columns">
<h5 id="contribute" data-i18n="footer.get-involved.header">Get Involved</h5>
<ul>
<li>
<a href="https://github.com/adobe/brackets/wiki/Suggest-a-Feature" data-i18n="footer.get-involved.content.suggest">Suggest a Feature</a>
</li>
<li>
<a href="http://bit.ly/BracketsBacklog" data-i18n="footer.get-involved.content.trello">View Backlog on Trello</a>
</li>
<li>
<a href="https://waffle.io/adobe/brackets" data-i18n="footer.get-involved.content.waffle">Track Our Progress on Waffle</a>
</li>
<li>
<a href="https://groups.google.com/forum/#!forum/brackets-dev" data-i18n="footer.get-involved.content.devlist">Discuss on Google Groups</a>
</li>
<li>
<a href="http://webchat.freenode.net?channels=brackets&uio=d4" data-i18n="footer.get-involved.content.irc">Chat on IRC at Freenode/#Brackets</a>
</li>
<li>
<a href="https://github.com/adobe/brackets/issues" data-i18n="footer.get-involved.content.issues">Checkout Current Issues on GitHub</a>
</li>

</ul>
</div>
</div>
<div class="row icons-footer">
<div class="small-6 medium-3 large-2 large-centered medium-centered small-centered columns">
<div class="icon-holder">
<div class="small-3 medium-3 large-3 columns" title="GitHub">
<a href="https://www.github.com/adobe/brackets">
<i class="github"></i>
</a>
</div>
<div class="small-3 medium-3 large-3 columns" title="Twitter">
<a href="https://twitter.com/brackets">
<i class="twitter"></i>
</a>
</div>
<div class="small-3 medium-3 large-3 columns" title="Google Plus">
<a href="https://plus.google.com/b/115365194873502050036/">
<i class="googleplus"></i>
</a>
</div>
<div class="small-3 medium-3 large-3 columns" title="Facebook">
<a href="https://www.facebook.com/codebrackets">
<i class="facebook"></i>
</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="row about-footer">
<div class="small-6 medium-3 large-2 large-centered medium-centered small-centered columns">
<div class="small-12 medium-12 large-12 columns">
<p title="Adobe">
<i class="adobe-logo"></i>
<span>Part of the Adobe Family</span>
</p>
</div>
</div>
</div>
</footer>

<script src="js/vendor/custom.modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="/js/nav.js"></script>
<script src="js/i18next.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/nav.js"></script>
<script src="js/load.i18next.js"></script>
<script src="js/youtube-modal.js"></script>
<script src="js/download.js"></script>
<script>
$(document).foundation();

$(document).ready(function() {
adjustFooter();
$(window).resize(function() {
adjustFooter();
});
});

function adjustFooter() {
if ($("footer").offset().top + $("footer").height() < window.innerHeight) {
var topPos = window.innerHeight - $("footer").height();
$("footer").css('position', 'absolute');
$("footer").css('width', '100%');
$("footer").css('top', topPos + 'px');
}
}

if (/iPad|iPod|iPhone|Android/.test(navigator.userAgent)) {
$(".hide-mobile").hide();
}

</script>
</body>

</html>
81 changes: 77 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,79 @@
[brackets.io][1]
===========
[![brackets.io](http://brackets.io/favicon.png)](https://brackets.io) Welcome to brackets.io
=============================================================================
This is the offcial repository for the brackets.io website

[brackets.io website][1]
# Development

[1]: http://brackets.io/
While the js, and html can be modified right in the repository, the sass stylesheets for brackets.io exist in another repository - [brackets-site-sass](https://github.com/adobe/brackets-site-sass), and are included in as a submodule.

This is because the same style sheets are shared by [brackets-registry](https://github.com/adobe/brackets-registry) as well.

Refer to the section below for assistance on how to develop the css for brackets.io

### Developing CSS
- Requirements
- Git command line tools — follow the setup instructions on [GitHub](https://help.github.com/articles/set-up-git) or download [here](http://git-scm.com/downloads)
- [NodeJS installed](https://nodejs.org/en/download/releases/). Tested with node v6.3.1 & npm v5.5.1
- Steps to follow
- Open gitbash (or any other command line shell of your choice, that supports git & node) & clone the repository

```bash
git clone https://github.com/adobe/brackets.io.git
cd brackets.io
```

- Update the brackets-site-sass submodule

```bash
git submodule update --init
```

- Change directory to the brackets-site-sass submodule

```bash
cd dev
```

- Get the development dependencies for the submodule

```bash
npm install
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mention the node version with which you have tested .

```

The brackets-site-sass folder contains the scss folder, which contains the sass files that were used to develop the minified css(brackets.min.css). Any modification that needs to be made to the minified css must be made by compiling these scss files.

- And then run the auto-compile grunt task

```bash
grunt watch
```

The above task will watch the _scss_ folder for any changes. Post this, you can modify the files in the scss folder and _brackets.min.css_ will be automatically generated in the css folder.

**Note:** You must keep the grunt task running for the automatic compilation to work, so don't close the
shell running the task.

**Note:** Also, test the new styles with brackets-registry as well, and update the minified css there as well.


### Running brackets.io locally
- Requirements
- _http-server_

```bash
npm install -g http-server
```
- Steps to follow
- Open gitbash (or any other command line shell of your choice, that supports git & node)
- Change directory to local brackets.io repository
- Start the http-server

```bash
http-server ./
```

This will start a local http-server on the 8080 port. The site can then be viewed using **_http://localhost:8080_** in browser.

http-server can also be started with options for port, address etc. [Check the npm page for more details](https://www.npmjs.com/package/http-server)

**Note:** Chrome generally caches resources, and so sometimes, even on reloading, code changes are not reflected. In such a case, use the [Empty Cache and Hard Reload](http://www.thewindowsclub.com/empty-cache-hard-reload-chrome) option in Chrome.
Loading