The Pen Settings area in the Pen Editor is a highly important bit of UI in CodePen! You'll see this area when doing anything from changing a preprocessor to changing the description of a Pen to turning on and off Auto-Updating.
We're also working on some new features that will ultimately be a part of Pen Settings, so we thought it was time to spruce up the design.
For the most part, things are under the same "tabs" as they used to be, with just a smidge of re-arranging. Things like Code Indentation and Indent Width are "Editor" concerns so we've broken that into its own tab, while Behavior is the remaining things concerning the behavior of the whole Pen. Also, Privacy has its own tab rather than being combined with Pen Details. But the most important little toggle, Public/Private, is available in the footer so can be changed from anywhere.
Note that you'll see different tabs depending on if you own the Pen or not (e.g. you can't change a Pen's title/description/tags if you don't own it, so we don't even show you that tab). You can change other settings as you play with the Pen, just note they won't actually save unless you fork the Pen for yourself.
Should be plenty friendly on the mobile editor:
High five to Klare who led up this one!
The post New Pen Settings Design appeared first on CodePen Blog.