Firstly thank you all for replying.
Dropzone uses a folder on the site, so it needs to point to that. As for the grid you will need to write javascript in order to randomize the location of the div's. You're also going to want to look into the .hover hooks.
I want to use dropzone.js but... somehow I just cant figure out how on earth I must configure it where the file gets saved etc.
( Ideally I want someone to download a form fill it in then upload it to the site with necessary documents (jpg etc) then that files gets uploaded to google drive for instance just some other location for easy access rather than a folder on the server)
There is another framework called Foundation. I'm no CSS expert but I think it allows for more customization than Bootstrap.
From your requirements it sounds like you may need to use JavaScript. But again this is not my field.
I am aware of foundation and would in the future use that a lot more, this specific project was done with bootstrap so I think I'll keep it like this, I am fairly familiar with it and know of the occasional css hack that's needed here and there. ( for productivity purposes i'll stick to bootstrap on this one rather than rewriting)
Foundation offers a bit of a better grid system, bootstrap's is a bit of a pain to work with at times. We have had to write many hacks to get some tricky layouts working in our app.
Foundation would be my next choice, but for now bootstrap is doing fine.
Ya this is more than twitter bootstrap would cater for. The 3x3 grid with rotating pictures you could probably find a plugin in somewhere but if your page is generated server side then it's pretty easy to do? Even client side you'd just use a bit of js to either change the src location of the divs or the physical locations of the divs on load.
Don't think it's more than it can cater for, it's still HTML and CSS, just takes a little bit more effort to get it done, I was thinking of doing js, but to be honest I'm still very new to this and not sure exactly how this must work, I can add the code for you:
Div's I want Rotating on refresh:
<div class="row">
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../acc/img/7.jpg" alt="">
</a>
<h3>
<a href="#">Guest House Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../acc/img/8.jpg" alt="">
</a>
<h3>
<a href="#">Guest House Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="../acc/img/9.jpg" alt="">
</a>
<h3>
<a href="#">Guest House Name</a>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div
The hiding of the overlay I'm struggling to picture what the page looks like >.< But sounds like you could do it in either css or js without the need for something like bootstrap?
Basically I have a map of South Africa then I have the same map but with all the provinces. It is all PSD, so you you have the bottom map which is South Africa all the provinces then you have layers which highlights a province.
My idea is to create a interactive map, to search in locations you hover over a location and it chances appearance.
I can probably post links it you guys want to.
Or this is not bad
http://groundworkcss.github.io/
Bootstrap just has good documentation.
I'll check it out.
