Ionic on Codepen: how to start a new pen and get Ionic support


Tags: javascript,css,angularjs,cordova

Problem :

There are many Codepen examples for Ionic http://codepen.io/ionic/public-list/

But how can I start a new pen and get Ionic support

If I try to start one from scratch (as in put up some code snippets from docs), Ionic doesn't work: http://codepen.io/adaptivedev/pen/gFnyr

I also tried with the "todo" tutorial code (including the head tag including .css link, which Codepen says isn't necessary) http://codepen.io/adaptivedev/pen/gFnyr

Thanks for any help!



Solution :

If you look at some of the examples you can see they are linking css and js files

<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js">

That would be the bext option. If not, you can link those files by clicking on the little cog icons (under CSS/JS) and adding the link(s) where indicated.


    CSS Howto..

    How to Set Two Transition Durations for Multiple CSS Transforms

    CSS Column Help: How do I get a column within a column?

    How to delete only the selected message inside a #Chat using jquery?

    How to identify is a blog post has been selected or not?

    How to disable auto genrated css in media folder at runtime Magento?

    How to make background image fade in with css when page loads?

    How to center in CSS only after specific HTML element?

    How to align content to the bottom of a div?

    How does google elegantizr work?

    How to capitalize first line with css? ::first-line psuedo-element CSS not working

    CSS Border Color: How to set bottom border color?

    How to remove hover function from top row in table

    How do I get my webpage to look like this?

    Prevent div from showing after slideUp() - jQuery

    Responsive menu show and hide on click

    How to show the width of an element in the content of an ':after' pseudo-element?

    Grails: How do I use the resources plugin to add a CSS “link” tag into the head?

    How to get a label under an underlined word in css? [closed]

    How to find address of css and js files?

    How Do I Make a “Trickless”, Cross-Platform CSS-Based Same Column Height?

    How to add custom code to specific
  • s in wordpress while building navigation?
  • How to modify the CSS Properties (height width) of a div element via JQuery?

    How to convert RGBA to filter for older IE browsers

    How to include multiple Css Class in ActionLink?

    how to crop big image in bootstrap carousel

    How to Position an Element Absolute from Center - CSS

    How to hide

    How to create popup panel using JavaScript & CSS, no libraries?

    how to make an empty span collapse

    How to change css position left to right using jquery?