Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                const frame = new Frame("fit", 800, 600, "#EEE", "#555");
frame.on("ready", ()=>{ 
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// REFERENCES for ZIM at https://zimjs.com
	// see https://zimjs.com/intro.html for an intro example
	// see https://zimjs.com/learn.html for video and code tutorials
	// see https://zimjs.com/docs.html for documentation

	// CODE HERE

	// STYLE can be used to set any parameter on a DisplayObject.
	// For instance: Circle, Blob, Button, Pane, Bitmap, Sprite, etc.
	// These are applied at the time the objects are made.
	// They are cascading with each level overriding the previous level:

	// 1. GENERAL: any style can be specified in general
	// 	corner:30 will make all corners default to 30
	// 2. TYPE: styles for object type can be set to override the general styles
	// 	Button:{corner:0} will make all button corners default to 0
	// 3. GROUP: styles for a group can be set to override the type styles
	// 	homePage:{corner:20} will make all objects of that group default to 20
	// 4. OBJECT: styles applied as parameters to the object override all other styles
	// 	new Button({corner:40}) will make this button have a corner of 40

	STYLE = {
		// all objects will get these styles 
		backgroundColor:pink, // specifically ignored by Label - see below
		rollBackgroundColor:blue, // not applied to Dial as it does not have this parameter
		indicatorColor:white, // not applied to Button and Tabs
		tickColor:grey, // tickColor defaults to indicatorColor in Dial so set tickColor default
		width:220, // specifically ignored by Dial    
		shadowColor:-1, // remove all drop shadows
		type:{
			// specific types get these styles
			Label:{
				add:true, 
				x:30, y:40, 
				scale:.7, 
				alpha:.5, 
				backgroundColor:"ignore"
			},
			Button:{
				center:true, 
				mov:{y:-140}, 
				corner:0
			},
			Tabs:{
				center:true, 
				mov:{y:140},
				corner:20, 
				// outline:true,
				// scale:2,
				// transform:true
			},
			Dial:{
				center:true, 
				mov:series([-80, 80]), 
				width:"ignore"
			} // Dial gets original default width 
		}
	}
	// if you think this looks like CSS... programming has had it for many years before CSS

	// TRANSFORM STYLES
	// Transformations can also be applied (all are numbers - visible is a Boolean):
	// x, y, rotation, alpha, scale, scaleX, scaleY, regX, regY, skewX, skewY, visible
	// a bounds style has a value of {x:Number, y:Number, width:Number, height:Number}
	// where x and y are optional

	// RANDOM, RANGES, AND SERIES STYLES
	// Any property value can be a ZIM VEE value to make use of ZIM Pick see https://zimjs.com/docs.html?item=Pick
	// color:[red, green, blue] will pick a random color for each object for which the style is applied
	// x:series(100,200,300) will place subsequent objects at these locations
	// width:{min:100, max:500} will make objects with a width within this range
	// corner:{noPick:[0,40,0,40]}; will set corners - note we have to noPick this otherwise it would pick a number from the array for the corner value
	// See Docs on ZIM Pick() and ZIM series() for more information
	// Use the delayPick:true style to pass a PICK object to a control
	// See: https://zimjs.com/explore/circleArcs.html

	// FUNCTION STYLES
	// The following functions have been added:
	// addTo, loc, pos, center, centerReg, transform, drag, gesture, outline, mov, animate, wiggle and expand
	// Values of true will give default functionality for all but mov, animate and wiggle
	// ZIM DUO configuration objects can be set as a value for any of these
	// example: drag:true;  or  drag:{onTop:false}
	// For animate and wiggle, [] can be put around multiple configuration objects
	// to wiggle in the x and y for instance or run multiple animate calls on the object

	// CONVENIENCE STYLES
	// add:true - has been provided to add to the stage (use addTo for other containers)
	// move:{x:value, y:value} or move:x - mirrors the mov Function style (just adding the e)
	// pos: has corner convenience values: "left", "right", "top", "bottom", "rightbottom" or "bottomright", "center" and "centerReg"
	// style:false - will turn off all styles for the selector

	// EXCLUSION
	// A value of ignore can be used to exclude any earlier styles and return to the original default.
	// ignore is a ZIM global variable - if zns is true then use zim.ignore or just "ignore".
	// Setting style:false will exclude the object from all styles
	// All DisplayObjects have a style parameter (default true). Set to false to ignore styles.

	// GROUPS
	// All DisplayObjects have a group parameter.
	// This parameter accepts a string or a comma delimited string of multiple groups.
	// The group of components can then be targeted in the Group section of STYLE.
	// A group can contain just one component and act like an ID in CSS.

	// INHERIT
	// Objects can inherit styles from their parent
	// Eg. setting a color font property on List will pass that to Tabs which pass it to Button which passes it to Label
	// This was initially set up manually but a new inherit parameter was created for a better system
	// If any styles are not being applied as expected or as desired, let us know at https://zimjs.com/slack and we can adjust!
	// The inherit property on the Components can be used to pass an object literal of styles to the component directly as well


	new Button();
	new Dial();
	new Dial({indicatorColor:purple}); // override STYLE indicatorColor
	new Tabs();  
	new Label("ZIM STYLE for Canvas Components")

	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// http://zimjs.com/docs.html?item=defaultstyle
	// http://zimjs.com/docs.html?item=button
	// http://zimjs.com/docs.html?item=dial
	// http://zimjs.com/docs.html?item=tabs    
	// http://zimjs.com/docs.html?item=center
	// http://zimjs.com/docs.html?item=mov
	// http://zimjs.com/docs.html?item=pos
	// http://zimjs.com/docs.html?item=label
	// http://zimjs.com/docs.html?item=frame

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 

}); // end of ready


              
            
!
999px

Console