Hey guys, I just wanted to share this with everyone. Not sure if something like this already exists but I created a TamperMonkey userscript that allows you to toggle the visibility of the HTML/CSS/JS box on CodePen. This allows you to access the Full view without changing URL’s. This proves most useful when trying to use CodePen with your browser window sized to a Mobile Phone size, since the Code Box takes up so much screen real estate.
I had the idea when using Atomic Chrome to sync Atom.io with the HTML text field to have access to all of Atoms capabilities but still save and run the code through CodePen instantly while working on the FCC Projects. All you have to do is load up your pen, click inside of the text field, activate Atomic Chrome, then hide the HTML boxes completely using the “HTML” button at the bottom of the page (On the footer, where the ‘console’ button is.). Any code edited within Atom will still be synced to CodePens code editor, allowing you to essentially replace CodePens Editor entirely with Atom. I don’t know if other IDE’s have an Atomic Chrome equivalent, but if yours doesn’t you can still copy/paste the code over.
EDIT: I’ve updated the script to include a button to hide CodePens Navbar, and to place the buttons on the left side of the footer so that they are still accessible when your window is resized to mobile. I also have made the script automatically remove the left header (where you can edit the Pen name) and resize the ‘Run Save Fork Setting’ section so that all features are still accessible when your screen is sized to a mobile size.
EDIT 2: I’ve created a repo on GitHub where I will continue to add more features to the project. If you wish to add your own, feel free to contribute! https://github.com/rlaneyoung/Codepen_display
The script as it stands:
> // ==UserScript==
> // @name CodePen Pen Display
> // @namespace codepen.io
> // @version 1.2
> // @description Testing
> // @author R. Lane Young
> // @match http://codepen.io/*/pen/*
> // @match https://codepen.io/*/pen/*
> // @grant GM_addStyle
> // @require https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
> // ==/UserScript==
> $(function() {
> 'use strict';
> /* NavBar Button */
> var btnNav = document.createElement("Button");
> var navBtnId = document.createAttribute("Id");
> navBtnId.value = "NavBtn";
> var btnNavClass = document.createAttribute("class");
> btnNavClass.value = "button button-dark mini-button";
> var navBtnScript = document.createAttribute("onclick");
> var navBtnText = document.createTextNode("Nav");
> navBtnScript.value = "$('header.main-header').toggle();";
> btnNav.setAttributeNode(navBtnScript);
> btnNav.setAttributeNode(btnNavClass);
> btnNav.appendChild(navBtnText);
> $('div.footer-left').prepend(btnNav);
> /* HTML BUTTON */
> var btnHTML = document.createElement("Button");
> var id = document.createAttribute("Id");
> id.value = "htmlBtn";
> var btnHTMLClass = document.createAttribute("class");
> btnHTMLClass.value = "button button-dark mini-button";
> var btnScript = document.createAttribute("onclick");
> var text = document.createTextNode("HTML");
> btnScript.value = "$('div.editor-parent').toggle();";
> btnHTML.setAttributeNode(btnScript);
> btnHTML.setAttributeNode(btnHTMLClass);
> btnHTML.appendChild(text);
> $('div.footer-left').prepend(btnHTML);
> /* Header Left Hide */
> $('div.pen-title-area').hide();
> $('div.primary-actions').attr("style", "transform: scale(0.7, 0.9) translateX(-20%)");
> });