Now, enough of my blathering. Let’s go over how to share your webmaps, widgets, and examples through CodePen. You should go ahead and set up an account with CodePen, so you can save and share your work. Once you’ve got all that set up, We’ll start adding our content.
Creating a Pen in CodePen
The CSS tab lets you configure how the page shows CSS. The CSS preprocessor lets you use preprocessors such as SASS and LESS to write your CSS code instead of conventional CSS. The CSS Base lets you add either the normalize.css or reset.css that is supposed to make all HTML elements look and behave about the same in different browsers. Vendor prefixing will add vendor prefixes such as -moz and -webkit to newer CSS properties that aren’t fully supported across all browsers.
The portion we’re most interested in is the external CSS part. Here, we can add ESRI’s css file that is necessary to view maps without things breaking all over the place. We can also pull in dojo’s style sheets so that ESRI’s widgets and controls look normal.
The Behavior tab lets you set little things that can become big annoyances when coding. The Code Indentation section lets you decide whether you like to indent with tabs or spaces, and how many you need. Some people like using two spaces, while others like using tabs. Now you get to have your way.
Adding your code
Now you have the opportunity to add your own code. This is where you get to let your creative juices shine, and show everybody what you’ve got. Remember to keep these thoughts in mind while you’re writing your code.
- The HTML section represents what’s inside the BODY tag of your web page. You don’t need to cut and paste the head content, add any BODY or HTML tags. They’re kinda assumed.
- CSS section represents the unique CSS you’re adding to the page. You don’t need to copy any CSS over from prepackaged files, such as Bootstrap or Foundation.
So, add your maps and your widgets, and show off you’re work. I’d like to see what you pull off using this site. I plan on moving my simple examples here as well.