Thanks to: http://unsplash.com/ http://foundation.zurb.com/ And Codepen :)
A Pen by Moncho Varela on CodePen.
Created
January 14, 2020 09:49
-
-
Save zilveer/b2c198dc87d0ce553de7a966c75c725c to your computer and use it in GitHub Desktop.
A Pen by Moncho Varela.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="row"> | |
| <div class="large-6 medium-6 column"> | |
| <aside class="panel margin-top"> | |
| <ul class="off-canvas-list"> | |
| <li><label>The Different Views</label></li> | |
| <li><a href="#fullPage" data-fn="1">Full Page View</a></li> | |
| <li><a href="#editor" data-fn="2">Editor View</a></li> | |
| <li><a href="#debug" data-fn="3">Debug View</a></li> | |
| <li><a href="#details" data-fn="4">Details View</a></li> | |
| <li><a href="#live" data-fn="5">Live View</a></li> | |
| <li><a href="#profesor" data-fn="6">Professor Mode</a></li> | |
| <li><a href="#presentation" data-fn="7">Presentation Mode</a></li> | |
| <li><a href="#collab" data-fn="8">Collab Mode</a></li> | |
| </ul> | |
| </aside> | |
| </div> | |
| <div class="large-6 medium-6 column"> | |
| <div class="iphone"> | |
| <div class="iphone_inner"> | |
| <!-- MOBILE THEME --> | |
| <div class="off-canvas-wrap docs-wrap"> | |
| <div class="inner-wrap"> | |
| <nav class="tab-bar"> | |
| <section class="left-small"> | |
| <a class="left-off-canvas-toggle menu-icon" > | |
| <span> | |
| </span> | |
| </a> | |
| </section> | |
| <section class="middle tab-bar-section"> | |
| <h1 class="title">Codepen Faq</h1> | |
| </section> | |
| </nav> | |
| <aside class="left-off-canvas-menu"> | |
| <ul class="off-canvas-list"> | |
| <li><label>The Different Views</label></li> | |
| <li><a href="#fullPage" data-fn="1">Full Page View</a></li> | |
| <li><a href="#editor" data-fn="2">Editor View</a></li> | |
| <li><a href="#debug" data-fn="3">Debug View</a></li> | |
| <li><a href="#details" data-fn="4">Details View</a></li> | |
| <li><a href="#live" data-fn="5">Live View</a></li> | |
| <li><a href="#profesor" data-fn="6">Professor Mode</a></li> | |
| <li><a href="#presentation" data-fn="7">Presentation Mode</a></li> | |
| <li><a href="#collab" data-fn="8">Collab Mode</a></li> | |
| </ul> | |
| </aside> | |
| <section class="main-section"> | |
| <div class="row"> | |
| <div class="large-12 columns"> | |
| <div class="box" data-obj="#fullPage"> | |
| <h3>Full Page View</h3> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <p>Full Page View is a view of a Pen on CodePen that shows the the preview using the the entire browser window, except a small footer fixed to the bottom of the page. Full Page View is used for:</p> | |
| <ul> | |
| <li>Checking out a preview of your Pen about as big as it can be</li> | |
| <li>Sharing a Pen in a more immersive way</li> | |
| </ul> | |
| <p>Note that the preview is in an iframe, so if you're using it for JavaScript debugging remember to change the context to the "CodePen iframe".</p> | |
| <p></p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2013/11/Full-Page-View.png" alt="Full-Page-View" width="1168" height="743" class="th"> | |
| </figure> | |
| <p></p> | |
| <h4>BrowserStack</h4> | |
| <p>In the footer on the right you'll see a dropdown menu and a BrowserStack button. This is used for quick access to jump over to BrowserStack and open this Pens Full Page View in another browser. <a href="http://www.browserstack.com/">BrowserStack</a> is a (paid) tool for testing in a wide variety of browsers. For example, test in IE 8 on Windows XP, but from your Mac. Or test in iOS 6 from your PC. Or any combination you can think of, since it happens right from your web browser on their live virtual machines.</p> | |
| <h4>Abuse</h4> | |
| <p>The Full Page View on CodePen is the view most likely to be abused. All of the other views have so much CodePen UI around that it is pretty obvious you are on on CodePen. But in Full Page View, there is only the small footer. There is always the risk that people create malicious Pens and send people to this view.</p> | |
| <p>We try and draw attention to the footer by sliding it in just momentarily after the page loads. This footer contains a "Report Abuse" link people can use to notify the CodePen staff of bad behavior.</p> | |
| <p>The Full Page View also has a variety of safety mechanisms built in:</p> | |
| <ul> | |
| <li>The preview is in an iframe, so code within cannot reach up to the parent page and do anything there.</li> | |
| <li>The iframe is sandboxed (an HTML5 thing) for deeper protections if you are using a modern browser.</li> | |
| <li>CodePen strips known dangerous code, like form submissions and page redirects.</li> | |
| </ul> | |
| </div> | |
| <div class="box" data-obj="#editor"> | |
| <h3>Editor View</h3> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <p>Editor View is the main view of a Pen on CodePen. It contains:</p> | |
| <ul> | |
| <li>The HTML editor (and HTML settings)</li> | |
| <li>The CSS editor (and CSS settings)</li> | |
| <li>The JS editor (and JS settings)</li> | |
| <li>The Live Preview</li> | |
| </ul> | |
| <p>You can create, edit, and save Pens from here. It's kind of the heart-and-soul of CodePen! There are a variety of other things you can do from the editor as well, like:</p> | |
| <ul> | |
| <li><a href="http://blog.codepen.io/documentation/faq/how-do-i-delete-a-pen/">Delete the Pen</a></li> | |
| <li>Fork a Pen (save your own copy and edit to your liking)</li> | |
| <li>Add it to a <a href="http://blog.codepen.io/2013/01/25/new-feature-collections/">Collection</a></li> | |
| <li>Upload and access your <a href="http://blog.codepen.io/documentation/pro-features/asset-hosting/">Assets</a> (PRO feature)</li> | |
| <li><a href="http://blog.codepen.io/2013/03/20/new-feature-editor-layout-choices/">Adjust the layout</a> of the editor</li> | |
| </ul> | |
| <p>Also see the <a href="http://blog.codepen.io/documentation/">main documentation page</a> for documentation on a variety of other features of the CodePen editor.</p> | |
| <p> </p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2013/11/Editor-View.png" alt="Editor-View" width="1218" height="883" class="th"> | |
| </figure> | |
| <p></p> | |
| <h4>The HTML Editor</h4> | |
| <p>From the HTML Editor, you can:</p> | |
| <ul> | |
| <li>Author in normal HTML, or use a <a href="http://blog.codepen.io/documentation/editor/using-html-preprocessors/">HTML preprocessor</a> and write in Markdown, Jade, Slim, or Haml.</li> | |
| <li><a href="http://blog.codepen.io/2013/11/11/analyze-html-css-js/">Analyze the HTML code</a> with HTML-Inspector.</li> | |
| <li>Use <a href="http://blog.codepen.io/documentation/editor/tab-triggers/">Tab Triggers</a> to help write common bits of HTML</li> | |
| <li>Use <a href="http://emmet.io/">Emmet</a> to write <a href="http://docs.emmet.io/abbreviations/syntax/">HTML abbreviations</a> that expand out into regular HTML.</li> | |
| <li>Add class names to be added to the <code><html></code> element</li> | |
| <li>Include things you wish to be in the <code><head></code> of the document. In CodePen, you only include what goes in the <code><body></code> in the HTML editor.</li> | |
| <li>Include other Pen's HTML by using the syntax <code>[[[http://codepen.io/rmkp/pen/ruLCJ]]]</code> in the HTML itself.</li> | |
| </ul> | |
| <h4>The CSS Editor</h4> | |
| <p>From the CSS Editor, you can:</p> | |
| <ul> | |
| <li>Author in normal CSS, or use a <a href="http://blog.codepen.io/documentation/editor/using-css-preprocessors/">CSS preprocessor</a> and write in <a href="http://sass-lang.com/">Sass</a> (.sass or .scss), <a href="http://lesscss.org/">LESS</a>, or <a href="http://learnboost.github.io/stylus/">Stylus</a>.</li> | |
| <li>Use a CSS preprocessor add-on, like <a href="http://compass-style.org/">Compass</a> or <a href="http://bourbon.io/">Bourbon</a> for Sass, <a href="http://lesshat.com/">LESSHat</a> for LESS, or Nib for Stylus.</li> | |
| <li><a href="http://blog.codepen.io/2013/11/11/analyze-html-css-js/">Analyze your CSS</a> with <a href="http://csslint.net/">CSS Lint</a>.</li> | |
| <li>Use <a href="http://emmet.io/">Emmet's</a> "<a href="http://docs.emmet.io/css-abbreviations/fuzzy-search/">fuzzy search</a>" which is a bit like CSS abbreviations. E.g. <code>ov:h</code> [TAB] turns into <code>overflow: hidden;</code></li> | |
| <li>Add <a href="http://blog.codepen.io/documentation/editor/adding-external-resources/">External Resources</a>, like linking to .css files to be included or even preprocessor dependancies.</li> | |
| <li>Select a CSS staring point, like the <a href="http://meyerweb.com/eric/tools/css/reset/">Meyer Reset</a>, <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, or neither.</li> | |
| </ul> | |
| <h4>The JS Editor</h4> | |
| <p>From the JS Editor, you can:</p> | |
| <ul> | |
| <li>Author directly in vanilla JavaScript, or use a <a href="http://blog.codepen.io/documentation/editor/using-js-preprocessors/">JS preprocessor</a> and write in <a href="http://coffeescript.org/">CoffeeScript</a> or <a href="http://livescript.net/">LiveScript</a>.</li> | |
| <li><a href="http://blog.codepen.io/2013/11/11/analyze-html-css-js/">Analyze your JS</a> with <a href="http://www.jshint.com/">JS Hint</a>.</li> | |
| <li>Add <a href="http://blog.codepen.io/documentation/editor/adding-external-resources/">External Resources</a>, like linking to .js files to be included or even preprocessor dependancies.</li> | |
| <li>Include the full <a href="http://modernizr.com/">Modernizr</a> suite.</li> | |
| <li>Choose if you want the auto-running behavior with your JavaScript, or wait to run JavaScript until you press a button.</li> | |
| </ul> | |
| </div> | |
| <div class="box" data-obj="#debug"> | |
| <h3>Debug View</h3> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <p>Debug View is similar to Full Page View in that it shows you a full page preview of your Pen. Here is what is unique to Debug View:</p> | |
| <ul> | |
| <li>No CodePen footer</li> | |
| <li>Preview is not in an iframe</li> | |
| <li>No CodePen influence whatsoever</li> | |
| <li>You can only view Debug Mode on <strong>Pens you own</strong> and <strong>while logged into CodePen</strong></li> | |
| </ul> | |
| <p>Debug view is very useful when you need to do some testing on your code and you need it to be 100% exactly as you have written it. Perhaps there is something you think CodePen is doing wrong to your code, perhaps you need the preview to be outside of an iframe for easier JS console access, or any other reason.</p> | |
| <p></p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2013/11/debug-view.png" alt="debug-view" width="886" height="898" class="th"> | |
| </figure> | |
| <p></p> | |
| <h4>Sharing</h4> | |
| <p>If you give someone the URL to a Pen in Debug View (even yourself), it will automatically redirect to the <a href="http://blog.codepen.io/documentation/views/full-page-view/">Full Page View</a> if they are not logged in and/or don't own the Pen.</p> | |
| </div> | |
| <div class="box" data-obj="#details"> | |
| <h3>Details View</h3> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <p>Details view is perhaps the most shareable view on CodePen. It shows off your Pen visually front-and-center. It clearly shows the author and the information they have written about the Pen. It shows tags, statistical information, and other meta information about the Pen since it's creation. It is also the social home for the Pen, with social network sharing buttons and information about how shared it has been as well as where people can comment.</p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2013/11/details-view.png" alt="details-view" width="1410" height="1326" class="th"> | |
| </figure> | |
| <h4>Adjusting the Preview Height</h4> | |
| <p>Some Pens previews need more vertical space to show them off best. Some need less. You can adjust the height of the preview area to best fit your Pen by using a URL parameter <code>?preview_height=X</code> where X is a positive integer of pixels to show the preview at. Like:</p> | |
| <pre><code>http://codepen.io/rileyjshaw/details/zwxCv?preview_height=342</code></pre> | |
| </div> | |
| <div class="box" data-obj="#live"> | |
| <h3>Live View</h3> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <nav class="panel"> | |
| <h4>On this page:</h4> | |
| <ul> | |
| <li><a href="#how-to-get">How do I get Live View?</a></li> | |
| <li><a href="#other-peoples-pens">Can I Live View other's people's Pens?</a></li> | |
| <li><a href="#professor-and-collab">Do Live View and Collab Mode/Professor Mode work together?</a></li> | |
| <li><a href="#how-many">How many devices can I have using Live View at once?</a></li> | |
| <li><a href="#how-to-open-url">How do I open the Live View URL on other devices?</a></li> | |
| <li><a href="#what-for">Is this only for cross-browser or cross-device testing?</a></li> | |
| </ul> | |
| </nav> | |
| <h3>What is Live View? Live View is a full page view of your Pen that</h3> | |
| <p><strong>updates in real time</strong> as you update the code in your Pen. Literally as you type, just like the preview in the Editor, except that this URL can be open in another window or tab, in a different browser, or even on a completely different computer or device. This is particularly useful for cross-browser and cross-device testing. Rather than having to go over to each device you are testing and manually reload the page when you make changes, your changes are injected automatically and instantly. You also don't need to install any software or go through any complicated setup. Just open the Live View URL and you're good to go! Here's a video showing how sweet it is:</p> | |
| <p> | |
| <div class="flex-video widescreen vimeo" > | |
| <iframe src="http://player.vimeo.com/video/62621410" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="fitvid995430"></iframe> | |
| </div> | |
| </p> | |
| <h4>How do I get Live View?</h4> | |
| <p></p> | |
| <figure > | |
| <img src="http://blog.codepen.io/wp-content/uploads/2012/11/get-to-live-view.png" alt="" title="get-to-live-view" width="513" height="334" class="th"> | |
| </figure> | |
| <p></p> | |
| <p>You have to be a PRO member of CodePen and all of your pens will have Live View automatically. Go to a Pen you own, click the Share dropdown menu, and click the Live View button or click the URL to select and copy it.</p> | |
| <h4>Can I Live View other's people's Pens?</h4> | |
| <p>You can open their Pens in Live View but only the owner of the Pen can open the real-time connection and do real-time updating. Remember though, you can always fork their pen and open your fork in Live View and then you are the owner and get the real time updating.</p> | |
| <h4>Do Live View and Collab Mode/Professor Mode work together?</h4> | |
| <p>Yep! They totally do. If you have a Pen open in</p> | |
| <p><a href="http://blog.codepen.io/documentation/pro-features/collab-mode/">Collab Mode</a> or <a href="http://blog.codepen.io/documentation/pro-features/professor-mode/">Professor Mode</a>, the Live View will update as you update the code in those views.</p> | |
| <h4>How many devices can I have using Live View at once?</h4> | |
| <p>As many as you'd like.</p> | |
| <h4 id="how-to-open-url">How do I open the Live View URL on other devices?</h4> | |
| <p>Just enter the URL on the device in that devices browser. If the other device happens to be able to receive text messages, you can send the URL directly to the device</p> | |
| <p><a href="http://blog.codepen.io/2012/12/31/new-feature-send-text-message-of-pen-url-to-your-phone-for-testing/">just by typing in the phone number</a>. And it works anywhere in the world! Another way is to log into CodePen on that device so you can click around CodePen and get the the Live View for any particular Pen without doing any typing.</p> | |
| <h4>Is this only for cross-browser or cross-device testing?</h4> | |
| <p>If you have a large (or multiple) monitors, you can use Live View as your preview while working on a Pen. That way you can expand the editors all the way and collapse the editor preview and have lots of room for code.</p> | |
| <p> | |
| </p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2012/11/dual-screen.png" alt="dual-screen" width="800" height="404" class="th"> | |
| </figure> | |
| <p></p> | |
| <hr> | |
| <p>And this is just one of many features you get on CodePen PRO. <a href="http://codepen.io/pro/">See all the features</a> or <a href="http://blog.codepen.io/2013/01/08/video-introduction-to-codepen-pro/">watch a video</a>.</p> | |
| <div class="text-center"> | |
| <a class="button secondary" href="http://codepen.io/settings/#pro"> | |
| Go <span class="pro">PRO</span> | |
| </a> | |
| </div> | |
| <p class="text-center">It's just $9/month or $75/year.</p> | |
| </div> | |
| <div class="box" data-obj="#profesor"> | |
| <h1>Professor Mode</h1> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <nav class="panel"> | |
| <h4>On this page:</h4> | |
| <ul> | |
| <li><a href="#how-many">How many people can watch at one time?</a></li> | |
| <li><a href="#start-new">How do I start a new "Professor Mode" classroom?</a></li> | |
| <li><a href="#professor-leaves">What happens if I (the teaching professor) leave the room?</a></li> | |
| <li><a href="#moderation">Can I moderate the room?</a></li><li><a href="#invite-people">How do I invite people to watch my Professor Mode session?</a></li><li><a href="#time-limit">Is there a time limit on sessions?</a></li> | |
| <li><a href="#questions">Anything else?</a></li> | |
| </ul> | |
| </nav> | |
| <h3>What is Professor Mode?</h3> | |
| <p>Professor mode allows a group of people to watch you write code live in a real time classroom. Every character you type, line you select, or setting you change is immediately shown on your viewers (students) screens, as if you were all together looking at the same screen.</p> | |
| <h4>How many people can watch at one time?</h4> | |
| <p>Our basic PRO plan supports 10 students watching at one time while our super PRO plan supports 100 students. If more students come to the classroom to watch, they will get a message letting them know the room is full. They will automatically be let in when other students leave and there are open spots.</p> | |
| <h4>How do I start a new "Professor Mode" classroom?</h4> | |
| <p>You must be a PRO subscriber to open a Professor Mode classroom. You can create a classroom from any existing Pen that <strong>you own</strong>. Either open a Pen you've already created, or if you want to start from scratch, just <a target="_blank" href="http://codepen.io/pen/">create a new Pen</a>, type a few characters of HTML, and save it. </p> | |
| <p>You will then see the "View Switcher" in the upper right, and you can switch to Professor Mode from there.</p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2012/10/view-switcher-professor.png" alt="" title="view-switcher-professor" width="303" height="53" class="th"><br> | |
| </figure> | |
| <h4>What happens if I (the teaching professor) leave the room?</h4> | |
| <p>CodePen will attempt to warn you before you leave the room with an alert popup asking you if you're sure you wish to navigate away. This is to prevent you from accidentally closing the window through an unintentional keyboard command or gesture or anything else that might take you away. </p> | |
| <p>If you do leave the room, either on purpose or through an accident beyond your control (e.g. a browser crash) you'll have one minute to re-enter the room. After that, the room will be closed and students will receive a pop-up message that the professor has left the room.</p> | |
| <p>You can always re-open it, but you'll need to have the students refresh the page or send them the link again so they can navigate back to the room.</p> | |
| <h4>Can I moderate the room?</h4> | |
| <p>As the professor, you are the only one who can type code into the editors. </p> | |
| <p>There is also a chat area where any student watching the room can leave chat messages. As the teaching professor, you can delete any comment a student leaves by hovering over that comment and clicking the (X) link that comes up.</p> | |
| <p>Students can also delete their own comments if they wish.</p> | |
| <p>You do not have the ability to completely remove someone from watching your session.</p> | |
| <h4>How do I invite people to watch my Professor Mode session?</h4> | |
| <p>However you want! You can copy the URL out of the URL bar (or get it from the Share dropdown menu) and share it on Twitter or Facebook or any other social network. You could IM people you know. You could send out a mass email. Any way you can think of to share the link is fine with us.</p> | |
| <h4>Is there a time limit on sessions?</h4> | |
| <p>Nope.</p> | |
| <h4>Anything else?</h4> | |
| <p>If you have any further questions about Professor Mode, <a href="https://blog.codepen.io/support/">contact us</a>. </p> | |
| <hr > | |
| <p >And this is just one of many features you get on CodePen PRO. <a href="http://codepen.io/pro/">See all the features</a> or <a href="http://blog.codepen.io/2013/01/08/video-introduction-to-codepen-pro/">watch a video</a>.</p> | |
| <div class="text-center"> | |
| <a class="button secondary" href="http://codepen.io/settings/#pro"> | |
| Go <span class="pro">PRO</span> | |
| </a> | |
| </div> | |
| <p class="text-center">It's just $9/month or $75/year.</p> | |
| </div> | |
| <div class="box" data-obj="#presentation"> | |
| <h1>Presentation Mode</h1> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <nav class="panel"> | |
| <h4>On this page:</h4> | |
| <ul> | |
| <li><a href="#how-to-get">How do I get access to Presentation Mode?</a></li> | |
| <li><a href="#pres-mode-features">What are the features of Presentation Mode?</a></li><li><a href="#other-peoples-pens">Can I use Presentation Mode on other's people's Pens?</a></li> | |
| <li><a href="#powering-professor-mode">Does Presentation Mode and Professor Mode work together?</a></li> | |
| </ul> | |
| </nav> | |
| <h3>What is Presentation Mode?</h3> | |
| <p>Presentation Mode is a special view on CodePen meant specifically for showing a Pen on an overhead projector. Like when a teacher projects their computer screen onto the wall in the front of the room, or a speaker plugs in their laptop to give a presentation. Here's a video demonstrating why it is so useful for that:</p> | |
| <p> | |
| <div class="flex-video widescreen vimeo"> | |
| <iframe src="//player.vimeo.com/video/80312270" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="fitvid159295"></iframe> | |
| </div> | |
| </p> | |
| <h4>How do I get access to Presentation Mode?</h4> | |
| <p>You have to be a <a href="http://codepen.io/pro/">PRO member</a> of CodePen and all of your Pens will have Presentation Mode automatically. Go to a Pen you own, open the View Switcher menu, and click the Presentation Mode link.</p> | |
| <h4>What are the features of Presentation Mode?</h4> | |
| <p>There are many!</p> | |
| <p> | |
| </p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2013/11/pres-mode-features1.png" alt="pres-mode-features" width="1708" height="980" class="th"> | |
| </figure> | |
| <p></p> | |
| <h4>More screen real estate</h4> | |
| <p>We remove the normal CodePen header. Every bit counts when working with a projector with very low resolution. You should be able to present even on 800x600 projectors.</p> | |
| <h4>Faster loading</h4> | |
| <p>WiFi at conferences can be quite slow. We've done our best to lighten up the load in Presentation Mode, removing all but the most essential features.</p> | |
| <h4>Resizeable preview</h4> | |
| <p>You can drag the preview area larger and smaller just like you can in the in the normal editor, but in Presentation Mode you can resize the scale from the normal 1.0x down to 0.5x or 0.25x, in case there isn't enough room to show off what you are trying to show off.</p> | |
| <h4>On-the-fly theme changing</h4> | |
| <p>Change to any of our syntax highlighting themes instantly from a dropdown in the footer. In some room situations, dark-on-light themes are better and in others light-on-dark is better. Also change the font-size on-the-fly.</p> | |
| <h4>Supports all different layouts Add</h4> | |
| <p><code>/left/</code>, <code>/right/</code>, or <code>/top/</code> to the end of the URL to ensure Presentation Mode opens in that layout. Also append <code>?editors=101</code> to the end to maximize/minimize which editors you want open. The first digit is for the HTML editor (1 is maximized, 0 is minimized), the second for the CSS editor, the third for the JS editor.</p> | |
| <h4>Show the URL</h4> | |
| <p>Did someone ask for the URL to get to that Pen? Show it to them HUGE with a click of a button.</p> | |
| <p> | |
| </p> | |
| <figure> | |
| <img src="http://blog.codepen.io/wp-content/uploads/2013/11/big-url.png" alt="big-url" width="874" height="687" class="th"> | |
| </figure> | |
| <p></p> | |
| <h4 >Can I use Presentation Mode on other's people's Pens?</h4> | |
| <p>Yep, as long as you are PRO, you can open any Pen in Presentation Mode. We suggest you always give credit to the author when presenting and demonstrating their work.</p> | |
| <h4>Does Presentation Mode and Professor Mode work together?</h4> | |
| <p>Unfortunately not yet. We plan to get this working though. We realize some of you use this in a classroom environment where you might want to use an overhead projector and also have students following along on their own computers.</p> | |
| <hr> | |
| <p >And this is just one of many features you get on CodePen PRO. <a href="http://codepen.io/pro/">See all the features</a> or <a href="http://blog.codepen.io/2013/01/08/video-introduction-to-codepen-pro/">watch a video</a>.</p> | |
| <div class="text-center"> | |
| <a class="button secondary" href="http://codepen.io/settings/#pro"> | |
| Go <span class="pro">PRO</span> | |
| </a> | |
| </div> | |
| <p class="text-center">It's just $9/month or $75/year.</p> | |
| </div> | |
| <div class="box" data-obj="#collab"> | |
| <h3>Collab Mode</h3> | |
| <a class="top" href="#" data-fn="top">Top</a> | |
| <nav class="panel"> | |
| <h4>On this page:</h4> | |
| <ul> | |
| <li><a href="#how-many">How many people can collaborate at a time?</a></li> | |
| <li><a href="#owner-leaves">What happens if the owner leaves the room?</a></li> | |
| <li><a href="#chat-logs">Are the chat logs saved?</a></li> | |
| <li><a href="#saving-changes">Are the changes that are made in Collab Mode saved?</a></li> | |
| <li><a href="#what-else">What else is Collab Mode good for?</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <h3>What is Collab Mode?</h3> | |
| <p>Collab Mode allows more than one person to edit a pen <strong>at the same time</strong>. Real-time pair programming at its best, since the two people can be anywhere in the world! </p> | |
| <p>Every character you type, every line you select, and every setting you change happens immediately on all of your collaborators screens. And likewise for everything they do. </p> | |
| <h4>How many people can collaborate at a time?</h4> | |
| <p>Collab Mode is only available to CodePen PRO members. Basic PRO members can collaborate with one other person (two people in a room). Super PRO members can collaborate with up to six people in a room. </p> | |
| <h4>What happens if the owner leaves the room?</h4> | |
| <p>Every Collab Mode room has an owner. It is the person who owns the Pen that the room was created from. Collab Mode only works if the owner is in the room. If the owner leaves, the room is closed. The collaborators in the room will see a message informing them that the owner has left. </p> | |
| <h4>Are the chat logs saved?</h4> | |
| <p>In each Collab Mode room, there is a live chat area (like <a href="http://blog.codepen.io/documentation/pro-features/professor-mode/">Professor Mode</a>). These chat sessions are saved to that particular Pen, so you can always open the Pen up in Collab Mode again and see the chat history. </p> | |
| <p>Note that comments are sanctioned off by the type of view you are in. Any given single Pen might have comments on it (from the Details view) Collab comments on it (from Collab Mode) and student comments on it (from Professor Mode).</p> | |
| <h4>Are the changes that are made in Collab Mode saved?</h4> | |
| <p>Only if the owner of the Pen chooses to save them (only they see a Save button). If you are collaborating and want to save the progress, you can click the Fork button and save a fork of the exact state of the Pen at that time.</p> | |
| <h4>What else is Collab Mode good for?</h4> | |
| <p>You could use Collab Mode to conduct phone interviews with front end devs. Rather than quiz them about CSS selectors, have them prove they know them by writing code for you live. This is likely a more true measurement of their skill, since most of us can code better than we can talk about it.</p> | |
| <p>Collab Mode also gives you a venue for private tutoring. Perhaps you're a great teacher of <a href="http://angularjs.org/">Angular.js</a>. You could sell your time privately and connect with students to teach on CodePen.</p> | |
| <p>Collab Mode is also a real time private chat room, so anytime the need for that comes up you'd be covered!</p> | |
| <hr > | |
| <p>And this is just one of many features you get on CodePen PRO. <a href="http://codepen.io/pro/">See all the features</a> or <a href="http://blog.codepen.io/2013/01/08/video-introduction-to-codepen-pro/">watch a video</a>.</p> | |
| <div class="text-center"> | |
| <a class="button secondary" href="http://codepen.io/settings/#pro"> | |
| Go <span class="pro">PRO</span> | |
| </a> | |
| </div> | |
| <p class="text-center">It's just $9/month or $75/year.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <a class="exit-off-canvas"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- / MOBILE THEME --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(function(){ | |
| 'use-strict'; | |
| // http://coveroverflow.com/a/11381730/989439 | |
| // touch on mobile | |
| function mobilecheck() { | |
| var check = false; | |
| (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true;})(navigator.userAgent||navigator.vendor||window.opera); | |
| return check; | |
| } | |
| // for all data-fn | |
| $.dt = function(elem){ | |
| return $('[data-fn="'+elem+'"]'); | |
| }; | |
| // scroll function | |
| function scroll(el){ | |
| $.dt(el).on(mobilecheck() ? 'touchstart' : 'click',function(){ | |
| var link = $(this).attr('href'), | |
| dest = $('[data-obj="'+link+'"]'); | |
| // remove background | |
| dest.siblings().css({ | |
| background:'#fff', | |
| color:'#9B9B9B', | |
| boxShadow:'none' | |
| }); | |
| // add background | |
| dest.css({ | |
| background: '#F08D0F', | |
| color: '#FFF', | |
| boxShadow:'#555 0px 6px 6px -6px' | |
| }); | |
| // close menu | |
| $('.off-canvas-wrap').removeClass('move-right'); | |
| // go to section | |
| $('.iphone_inner').animate({ | |
| scrollTop:dest.position().top | |
| }, 'slow'); | |
| }); | |
| } | |
| // To top | |
| $.dt('top').on(mobilecheck() ? 'touchstart' : 'click',function(){ | |
| $('.iphone_inner').animate({ | |
| scrollTop:0 | |
| }, 'slow'); | |
| return false; | |
| }); | |
| // get all links numbers | |
| function init_script_now(){ | |
| var sl = $('[data-fn]').toArray(); | |
| for (var i = 1; i< sl.length; i++){ | |
| scroll(i); | |
| } | |
| } | |
| // run this | |
| init_script_now(); | |
| // run foundation scripts | |
| $(document).foundation(); | |
| })(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Scrollbar Webkit */ | |
| ::-webkit-scrollbar{ | |
| width:0.1rem; | |
| background:#fff; | |
| } | |
| ::-webkit-scrollbar-thumb{ | |
| background:#fff; | |
| } | |
| body{ | |
| background:url(http://25.media.tumblr.com/a408ad9af259cf827ed4599d60bcb0a9/tumblr_myebwtELvb1st5lhmo1_1280.jpg) no-repeat center center scroll #FF8F00; | |
| background-size:cover; | |
| line-height:1.2rem; | |
| } | |
| .margin-top{ | |
| margin-top: 170px; | |
| } | |
| .iphone{ | |
| position:relative; | |
| background: url("https://dl.dropboxusercontent.com/u/23834858/proyects/iphone.png") no-repeat center center; | |
| width: 375px; | |
| height: 809px; | |
| display: inline-block; | |
| margin-top: 44px; | |
| text-align:center; | |
| } | |
| .iphone_inner { | |
| width: 321px; | |
| height: 549px; | |
| margin: 148px auto; | |
| overflow: auto; | |
| background: #FFF; | |
| } | |
| .box{ | |
| background:#ffffff; | |
| color:#9B9B9B; | |
| position:relative; | |
| padding:1em; | |
| display:block; | |
| margin:0.5rem auto; | |
| text-align:left; | |
| -webkit-transition:background 1s ease,color 1.2s ease; | |
| -moz-transition:background 1s ease,color 1.2s ease; | |
| -o-transition:background 1s ease,color 1.2s ease; | |
| transition:background 1s ease,color 1.2s ease; | |
| } | |
| .top { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| text-decoration: none; | |
| background: #F1F1F1; | |
| color: #8A8A8A; | |
| padding: 0.5rem; | |
| font-size: 0.8rem; | |
| } | |
| .pro { | |
| background: #333; | |
| color:orange; | |
| padding: 0.25rem; | |
| border-radius: 0.2rem; | |
| margin-left: 0.15rem; | |
| } | |
| /* Custom foundation | |
| -------------------------------*/ | |
| code { | |
| word-break: break-all; | |
| background: #D8D8D8; | |
| padding: 0.25rem; | |
| margin: 0.25rem; | |
| color: #777; | |
| } | |
| .th ,iframe{ border: solid 4px #F78B43;} | |
| nav.tab-bar { | |
| background: #FF8F00; | |
| } | |
| section.left-small { | |
| border-right: solid 1px #DF821E; | |
| box-shadow: 1px 0 0 #FFFFFF; | |
| } | |
| .left-off-canvas-menu { | |
| background: #FFFFFF; | |
| } | |
| ul.off-canvas-list li label { | |
| color: #DF821E; | |
| background: #EEEEEE; | |
| border-top: 1px solid #E7E7E7; | |
| font-family: "lato",cursive; | |
| height: 2.8125rem; | |
| line-height: 2rem; | |
| font-size: 1.125rem; | |
| text-align: center; | |
| } | |
| ul.off-canvas-list li a { | |
| color: #A8A9AA; | |
| border-bottom: 1px solid #F0F0F0; | |
| font-family: "lato",cursive; | |
| text-transform: uppercase; | |
| } | |
| ul.off-canvas-list li a:hover { | |
| background: #FAFAFA; | |
| } | |
| a.menu-icon:hover span { | |
| -webkit-box-shadow: 0 10px 0 1px #FFCA86,0 16px 0 1px #FFCA86,0 22px 0 1px #FFCA86; | |
| box-shadow: 0 10px 0 1px #FFCA86,0 16px 0 1px #FFCA86,0 22px 0 1px #FFCA86; | |
| } | |
| .move-right a.exit-off-canvas { | |
| box-shadow: -1px 0 1px #DBDBDB; | |
| } | |
| .title { | |
| font-family: "lato",cursive; | |
| } | |
| .th:hover, .th:focus { | |
| -webkit-box-shadow: 0 0 6px 1px rgba(59, 84, 99, 0.39); | |
| box-shadow: 0 0 6px 1px rgba(59, 84, 99, 0.39); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment