So what is Amazium I hear you ask, well you may have been hearing the term "Responsive Web Design" being thrown around the past few months, which simply means a website that can adjust to your screen size without having to make a separate website!
This came about from the simple fact that a lot of people have been making demos of this responsive web design but none seem to be using 960 grid system with 12 columns, and because of this I was forced to make my own..!
If you find a bug or have a suggestion to improve Amazium I'm always open to suggestions, just use the comments box at the bottom of the page.
The awesome company I work for Jellyfish are looking for a Front-End Developer to work within the existing development team and be responsible for building a variety of applications and sites for external clients and several Jellyfish-owned products and services.
Jellyfish are a diverse digital marketing agency and as such, you can expect to work on anything from simple content managed websites to mobile apps, e-commerce projects and the Jellyfish PPC campaign platform.
We're looking for someone who can bring something new and exciting to the team.
OK so the 960 Grid is what you would expect most modern websites to follow as its set up to be a max width of 960px which will fit the most common screen resolution 1024x768. but as of late I've noticed a lot of sites have been pushing this to 1200 so I've added another query to allow your site to scale to 1200px..! But for the sake of the demos on this site i'll stay with the standard 960px
Now to date I have not found a simpler way to build a website than this system which only relies on the below code to achieve a solid website. And as most new browsers excepting the "Media Queries" code we are now able to resize the grid based on your screen resolution so if you were to view this on say an iPhone you would get an optimised version of the grid which means you no longer have to zoom in to see text on a website. (Go on give it a try now and see the below stay responsive..!)
The code below would create a one section that is 920px wide.
<div class="row">
<div class="grid_12">
---Your text here---
</div>
</div>
Now if you wanted to have two columns say one for a side navigation and one for you main content you would simple use this code. (This would generate a of 280px and another at 600px)
<div class="row">
<div class="grid_4">
---Your text here---
</div>
<div class="grid_8">
---Your text here---
</div>
</div>
If you wanted to nest two columns inside a larger this is no problem either as the below code shows and there is no need to add/change your CSS either..!
<div class="row">
<div class="grid_12">
---Your text here---
<div class="row">
<div class="grid_6">
---1 of 2 columns---
</div>
<div class="grid_6">
---2 of 2 columns---
</div>
</div>
</div>
</div>
Now as you can see from the above grid layout I have made Amazium have 16px gutters/margins left & right which could be changed if you wanted less but I had been using 10px before but found them a little tight for my liking.
Amazium also has the option to offset a column, which should make life all the bit easier if you you need to add an extra bit of space between columns. This is done by adding the class offset followed by how many columns you want the offset to be i.e. if you want to have an offset of 4 then a column of 8 all you need to do is add offset_4 after grid_8.
In Amazium I have set up all the basic typography styling which includes font type defaulted to Century Gothic, but you can easily change in at the very top of the base.css file and all regular paragraphs are set with 20px line height and 10px padding to the bottom of them.
This paragraph is using a class called .intro which makes the font-size & line-height 130% and is perfect introduction text that doesn't need to be a H1.
<strong> This text is rendered as bold.
<em> This text is rendered as italicised.
<small> This text is rendered for fine print.
<sup> This text is rendered as Superscript
<sub> This text is rendered as Subscript
.highlight This text is Highlighted
For standard <ul> bullet ponts ive replace the normal dot with a graphic which can be changes easily
<ul>
<li>Your text here</li>
</ul>
As with <ul> the ordered lists <ol> have had some extra CSS added to them so they are that little bit nicer to look at.
<ol>
<li>Your text here</li>
</ol>
For circular bullet point all you need to do is add the class .circle to the <ul>
<ul class="circle">
<li>Your text here</li>
</ul>
For square bullet point all you need to do is add the class .square to the <ul>
<ul class="square">
<li>Your text here</li>
</ul>
There are times when you may need to only show something on a desktop and not a tablet & phone or the reverse and with that in mind rather than adding a display:none; class I've done the work for you with some extra classes to hide & show content.
| hide-tablet | hide-screen | hide-phone |
| show-tablet | show-screen | show-phone |
Now forms can be one of the biggest pains in the neck for web developers, so I have included a simple form in Amazium with some very basic styling which has all the elements you will need to make your own form.
As well as form styling I've also included some styling for tables which to be honest I haven't used that much outside building emails but it's there in case you ever need it..!
| Title | |||
|---|---|---|---|
| Item: | Category: | Description: | Size: |
| Bananas | Fruit | Desc | 1KG |
| Apples | Fruit | Desc | 3KG |
| Oranges | Fruit | Desc | 2.5KG |
| Mango | Fruit | Desc | 6KG |
In Amazium I've included some styling for table elements like Table Headings (TH) and the option to have odd and even table rows as well as the ability to highlight a cell in your table..!
Amazium uses 6 main media queries to adjust the layout of your website to match the size of your screen. The media queries in Amazium only target at max and min widths rather than device sizes or orientations, which means that any new mobile or browsers that don't match the exact dimensions will still benefit from the styling.
Now I have to say I 'm a little biased towards most things Apple which means the sizes I've chosen works perfectly for iPad & iPhone and everything else I've been able to test Amazium on seems to work fine also..!
@media only screen and (min-width: 480px) and (max-width: 767px) {
---CSS here---
}
Seeing how you website will be responsive there will be times when you will need your images to be responsive to and with this in mind I've made a nice little style to make any image 100% responsive, all you need to do is add this little class to your image: class="max-img" and hay presto responsive images..!
<img src="images/blank.jpg" border="0" alt="blank image" class="max-img">
As mentioned above about images I suspect that you would also like to have all your videos be responsive as well and with this in mind I had to do a little searching around on the web to find the answer for this which is very simple.
All you will need to do is wrap your video with a div that has a class called "video-container" and thats it one responsive video..!
<div class="media">
<iframe src="http://www.youtube.com/embed/d3J12dNz4xo" frameborder="0" allowfullscreen></iframe>
</div>
One thing to point out is that the we have found that the new HTC mobile browsers don't seem to like the new embedding code that YouTube uses so it might be an idea to use the old fashioned method as this seems to work fine.
Although as you can see below that there is a lot more code for the old method..!
<div class="media">
<object width="640" height="390">
<param name="movie" value="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash"
width="640" height="390" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>
So you may want to know what is in this Amazium download well funny you ask as I've made a list below with what you will find inside.
As well as all of the above I've included a few other scripts in Amazium like the "smoothscroll.js" which makes page anchoring that little bit funkier and not forgetting the awesome "totop.js" which you will see on the bottom right hand side of this site.