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..!
Now I must point out that this is still work in progress but I feel that version 1.0 is good enough to share with the web, but 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.
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 optimized 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 column section that is 920px wide.
<div class="row">
<div class="column grid_12">
---Your text here---
</div>
</div>
Now if you wanted to have two columns say one for a side nav and one for you main content you would simple use this code. (This would generate a column of 280px and another at 600px)
<div class="row">
<div class="column grid_4">
---Your text here---
</div>
<div class="column grid_8">
---Your text here---
</div>
</div>
If you wanted to nest two columns inside a larger column 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="column grid_12">
---Your text here---
<div class="row">
<div class="column grid_6">
---1 of 2 coloums---
</div>
<div class="column grid_6">
---2 of 2 coloums---
</div>
</div>
</div>
</div>
Now as you can see from the above grid layout I have made Amazium has 20px gutters/margins which could be changed if you wanted less but I had been using 10px before but found them a little tight for my liking.
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 migh 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 (~82kb) containing all the HTML & CSS you will need to start your own reponsive website project, enjoy..!
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.