Toggler is a feature on the Fermynwoods Contemporary Art website allowing commissioned artists to explore, demonstrate and celebrate the potential of creativity in web design.
As websites become increasingly standardised to ensure familiarity and ease of use for online visitors, Toggler allows artists to champion the role of curiosity and creativity in exploring other possibilities for presenting content online.
Toggler for Schools is an opportunity for young people to participate in a creative coding competition to create a brand new look for our website – perhaps in a subtle way, or perhaps by wreaking havoc! You can share your results and we would love to see what you come up with.
Our favourite contribution will be added to the site alongside the work of commissioned artists from around the world.
Visitors are able to view our website through these different lenses by toggling between styles. Select an artist from the drop down Toggler menu above to explore our content. Please note Toggler will not affect your visiting experience of the home page.
After you’ve experimented with the existing styles try creating your own by following the instructions below or from the downloadable guide here.
If you are ready to submit your results or for any Toggler questions, please contact stuart@fermynwoods.org.
Welcome to Toggler for Schools!
Toggler for Schools is a chance for you to take the Fermynwoods website and create a brand new look. Perhaps in a subtle way, perhaps wreaking havoc! You can share your results and we would love to see what you come up with. Just email us a link to your code when you’re ready.
Code playgrounds
We’ll be using an online Code Playground called Codepen. The code playground is a place where you can easily edit and experiment with the code that makes up webpages. If you want to save and share your work you will need to create an account. Its free, easy and quick but you will need an email address. If that’s not possible, you can still create and enjoy – just not save.
What is HTML and CSS?
There are different types of code that make up a webpage. HTML is designed to hold the information and content. CSS is intended to control how that looks on screen. We’ll be having some fun with the CSS and creating some wild looks. In this guide, we’ll start with some broad ideas, then go into more detail on how to use CSS in the second half.
Lets make a start
In your browser, go to the Toggler Getting Started example on Codepen:
https://codepen.io/therealanteater/pen/gOawXYd?editors=1100
What you can see is a page copied from the Fermynwoods website and placed inside the online code playground Codepen. One window shows how our Fermynwoods page normally looks in a browser. Another window shows the HTML and another shows the CSS. You may also see a window labelled ‘JS’. You could put JavaScript in there, but we won’t be needing that! You can resize the windows by dragging their borders. You can slide the JS window completely out of the way if you like.
A first edit
Scroll to the bottom of the CSS window and click inside it, so you can add new CSS code onto the end of the existing code. Type, or copy and paste these two lines of CSS:
img {transform: rotate(20deg); }p {transform: rotate(-10deg); }Handy things to know are, the curly brackets {}, the round brackets ( ), the colon : and the semicolon ; all matter and have to be the right kind. Spaces and new lines don’t matter, so
img {transform: rotate(20deg); }is just the same as
img{
transform: rotate(20deg);
}Depending on your settings, the on-screen results may update automatically. If not, look for a button marked ‘run’ and click it to make the changes take effect. Hopefully, things are starting to look a bit more creative. If you don’t think it worked, here’s one with the edit made for you:
https://codepen.io/therealanteater/pen/dyYpZrQ?editors=1100
The possibilities are huge and there’s no need to be subtle or conventional (though you can if you like). Here’s some examples from artists commissioned by Fermynwoods… 🙂
This Toggle is by Luke Harby:
https://codepen.io/therealanteater/pen/OJyROVr?editors=1100
This Toggle is by Antonio Roberts:
https://codepen.io/therealanteater/pen/abvmVNW?editors=1100
This is by Sam Francis Read:
https://codepen.io/therealanteater/pen/PoPGOGX?editors=1100
And this was created by Violet Forest:
https://codepen.io/therealanteater/pen/jObMamE?editors=1100
Saving and Stealing and Sharing
In Codepen it’s easy to copy and paste bits of code that you like, or want to try messing about with. Select and copy code from the CSS window in an example, then paste it into your version. Mix n match, steal and twiddle! Don’t worry, a playground like Codepen is about sharing and exchanging.
It’s a good idea to make an account right now. That way, if you make anything cool as we go along, you’ll be able to save it. Check out the end of this guide on how to make an account. Turning someone’s work into your own copy that you can save is called ‘forking’ it. There’s a small button on the bottom of the page marked ‘fork’. Clicking that turns a Fermynwoods example into something you own. Check out the end of this guide for step by step instructions.
Next steps
If you’ve got a lot of computer experience you may be ready to jump in. That’s great, go ahead – just make sure you’ve read the section at the end of this guide on how to create an account and how to begin your own Toggle! On the other hand, if you need more of a clue about CSS, great – that’s what the rest of this guide is for 🙂
Some CSS basics
Important Thing To Know #1: You don’t need Infinite Knowledge. The internet has a huge amount of information about HTML and CSS. You’re in a very good position when you know enough to be able to experiment and search up an answer to your question.
Important Thing To Know #2: A piece of CSS starts with a Selector.
From our first example:
img { transform: rotate(20deg); }‘img’ means ‘image’. That’s the selector. img is HTML speak for a picture or jpeg. Putting img as the selector means ‘the change I’m about to make applies to images’.
Our second line of CSS went:
p { transform: rotate(-10deg); }‘p’ is the selector and ‘p’ means ‘paragraph’. We’ll apply the following change to paragraphs.
After that, you can guess plenty of it. We ‘transform’ that selected thing by ‘rotating’ it -10 degrees. Exactly what you can and cant ‘transform’, and all the other changes you’re able to make are details you just have to learn, but it’s really not too hard! If you thought you could rotate it by any old angle you like, you would be right 🙂
Some things you may like to select:
html – i.e. the whole web page, or
body – basically the same thing as above
img – images
p – paragraphs. That’s anything the person that wrote the HTML said was a ‘paragraph’!
ul – unordered list. On this webpage, most menu items have been called this in the HTML
li – list item. Individual items in a list
a – ‘anchor’, a rubbish name for a link
article – used in this site to mark out each chunk of news
The above are names of HTML tags. They’ll be in most web pages. The next set are names made up especially for this web page. If the page is well written then the names should be reasonably sensible. (The dot at the beginning counts.)
.menu-container
.dropdown
.dropdown-content
.page-header
.page-title
.post-img-wrap
.entry-header
.entry-content
.entry-footer
.sidenav
.sidebar-menu
.page-footer
What do any of them mean? Fiddle and find out! Try this on the end of the CSS:
.menu-container {
background-color: red;
}(Notice the spelling ‘color’ rather than ‘colour’)
If you prefer here it is done for you:
https://codepen.io/therealanteater/pen/ExVNPjQ?editors=1100
Boom! Now we can see the chunk of the webpage that’s called ‘.menu-container’. If you guessed that background-color means the colour of something’s background, you were right again. Nothing will teach you about the workings of a web page faster than getting in there and blowing pieces of it up!
How about mixing some of this together? Try this or make up your own idea…
img{
transform: rotate(20deg);
}
p{
transform: rotate(-10deg);
}
html{
background-color: orange;
}
p {
background-color: green;
}Or, all typed in and ready to fiddle with:
https://codepen.io/therealanteater/pen/LYpbpvr?editors=1100
Here’s a thing to notice. We selected ‘html’ and set its background to orange, which should mean ‘the whole web page, in orange’ but you may have found a part at the top of the page hasn’t changed with it. It’s that .menu-container section again and its because there’s an instruction to set it to white higher up in the existing CSS, and maybe more besides that you’ve added by now! To fix it, you could find any CSS instructions in there that is setting .menu-container to the ‘wrong’ color and try changing it. Or you could add yet more instructions to the end of the CSS to set .menu-container the way you want it!
What can I control?
A lot. Here’s some things to get you started:
Some things for text:
font-size: 20px; Means set the font size to 20 pixels big. Or 2px or 100px or whatever you like…
color: red; Set the text color to red. There’s a list of colors at the end of this guide.
color: #ff0000; If you come across this, its the same as above but the color is given as a number.
text-transform: uppercase; Turns all the text to capitals. Could also be ‘lowercase’ like:
text-transform: lowercase;
font-style: italic; Turn the text italic. You could also use ‘normal’ or ‘oblique’.
font-weight: bold; Can you guess? Can also be ‘normal’
text-decoration: underline; Makes the text underlined. Other options are overline, line-through, and blink.
letter-spacing: 10px; Control the spacing between the letters.
You can combine things between the curly brackets. So,
p {
text-transform:uppercase;
font-weight: bold;
font-size: 30px;
letter-spacing: 15px;
colour: purple;
}That’s going to make the paragraph text all big, spaced-out, purple capitals.
(Don’t forget those colons : and semicolons ; )
And here it is:
https://codepen.io/therealanteater/pen/rNOWeao?editors=1100
Try it out now – go and mess some things up 🙂
Transforms and Animations
You’ve already seen how to rotate things. We can also scale and skew them.
transform: scale(2); Means scale up to twice as big.
transform: scale(0.5); Means scale to half as big.
transform: scalex(2); Scales only in the x direction, which is horizontal.
transform: scaley(2); Scales only in the y direction, which is vertical.
transform: skewx(45deg); Skews a thing. Try it out – its easier to see than to explain!
transform: skewy(45deg);
Animations have one extra part to them, but are still very easy to do. First there’s the ‘animation’ word that you use with your selector. For instance:
.entry-header {
animation-name: myglowything;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}There’s a way to type it in a shorter style. I’ve included this so you’ll recognise it if you come across it in other people’s code. This piece of CSS means exactly the same as the piece above:
.entry-header{
animation: myglowything 2s alternate infinite;
}This code selects .entry-header as the thing to animate. We give the animation the name ‘myglowything’. It takes 2 seconds to play through. We loop the animation forever. The loop runs forwards then backwards, forwards, then backwards. Animation direction could also be normal or reverse. There’s also a shorter way to write exactly the same thing:
Here’s the second part to the animation:
@keyframes myglowything{
from {background-color: red;}
to {background-color: blue;}
}It says:
These are the keyframes for the animation ‘myglowything’. The animation begins with setting the background-color to red, then changes smoothly to end with the background-color blue. Of course, it’s not just changes of background color we could animate!
And here it is:
https://codepen.io/therealanteater/pen/zYvoKLJ?editors=1100
Why have we been adding our CSS at the end of the code?
CSS does what its told in the order its told it. So to avoid confusion, we added code to the end of the list to make sure it was the last thing done. If we want, we could also:
- Delete all the existing CSS and start with a blank sheet. You should definitely try this.
- Look through the existing CSS and Change Stuff To See What Happens. Definitely try this too.
- Copy and paste chunks from the other examples to mix n match. Do this if you feel like it!
Stealing things from the artists examples
Here’s a piece that’s been chopped out from Luke Harby’s CSS. See if you can work out what it’s going to do.
article {
animation: rotating 1s linear infinite;
}@keyframes rotating {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}Here it is added to our code:
https://codepen.io/therealanteater/pen/MWabOGy?editors=1100
Here’s a little trick from Antonio Roberts:
a {
background: url("https://i.imgur.com/6s8IMHU.gif");
}And here it is added to our code:
https://codepen.io/therealanteater/pen/rNOWRGe
Antonio has used an animated gif as a background. The part “https://i.imgur.com/6s8IMHU.gif” is the web address of the gif. Antonio created this glitchy effect gif himself. Lets try linking in a different animated gif from somewhere on the web. For instance:
a {
background: url(“https://media.giphy.com/media/ofkurvw8Mf1Je/giphy.gif”);
}Now we’re linking a free manga gif from the website Giphy, though it’s very hard to tell that’s what it is! Take a look…
https://codepen.io/therealanteater/pen/qBOqVzo?editors=1100
This is a link to the Giphy website:
https://giphy.com/explore/free-animated
If you want to try one out, use their button marked ‘copy link’ and choose ‘gif link’ from the options.
Creating an account at Codepen
It’s very easy and you’ll need one if you want to save and share your work. On the Codepen website, look for the button that says login. You’ll be asked for an email address and a password. Enter your email address and a password that you’ll be able to remember. Simple 🙂
Making your own creation
- You need an account and to be logged in.
- You need one of the Toggler examples as your starting point. It could be a thing you’ve been working on as we’ve been going along. You may want to begin with the ‘Getting Started’ Toggler examples or one of the others, that’s all fine.
- Click the small button at the bottom of he page marked ‘fork’.
- Great 🙂 That has made a copy and saved it in your account. Now, any time you click the ‘save’ button at the top of the screen, the changes get saved as your version. The original stays unchanged. If you need to, you’ll be able to find your work in your ‘dashboard’. Just don’t forget to click that ‘save’ button when you’ve done something you want to keep!
How to share your creation
- You need to have ‘forked’ your code. If you haven’t yet done the steps in ‘Making your own creation’ above, you’ll need to.
- You need to have your work there in Codepen, the way you normally have it when you’re working on it.
- Make sure you’ve saved you most recent changes. Click the ‘save’ button at the top of the screen if you’re not sure you have everything saved yet!
- Copy the web address, also called the URL, from your browser address bar. You can paste that into an email or document to send to people. A lot of the time when you paste a web address into something, it shows up as link people can click. If not, they can just copy and paste it into their browser address bar.
We would love you to share your Toggler creations with us! Email the link to your piece to stuart@fermynwoods.org.
Have fun!
CSS colours
As promised, here’s a list of CSS color names. First a short list, to go easy on you:
white, silver, grey, black, red, maroon, yellow, olive, lime, green , aqua, teal, blue, navy, fuchsia, purple
And the whole set, called the X11 colors:
aliceblue, antiquewhite, aqua, aquamarine, azure, beige, bisque, black, blanchedalmond, blue, blueviolet, brown, burlywood, cadetblue, chartreuse, chocolate, color, coral, cornflowerblue, cornsilk, crimson, cyan, darkblue, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorange, darkorchid, darkred, darksalmon, darkseagreen, darkslateblue, darkslategray, darkturquoise, darkviolet, deeppink, deepskyblue, dimgray, dodgerblue, firebrick, floralwhite, forestgreen, fuchsia, gainsboro, ghostwhite, gold, goldenrod, gray, green, greenyellow, honeydew, hotpink, indianred, indigo, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, lightblue, lightcoral, lightcyan, lightgoldenrodyellow, lightgreen, lightgrey, lightpink, lightsalmon, lightseagreen, lightskyblue, lightslategray, lightsteelblue, lightyellow, lime, limegreen, linen, magenta, maroon, mediumaquamarine, mediumblue, mediumorchid, mediumpurple, mediumseagreen, mediumslateblue, mediumspringgreen, mediumturquoise, mediumvioletred, midnightblue, mintcream, mistyrose, moccasin, navajowhite, navy, oldlace, olive, olivedrab, orange, orangered, orchid, palegoldenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, purple, red, rosybrown, royalblue, saddlebrown, salmon, sandybrown, seagreen, seashell, sienna, silver, skyblue, slateblue, slategray, snow, springgreen, steelblue, tan, teal, thistle, tomato, turquoise, violet, wheat, white, whitesmoke, yellow, yellowgreen
More
You can also read interviews with our previous Toggler artists here to find out what inspired them to create their designs.