CSS SANDBOX
CSS SANDBOX!!!
I appologize in advance if CSS Sandbox inputs look 'weird' on your browser. I did my best to cover as main bases as I know how. I guess it is a problem everyone that develops web sites will eventually run into. I work only on chrome browser so I can't attest to what this page looks like on anything else. Hopefully, in the future, as my skills grow I will be able to test these cross browser issues. For now, I'm sorry.
BACK UPHello, and welcome to CSS Sandbox. I created this VERY modest web app after being inspired by Javascript 30 in 30. At the time of this app's creatation I have been coding for almost one month. I learned how to tap into all the different controls with a couple lines of code and I nearly lost my mind. The result is this app which let you, the user, generate a small snippet of code without having to write out any HTML or CSS!
I have a You Tube series that chronicles the making of the app. If you are interested in seeing a rookie web developer stumble through code he barely understands, check it out. It is both educational and entertaining.
Finally, enjoy playing around with CSS Sandbox. I constructed everything WITHOUT the use of external libraries, frameworks or APIs. Its flavor is VANILLA (as they say) I had a blast! CSS variables combined with Javascript open up a vast world of instant DOM manipulation and feedback. There is something wonderful about creating something and being at the controls.
BACK UPThe input of type range is used heavily in this app. They are the long skinny rectangles with the little oval inside. Click and drag them around and see what happens. You can even style the sliders themselves! They also work on touch screens, but from what I've seen they are more responsive with a mouse.
If you are a developer you might notice that all the sliders have a unique look to them, much different than the "stock" look. I didn't import any special files or plug-ins. If you look in my css or visit CSS Tricks you will find the css disaster that makes it happen. My version is similar to there's with my own unique touches.
BACK UPI have pre-selected black and white as the only color values present at start up. This is to allow you, the user, as much freedom in creativity as possible. I tried to keep my styling of elements to an minimum, outside of the basic skeleton of the page. I have also modified the color pickers to display a small palette of colors that I think suit the element they are intended for the best. For anyone reading this that has designed a page with a color picker; THE most annoying thing about them is that they only close by clicking the 'X' in the top corner(or escape on the keyboard). On the other hand, my pre-selected palettes let you click the color or click beside the palette itself and the whole input closes. A much faster and friendlier user experience.
BACK UPYou may have noticed the text outline option in CSS Sandbox. This is not an actual CSS style property. I used a combination of shadows to mimic an outline. I found a handy little site with the Text Outline Hack built in. I have only included the option to have the outline on or off. There is a toggle button. The default setting is on and white. I am hoping this will draw the user's attention when they switch background color's. The width of the outline is simply one pixel, but you, the user, have the option of setting any color you want.
BACK UPAt the time of this writing, I have not yet incorporated the google font link or @import information into the output code. I may do so in the future. For now, if you use a google font you can go to Google Fonts and find the required code. OR you can enter the following code into the HEAD section of your page.
link href="https://fonts.googleapis.com/css?Don't forget the less than symbol before link. I can't get it to show up as the editor reads it as code. Use | to seperate multiple fonts and + to enter multiple word fonts. For example, the code above would add three fonts: Aladin, Barrio and Poiret One to your page. A little complicated for an absolute beginner, but a must have skill to access external dependencies. BACK UP
family=Aladin|Barrio|Poiret+One" rel="stylesheet">