Ye Olde Framework
This here CSS framework with a Game of Thrones vibe. All fonts and colors are meant to give a real Westeros feel. The following is a brief intro in how to use this stylesheet. Let us begin our Epic Quest of Understanding!
Page elements
The main elements provided are the nav, main, and footer. Anything included in the nav element will be fixed to the top of the page like above. Also, the nav and footer elements are already set up in the flex system so see the grid guidelines below to figure out how they work.
The main element gives some styles to the page including the width. Include all of your elements inside the main tags to get the stylings that this page has.
House Colors
There are seven color schemes built in for the seven kingdoms: Targaryen, Stark, Lannister, Baratheon, Greyjoy, Tyrell and Martell. In order to use the pre-set color scheme, simply add the lowercase family name to the element. So a div with a class of 'targaryen would look like this:
House Targaryen
And a div with a class of 'tyrell' would end up looking like this:
House Tyrell
But wait! There's more! Each house also has preset hover rules. So any element you want to change on hover, such as a nav bar item or button, you can add an additional class of the family name + Hover. So in our previous example we could add a class 'targaryenHover' and 'tyrellHover' to get the desired effect. You can see how each hose looks below
Targaryen
Stark
Tyrell
Greyjoy
Lannister
Martell
The Almighty Grid System
This framework is based off of the flexbox model. If you don't know what that is, find another framework. But really, just look it up. Almost all the elements need to be wrapped in divs and given class names in order to display correctly on the page. Since we use flexbox, the system's column widths are proportional. Just add a div with the class of 'container'. If you want each column to be the same size, add the class 'col1' to each item like below.
If you want to have columns of varying width, choose between col2 - col8. Keep in mind that the sizing is proportional so a col4 and col2 would be rougly 66% and 33% like so:
Or you could do col8 and col2 for a 20% and 80%.
Again, these are proportional so col8 and col8 would result in a 50%/50%. You get the idea....
Gutters
If you want some gutters around your columns add a special class of 'space' so it will look like this:
Ye Olde Headings and fonts
The H1 and H2 headings are 'Game of Thrones' font created by Charlie Samways. Free for personal use but contact him if you want to use it in any other project. The rest of the headings are 'Cinzel' bold and the main text for the page is in 'Diadact Gothic'. Below is some demonstrations on how they all look. Nothing speclail needs to be added.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Example paragraphs and text elements
Twee raw denim wayfarers, XOXO four dollar toast vegan helvetica literally swag. Mumblecore stumptown poutine cardigan, kogi keytar occupy plaid meggings beard bitters distillery sartorial aesthetic pitchfork. Pinterest yuccie helvetica, church-key dreamcatcher marfa artisan. Chillwave letterpress church-key gluten-free direct trade keytar squid palo santo. Offal hoodie poutine, banjo whatever meh man braid leggings taxidermy selfies single-origin coffee mlkshk bicycle rights lomo venmo. Cardigan four dollar toast sustainable migas yr. Organic tilde 8-bit, lo-fi sustainable literally keytar dreamcatcher food truck tofu. Wolf lomo hella yuccie chambray tattooed. Viral fanny pack pabst hashtag prism shaman vape asymmetrical. Cornhole enamel pin banh mi iceland offal air plant tofu pour-over chartreuse lumbersexual tousled.
- List item one
- List item two
- List item three
- List item one
- List item two
- List item three
Section Title
Section subtitle
Intelligentsia mustache umami, YOLO migas freegan austin adaptogen forage hexagon 3 wolf moon thundercats fanny pack venmo. Leggings migas pabst, semiotics cray iPhone hammock. Kombucha af messenger bag man braid tumeric asymmetrical vape gluten-free narwhal portland pabst fanny pack jean shorts franzen. Jean shorts ugh truffaut next level cloud bread roof party.
Section Title
Section subtitle
Trust fund vinyl semiotics sustainable cred swag YOLO selvage humblebrag pinterest try-hard. Authentic cronut subway tile lomo knausgaard vaporware. Offal locavore waistcoat, dreamcatcher yr gluten-free subway tile crucifix pop-up distillery asymmetrical cronut brooklyn. Pok pok keytar shaman pitchfork selvage. Tattooed kogi forage unicorn.
Blockquotes
Blockquotes don't need anything special except to use the normal blockquote tags. Looks like this:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Forms, fields, labels, inputs and such
The form element is preset with a width of 80%. You can override that if you want but who wants full page fields? The labels and inputs are set up on the flexbox model as well so please put your label and input inside a parent div with the class name of 'formParent'. This will give your elements a nice clean look like below.
Buttons
There are three different sized buttons you can use in this framework: small, meduium and large. In order to get the following styles, add the class of 'smallButt', 'mediumButt', or 'largeButt'.
Tables
Tables come pre-stylized as well. Nothing special needs to be added.
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |