diff --git a/src/components/subnavigation/subnavigation.scss b/src/components/subnavigation/subnavigation.scss
index 76248f1d6..54c201c1c 100644
--- a/src/components/subnavigation/subnavigation.scss
+++ b/src/components/subnavigation/subnavigation.scss
@@ -15,9 +15,9 @@
li {
display: inline-block;
margin: 5px;
- border: 2px solid $active-gray;
+ border: 1px solid $active-gray;
border-radius: 50px;
- padding: .75em 1em;
+ padding: .75em 1.5em;
text-decoration: none;
color: $type-white;
list-style-type: none;
@@ -32,7 +32,7 @@
border: 0 solid transparent;
box-shadow: inset 0 0 5px $box-shadow-gray;
background-color: $active-dark-gray;
- padding: calc(.75em + 2px) calc(1em + 2px);
+ padding: calc(.75em + 1px) calc(1.5em + 1px);
}
&.description {
diff --git a/src/routes.json b/src/routes.json
index 3421b8d24..22c308200 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -17,6 +17,12 @@
"view": "components/components",
"title": "Components"
},
+ {
+ "name": "developers",
+ "pattern": "^/developers/?$",
+ "view": "developers/developers",
+ "title": "Developers"
+ },
{
"name": "hoc",
"pattern": "^/hoc/?$",
diff --git a/src/views/developers/developers.jsx b/src/views/developers/developers.jsx
new file mode 100644
index 000000000..7fdc94323
--- /dev/null
+++ b/src/views/developers/developers.jsx
@@ -0,0 +1,276 @@
+var React = require('react');
+var render = require('../../lib/render.jsx');
+
+var Page = require('../../components/page/www/page.jsx');
+var FlexRow = require('../../components/flex-row/flex-row.jsx');
+var SubNavigation = require('../../components/subnavigation/subnavigation.jsx');
+var TitleBanner = require('../../components/title-banner/title-banner.jsx');
+
+require('./developers.scss');
+
+var Developers = React.createClass({
+ type: 'About',
+ render: function () {
+ return (
+
+
+
+
Scratch for Developers
+
+ On this page, you’ll find information about open source projects created and maintained{' '}
+ by the Scratch Team at MIT, as well{' '}
+ as our thoughts on best practices for designing learning experiences for children.
+
+
+
+
+
+
+
+ Projects
+
+ The following projects are open source and available for any purpose.
+
+
+
+
Scratch Blocks
+
+ Scratch Blocks is a new development project for the next generation of{' '}
+ graphical programming blocks, based on a collaboration between Google and MIT’s{' '}
+ Scratch Team — building on Google’s{' '}
+ Blockly technology{' '}
+ and informed by the Scratch Team’s expertise in developing creative{' '}
+ learning tools for young people. Scratch Blocks will provide a framework{' '}
+ for building programming blocks in both vertical (text-based) and horizontal{' '}
+ (icon-based) formats. You can access the code (currently as a{' '}
+ developer-preview) and documentation{' '}
+ here.
+
+
+ This first release includes code for Scratch’s Horizontal Grammar. Looking{' '}
+ ahead, we plan to release additional code including but not limited to the{' '}
+ Vertical Grammar (currently used by Scratch), a new Rendering Engine to support{' '}
+ sprites and graphic effects, and a new Audio Engine to support creation with{' '}
+ sound and music.
+
+
+
+
+
+
+
Scratch WWW
+
+ Scratch-www is a standalone web client for the Scratch Community, built{' '}
+ using React and Redux. Access the code and documentation{' '}
+ here.
+
+
+
+
+
+
+
+
+ Principles
+
+ We created Scratch to empower young people to think creatively, reason systematically,{' '}
+ and work collaboratively. We are guided by a set of Learning Principles and{' '}
+ Design Principles that we hope you will follow as you develop new tools and{' '}
+ technologies with Scratch Blocks.
+
+
+
+
+
Learning Principles
+
+ - Projects
+ -
+ People learn best when they are actively working on projects — generating{' '}
+ new ideas, designing prototypes, making improvements and creating final{' '}
+ products.
+
+ - Passion
+ -
+ When people focus on things they care about, they work longer and harder,{' '}
+ persist in the face of challenges, and learn more in the process.
+
+ - Peers
+ -
+ Learning flourishes as a social activity, with people sharing ideas,{' '}
+ collaborating on projects, and building on one another's work.
+
+ - Play
+ -
+ Learning involves playful experimentation — trying new things, tinkering{' '}
+ with materials, testing boundaries, taking risks, iterating again and again.
+
+
+
+
+
+
+
+
Design Principles
+
+ - Low Floor & Wide Walls
+ -
+ In order to encourage a varied and diverse set of interactions, we{' '}
+ explicitly include elements and features that are easy for kids to{' '}
+ understand (low floor), but general enough to support diverse uses (wide walls).
+
+ - Make it as Simple as Possible — And Maybe Even Simpler
+ -
+ Despite the common drive to add more features to software products, we{' '}
+ have found that reducing the number of features often improves the user{' '}
+ experience. What initially seems like a constraint or limitation can foster{' '}
+ new forms of creativity.
+
+ - Many Paths, Many Styles
+ -
+ Many math and science activities have traditionally been biased towards{' '}
+ specific populations. By paying special attention to creating accessible{' '}
+ and appealing technologies, we are working to close the gap.
+
+ - Design for Tinkerability
+ -
+ We believe that the learning process is inherently iterative. Tinkerers{' '}
+ start by exploring and experimenting, then revising and refining their{' '}
+ goals and creations. To support this style of interaction, we design{' '}
+ our interfacesto encourage quick experimentation and rapid cycles of iteration.
+
+
+
+
+
+
+
+ Donate
+
+ We are pleased to provide Scratch free of charge. If you enjoy using Scratch, please{' '}
+ consider making a donation{' '}
+ to support Scratch. Donations of any size are appreciated.
+
+
+ Your donation to the Scratch Foundation will be used to support future development of{' '}
+ Scratch software and the Scratch website.
+
+
+ Thanks for supporting Scratch!
+
+
+
+
+
+
+
+
+
+ FAQ
+
+
+
Where can I learn more about Scratch?
+
+ Scratch is a free programming language and online community where young{' '}
+ people can create their own interactive stories, games, and animations.{' '}
+ Scratch is a project of the{' '}
+ Lifelong Kindergarten{' '}
+ Group at the MIT Media Lab.{' '}
+ You can learn more about Scratch{' '}
+ here.
+
+
+
+
Are there rules to using this code in my application?
+
+ You may use this code in accordance with the{' '}
+ Apache 2.0 license
+ which governs this project. We also strongly encourage you to consider{' '}
+ the learning and design principles (above, on this page) when building{' '}
+ creative learning experiences for kids of all ages.
+
+
+
+
+ Am I allowed to use the name "Scratch Blocks" in the description of my{' '}
+ app and other public messaging?
+
+
+ If you wish, you can publicly state that your application is powered by{' '}
+ Scratch Blocks. If you do so, we would also encourage you to link back to{' '}
+ code repository.
+
+
+
+
Are you releasing more code and when?
+
+ We plan to open source additional code relating to the Scratch programming{' '}
+ language over the next few months. Keep an eye on this page!
+
+
+
+
What’s the difference between Blockly and Scratch Blocks?
+
+ Scratch Blocks builds upon the Blockly code base, and is specifically{' '}
+ designed with our principles in mind to support creative learning experiences.
+
+
+
+
I’d like to collaborate. How do I get in touch?
+
+ You can reach us over on github or{' '}
+ you can send an email to{' '}
+ help@scratch.mit.edu.{' '}
+ We look forward to hearing from you!
+
+
+
+
+
+
+
+ );
+ }
+});
+
+render(, document.getElementById('app'));
diff --git a/src/views/developers/developers.scss b/src/views/developers/developers.scss
new file mode 100644
index 000000000..248114256
--- /dev/null
+++ b/src/views/developers/developers.scss
@@ -0,0 +1,232 @@
+@import "../../colors";
+@import "../../frameless";
+@import "../../typography";
+
+$developer-spot: $ui-aqua;
+
+#view {
+ padding: 0;
+
+ .title-banner {
+ &.masthead {
+ background-color: $developer-spot;
+ padding-bottom: 0;
+
+ h1 {
+ margin: 0 0 2rem 0;
+ text-align: left;
+ color: $ui-white;
+ }
+
+ p {
+ margin: 0;
+ width: $cols6;
+ text-align: left;
+ color: $ui-white;
+
+ a {
+ border-bottom: 1px solid $ui-white;
+ color: $ui-white;
+ }
+ }
+
+ .band {
+ $band-color: hsla(360, 100, 100, .15);
+
+ margin-top: 2rem;
+ background-color: $band-color;
+ padding: 1rem 0;
+ }
+
+ .sub-nav {
+ text-align: left;
+ justify-content: flex-start;
+
+ li {
+ margin: 0 .5rem 0 0;
+ }
+ }
+ }
+
+ &.faq-banner {
+ margin-bottom: 0;
+ background-color: $ui-gray;
+ }
+ }
+
+
+ .flex-row {
+ &.sidebar-row {
+ margin: 2rem 0;
+ justify-content: space-between;
+ align-items: flex-start;
+
+ .body-copy {
+ width: $cols8;
+ }
+
+ .sidebar {
+ width: $cols3;
+ }
+ }
+
+ &.three-col-row {
+ align-items: flex-start;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+
+ .column {
+ $column-margin: 1rem;
+
+ margin: $column-margin;
+ width: calc(#{$cols4} - (#{$column-margin} * 2));
+
+ p {
+ text-align: left;
+ }
+ }
+ }
+ }
+
+ section {
+ margin-bottom: 3rem;
+
+ p {
+ max-width: $cols8;
+ }
+ }
+
+ #projects,
+ #principles,
+ #donate {
+
+ h3 {
+ border-bottom: 1px solid $ui-border;
+ }
+
+ dl {
+ dt {
+ margin-bottom: .25rem;
+ }
+
+ dd {
+ margin-bottom: 1.25rem;
+ margin-left: 0;
+ }
+ }
+ }
+
+ #donate {
+ border-bottom: 1px solid $ui-border;
+ padding-bottom: 2rem;
+ }
+
+ #partners {
+ text-align: center;
+
+ p {
+ margin: 0 auto;
+ margin-bottom: 2rem;
+ }
+
+ .logos {
+ justify-content: center;
+
+ .logo {
+ margin: 10px;
+ width: $cols2;
+ }
+ }
+ }
+
+ #faq {
+ border-bottom: 1px solid $ui-border;
+ padding-bottom: 2rem;
+
+ h3 {
+ margin-bottom: 2rem;
+ text-align: center;
+ }
+
+ p {
+ color: $type-gray;
+ }
+ }
+
+}
+
+//4 columns
+@media only screen and (max-width: $mobile - 1) {
+ #view {
+ text-align: left;
+ }
+
+ .title-banner {
+ &.masthead {
+ padding-bottom: 2rem;
+ }
+
+ .band {
+ display: none;
+ }
+ }
+
+ .flex-row {
+ &.sidebar-row {
+
+ .body-copy {
+ width: 100%;
+ }
+ }
+ }
+}
+
+//6 columns
+@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
+ #view {
+ text-align: left;
+ }
+
+ .flex-row {
+ &.sidebar-row {
+
+ .body-copy {
+ width: 100%;
+ }
+
+ .sidebar {
+ margin: 0 auto;
+ }
+ }
+ }
+}
+
+//8 columns
+@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+ #view {
+ text-align: left;
+ }
+
+ .flex-row {
+ &.sidebar-row {
+
+ .body-copy {
+ width: 100%;
+ }
+
+ .sidebar {
+ margin: 0 auto;
+ }
+ }
+ }
+
+ section {
+ p {
+ width: 100%;
+ }
+ }
+}
+
+
+
+
diff --git a/src/views/developers/l10n.json b/src/views/developers/l10n.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/src/views/developers/l10n.json
@@ -0,0 +1 @@
+{}
diff --git a/static/images/developers/block-sketch.png b/static/images/developers/block-sketch.png
new file mode 100644
index 000000000..80cf39996
Binary files /dev/null and b/static/images/developers/block-sketch.png differ
diff --git a/static/images/developers/cn.png b/static/images/developers/cn.png
new file mode 100644
index 000000000..565c58412
Binary files /dev/null and b/static/images/developers/cn.png differ
diff --git a/static/images/developers/google.png b/static/images/developers/google.png
new file mode 100644
index 000000000..563d9e637
Binary files /dev/null and b/static/images/developers/google.png differ
diff --git a/static/images/developers/intel.png b/static/images/developers/intel.png
new file mode 100644
index 000000000..f01e5fb0e
Binary files /dev/null and b/static/images/developers/intel.png differ
diff --git a/static/images/developers/lemann.png b/static/images/developers/lemann.png
new file mode 100644
index 000000000..2448a965a
Binary files /dev/null and b/static/images/developers/lemann.png differ
diff --git a/static/images/developers/logo_sm.png b/static/images/developers/logo_sm.png
new file mode 100644
index 000000000..7f4e7353a
Binary files /dev/null and b/static/images/developers/logo_sm.png differ
diff --git a/static/images/developers/www-sketch.png b/static/images/developers/www-sketch.png
new file mode 100644
index 000000000..63546033d
Binary files /dev/null and b/static/images/developers/www-sketch.png differ