Does anyone here know how to create a responsive website from scratch?
Without using a framework like Bootstrap?
I need this because I get layouts in PSD all custom and it would be easier to create from scratch, since in a period not too far from that all the sites will have to be compatible with mobiles. p>
Study Media Queries, with it you define the sizes in which there will be modification in the layout, for example:
When you reach the minimum width of 767px, change the background color to another.
Here are some examples:
/* Smartphones (retrato e paisagem) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (paisagem) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (retrato) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (retrato e paisagem) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (paisagem) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (retrato) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops e laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Resoluções grandes ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
source: link
I do not think I can explain exactly what you are looking for with a simple answer, but I recommend giving a # in this article , which will clarify some techniques for your layout to be responsive.
The subject touches on subjects you will need as:
A beginning would be:
max-height , 'max-width', overflow: hidden , etc. Use media query in the same css used for larger devices:
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px;
}
}
Use custom css files for devices with lower resolution:
<link rel="stylesheet" href="smartphones.css" media="screen and (max-width:480px)">
Among others.
There is the possibility of creating a responsive website without using a framework, however using them will make your life easier and consequently save time by having several things "ready". I do not recommend using it if you are a beginner, I believe it eliminates one phase of learning.
I have developed projects with several frameworks among them, BootStrap, Foundation, Semantic Ui and currently I do not use because the code is not always well organized, I do not use so many classes and the semantics used is horrible.
One cool tip is to read some of Mobile First, Media Queries, Relative Measures. Do not use gambiarras in the project, the organization in the initial stage will help you a lot during the process.