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 simple 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 open to suggestions, just use the comments box at the bottom of the page.
Download Amazium here (.Zip ~197kb) Amazium Grid PSD (.Zip ~33kb)
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.
Now to date I have not found a simpler way to build a website than this system which only relays 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 coloums---
</div>
<div class="grid_6">
---2 of 2 coloums---
</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.
NEW to Amazium is the option to offsetting columns which should make life all the bit easier if you you need to position a column over by say 2 columns..!
To achieve the offsetting all you need to do is add in an extra CSS class after your grid_ class..!
<div class="row">
<div class="grid_4 example">
FOUR
</div>
<div class="grid_4 space_4 example">
FOUR with FOUR spacing
</div>
</div>
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 16px line height and 10px padding to the bottom of them.
Other styling is H1 to H6, as shown below and custom bullet points, Trademarks™, Subtext H2O, also I've made a style for buttons and blockquotes.
Code example:
<ul class="circle">
<li>Your text here</li>
</ul>
Code example:
<ul class="square">
<li>Your text here</li>
</ul>
Code example:
<ul class="fancy">
<li>Your text here</li>
</ul>
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 | 3KG |
| Bananas | Fruit | Desc | 3KG |
| Bananas | Fruit | Desc | 3KG |
| Bananas | Fruit | Desc | 3KG |
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 4 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-image" and hay presto responsive images..!
Image code example:
<img src="images/blank.jpg" border="0" alt="blank image" class="max-image">
Been seeing a lot of custom 404 Error pages the past few months and i thought i would make a nice and simple 404 page for Amazium.
Ive included it in the .zip file but you will need to make a .htaccess file to make sure any wrong links to your site will get redirected to the 404.html page.
If you need to know how to make a .htaccess file head over to WTFDWK.
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..!
Video code example:
<div class="video-container">
<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="video-container">
<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>
The Amazium download is a zip file (~197kb) containing all the HTML & CSS you will need to start your own responsive website project, enjoy..!
Download Amazium here (.Zip ~197kb) Amazium Grid PSD (.Zip ~33kb)
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.