• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 729
  • Last Modified:

Open Source templates for responsive design


1.I am looking for PHP based open source templates related with responsive design.

Are there also any open source tools to create responsive websites?
  • 2
  • 2
  • 2
  • +1
2 Solutions
Ray PaseurCommented:
Looking at your profile, I see you have given marked-down grades for the last five questions.  Are the answers really that bad?

Here are some general guidelines to make your use of this site more enjoyable and productive for you...

At EE, the experts exchange answers and advice for points.  If you look at the questions awaiting answers in this zone, you will see a lot of 500 point questions.  Your question is competing for the experts' attention among those high-point questions.  So as a matter of simple economics you might be able to envision which questions will get the experts' attention first.   Just a thought.

We are experts, but not mind readers.  Inquiries that are broad, vague and hypothetical may not get answers that are as succinct and effective as inquiries that have actual URLs, complete code examples, and clearly expressed questions.  "It doesn't work" is not an error message.  Whenever possible, please provide the inputs and tell us what you want for the outputs.  An incredibly important concept is the SSCCE; please read the online page and embrace the SSCCE strategy.  If you do not have the SSCCE, stop what you're doing and create one, and post it with your question.  And please accept that sometimes the right answer is, "Don't do that -- it doesn't work that way."

If you want us to be able to share working code, we need you to show us where you have put your test data.  If you have no test data, please create some.  We do not want you to post "live" passwords and such.  Instead, please set up a testbed and show us the links to that, instead of the live data.

We answer questions and provide teaching examples, but we cannot build applications for you.  If you do not understand the basics of computer science and the programming languages involved in your applications, you might be better off to hire a developer.  Often a great deal of trial and error, plus a depth of knowledge and background information is necessary to get a piece of an application working.  The experts will try to help, but sometimes the only reasonable answer is, "Please read the fine manuals" or "Be respectful of your time; don't take a year learning information technology -- hire a professional developer and you'll get good results in a couple of weeks."

All of us who have been at EE for a while have seen questions like, "How do I do 'X' in 'Y' language, and by the way, I do not know anything about 'Y' language."  For some reason we never see anyone ask, "I want to play a piano sonata, and by the way, I have never taken piano lessons."  It is hardly a sin if you do not know a particular programming language -- I do not know most of them -- but it is not reasonable to expect that you will learn a programming language by asking questions in an online forum, any more than you could learn to play the piano by asking questions in an online forum.  Instead your best question might be, "What are good learning resources to get a foundation in 'Y' language?"  We are glad to help with that.

Best regards, ~Ray

PS: This site is usually pretty good.
Marco GasiFreelancerCommented:
I'm not sure to understand what you mean when you say "PHP based open source templates related with responsive design". Php has nothing to do with responsive web design and css. Ideally, you could just take any web template, be it responsive or not, and use it with your php scripts.

If you need to output your pages through php, you can simply take the template you prefer and ouput the various pieces of html markup.

So I think you can find interesting this site: http://www.designrazzi.com/2013/free-css3-html5-templates/

Hope this helps.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Responsive means your page changes layout based on the size of the screen/viewport.  

You do this using media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries where you can change or hide/show elements based on the current viewport width.
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a style sheet -->
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;

Open in new window

Although not design templates, I like using bootstrap and foundation as a base.  They come with a lot of what you will need as far as a grid, basic css, js/jquery add ons and css to based on the viewport.

As example in bootstrap http://getbootstrap.com/css/#grid
<div id="container">
   <div class="col-med-12">show full width for small and medium devices</div>
    <div class="col-lg-3">left column desktop</div>
    <div class="col-lg-9">right column for desktop</div>

Open in new window

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

RockingAuthor Commented:
thanks to experts for their precious comments

I see you have given marked-down grades for the last five questions

I just can't understand how u can say above?
Regarding grading i had given good in every case and excellent for the answers which perfectly meet my expectation.

Regarding 500 points if the question worth i should give the otherwise i think 100 points are more than enough for this particular question.Wht u say?
Or is the necessary to give 500 points for all the questions raised?

Most of the sites i came across through google before i saw all the experts comment?
Ray PaseurCommented:
... had given good in every case ...
To quote from the grading guidelines:
A should be the default grade awarded unless the answer is deficient. When closing the question, the asker should explain why a B grade was awarded.  I noticed the grades you gave to the last five questions by looking at your profile and clicking the links to "Activity" and then to "Questions."

It's up to you to decide how many points a question is worth.
RockingAuthor Commented:
Ok i understand after going through the link provided by you,how the grades could matter for a experts.

Coming back to question.
Since RWD is a concept,Are there any standards for creating the templates from sctrach?
Or the HTML5 and CSS standards are OK?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
At the core, HTML5, CSS standards always apply.   When designing a responsive page/site, do have to put more thought into it.  The reason is you are making 2 to 4 versions on the same page.  If you use bootstrap for instance, there are 4 different sizes preselected.  http://getbootstrap.com/css/#grid.  You don't need to use all 4, you can use 1,2 or 3 if you like.

You may have a 3 column layout for desktop and for a tablet convert it to 2 column and 1 column for a phone.  

If your site/page is very basic, you may be ok with creating your own @media styles.  I do think working with bootstrap/foundation makes setting up the core files much easier and consistent.

As far as points, I think at one time you did not get unlimited points so it mattered more to the asker what the points were set at.  For now, I would just leave it set to the default since you get unlimited points anyway.  There may be some experts that see the points lowered and not answer or possibly put in less effort.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now