Theme und Grid system
Eingetragen von Mystery (63)am 16.12.2014 - 11:01 Uhr in
Hallo zusammen.
Ich grübel gerade über ein Problem.
Habe mich die letzten Tage intensiv mit dem Thema Grid system und Responsive Design beschäftigt.
Nun möchte ich mein Theme auf ein Grid System Umschreiben.. * Bevor ich euch fragt und meckert.... Ich arebeite mich stück für Stück in Drupal ein. Angefangen vom Grundaufbau über ein Normales Theme usw. So ist für mich der Lerneffekt größer und leichter nachzuvollziehen. Auch wenn es sicher möglich ist, gleich von vorn Herein richtig zu Arbeiten. Allerdings habe ich kein Zeitdruck :-)*
So nun zu meinem Problem.
Ich nutze das 1140px grid von http://www.1140px.com/. Dieses habe ich auf ein 1492px System mit 16 Spalten umgeschrieben. Wenn ich das ganze nur mit einer Simplen index.html teste funktioniert das ganze auch. Sowohl auf PC als auch auf dem Smartphone.
Sobald ich das ganze aber in die page.tpl.php übertrage, funktioniert das grid nur noch auf dem PC aber das Smartphone funktioniert nicht mehr.
Hier mal ein einblick in den Code der CSS Datei
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
.container16 {
margin:0 auto;
padding:0;
position:relative;
width:1492px;
}
.row {margin-bottom:20px;}
.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12, .column13, .column14, .column15, .column16 {
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
}
/* grid 1492px */
.container16 .alpha {margin-left:0;}
.container16 .omega {margin-right:0;}
.container16 .column1 {width:73.25px;}
.container16 .column2 {width:166.5px;}
.container16 .column3 {width:259.75px;}
.container16 .column4 {width:353px;}
.container16 .column5 {width:446.25px;}
.container16 .column6 {width:539.5px;}
.container16 .column7 {width:632.75px;}
.container16 .column8 {width:726px;}
.container16 .column9 {width:819.25px;}
.container16 .column10 {width:912.5px;}
.container16 .column11 {width:1005.75px;}
.container16 .column12 {width:1099;}
.container16 .column13 {width:1192.25px;}
.container16 .column14 {width:1285.5px;}
.container16 .column15 {width:1378.75px;}
.container16 .column16 {width:1472px;}
.container16 .prefix1 {padding-left:93.25px;}
.container16 .prefix2 {padding-left:186.5px;}
.container16 .prefix3 {padding-left:279.75px;}
.container16 .prefix4 {padding-left:373px;}
.container16 .prefix5 {padding-left:466.25px;}
.container16 .prefix6 {padding-left:559.5px;}
.container16 .prefix7 {padding-left:652.75px;}
.container16 .prefix8 {padding-left:746px;}
.container16 .prefix9 {padding-left:839.25px;}
.container16 .prefix10 {padding-left:932.5px;}
.container16 .prefix11 {padding-left:1025.75px;}
.container16 .prefix12 {padding-left:1119;}
.container16 .prefix13 {padding-left:1212.25px;}
.container16 .prefix14 {padding-left:1305.5px;}
.container16 .prefix15 {padding-left:1398.75px;}
@media only screen and (min-width: 1261px) and (max-width: 1440px) {
.container16 {width:1140px;}
.container16 .column1 {width:51.25px;}
.container16 .column2 {width:122.5px;}
.container16 .column3 {width:193.75px;}
.container16 .column4 {width:265px;}
.container16 .column5 {width:336.25px;}
.container16 .column6 {width:407.5px;}
.container16 .column7 {width:478.75px;}
.container16 .column8 {width:550px;}
.container16 .column9 {width:621.25px;}
.container16 .column10 {width:692.5px;}
.container16 .column11 {width:763.75px;}
.container16 .column12 {width:835px;}
.container16 .column13 {width:906.25px;}
.container16 .column14 {width:977.5px;}
.container16 .column15 {width:1048.75px;}
.container16 .column16 {width:1120px;}
.container16 .prefix1 {padding-left:71.25px;}
.container16 .prefix2 {padding-left:142.5px;}
.container16 .prefix3 {padding-left:213.75px;}
.container16 .prefix4 {padding-left:285px;}
.container16 .prefix5 {padding-left:356.25px;}
.container16 .prefix6 {padding-left:427.5px;}
.container16 .prefix7 {padding-left:498.75px;}
.container16 .prefix8 {padding-left:570px;}
.container16 .prefix9 {padding-left:641.25px;}
.container16 .prefix10 {padding-left:712.5px;}
.container16 .prefix11 {padding-left:783.75px;}
.container16 .prefix12 {padding-left:855px;}
.container16 .prefix13 {padding-left:926.25px;}
.container16 .prefix14 {padding-left:997.5px;}
.container16 .prefix15 {padding-left:1068.75px;}
}
@media only screen and (min-width: 960px) and (max-width: 1160px) {
.container16 {width:960px;}
.container16 .column1 {width:40px;}
.container16 .column2 {width:100px;}
.container16 .column3 {width:160px;}
.container16 .column4 {width:220px;}
.container16 .column5 {width:280px;}
.container16 .column6 {width:340px;}
.container16 .column7 {width:400px;}
.container16 .column8 {width:460px;}
.container16 .column9 {width:520px;}
.container16 .column10 {width:580px;}
.container16 .column11 {width:640px;}
.container16 .column12 {width:700px;}
.container16 .column13 {width:760px;}
.container16 .column14 {width:820px;}
.container16 .column15 {width:880px;}
.container16 .column16 {width:940px;}
.container16 .prefix1 {padding-left:60px;}
.container16 .prefix2 {padding-left:120px;}
.container16 .prefix3 {padding-left:180px;}
.container16 .prefix4 {padding-left:240px;}
.container16 .prefix5 {padding-left:300px;}
.container16 .prefix6 {padding-left:360px;}
.container16 .prefix7 {padding-left:420px;}
.container16 .prefix8 {padding-left:480px;}
.container16 .prefix9 {padding-left:540px;}
.container16 .prefix10 {padding-left:600px;}
.container16 .prefix11 {padding-left:660px;}
.container16 .prefix12 {padding-left:720px;}
.container16 .prefix13 {padding-left:780px;}
.container16 .prefix14 {padding-left:840px;}
.container16 .prefix15 {padding-left:900px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container16 {width:768px;}
.container16 .column1 {width:28px;}
.container16 .column2 {width:76px;}
.container16 .column3 {width:124px;}
.container16 .column4 {width:172px;}
.container16 .column5 {width:220px;}
.container16 .column6 {width:268px;}
.container16 .column7 {width:316px;}
.container16 .column8 {width:364px;}
.container16 .column9 {width:412px;}
.container16 .column10 {width:460px;}
.container16 .column11 {width:508px;}
.container16 .column12 {width:556px;}
.container16 .column13 {width:604px;}
.container16 .column14 {width:652px;}
.container16 .column15 {width:700px;}
.container16 .column16 {width:748px;}
.container16 .prefix1 {padding-left:48px;}
.container16 .prefix2 {padding-left:96px;}
.container16 .prefix3 {padding-left:144px;}
.container16 .prefix4 {padding-left:192px;}
.container16 .prefix5 {padding-left:240px;}
.container16 .prefix6 {padding-left:288px;}
.container16 .prefix7 {padding-left:336px;}
.container16 .prefix8 {padding-left:384px;}
.container16 .prefix9 {padding-left:432px;}
.container16 .prefix10 {padding-left:480px;}
.container16 .prefix11 {padding-left:528px;}
.container16 .prefix12 {padding-left:576px;}
.container16 .prefix13 {padding-left:624px;}
.container16 .prefix14 {padding-left:672px;}
.container16 .prefix15 {padding-left:720px;}
}
@media only screen and (max-width: 767px) {
.container16 {width:300px;}
.container16 .column1,
.container16 .column2,
.container16 .column3,
.container16 .column4,
.container16 .column5,
.container16 .column6,
.container16 .column7,
.container16 .column8,
.container16 .column9,
.container16 .column10,
.container16 .column11,
.container16 .column12,
.container16 .column13,
.container16 .column14,
.container16 .column15,
.container16 .column16 {
margin:0 0 20px 0;
width:300px;
}
.container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16 .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;}
.row {margin:0;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container16 {width:420px;}
.container16 .column1,
.container16 .column2,
.container16 .column3,
.container16 .column4,
.container16 .column5,
.container16 .column6,
.container16 .column7,
.container16 .column8,
.container16 .column9,
.container16 .column10,
.container16 .column11,
.container16 .column12,
.container16 .column13,
.container16 .column14,
.container16 .column15,
.container16 .column16 {
margin:0 0 20px 0;
width:420px;
}
.container16 .prefix1, .container16 .prefix2, .container16 .prefix3, .container16 .prefix4, .container16 .prefix5, .container16 .prefix6, .container16 .prefix7, .container16 .prefix8, .container16 .prefix9, .container16 .prefix10, .container16 .prefix11, .container16 .prefix12, .container16 .prefix13, .container16 .prefix14, .container16 .prefix15 {padding-left:0;}
.row {margin:0;}
}
.clearfix:before, .clearfix:after,
.row:before, .row:after,
.container16:before, .container16:after {
content:'.';
display:block;
height:0;
overflow:hidden;
visibility:hidden;
width:0;
}
/* http://sonspring.com/journal/clearing-floats */
.clear {
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
width:0;
}
.row:after, .clearfix:after, .container16:after {clear:both;}
/* For IE7. Move this to separate file when you notice some problems */
.row, .clearfix {zoom: 1;}
img, object, embed {max-width:100%;}
img {height:auto;}Hier ein blick auf die page.tpl.php
<div id="page-wrapper">
<div id="page" class="container16">
<div class="row"> <!-- start of row header -->
<div id="header" class="column16">
<?php print render($page['header']); ?>
</div> <!-- end of header -->
</div> <!-- end of row header -->
</div> <!-- end of page -->
</div> <!-- end of page.wrapper -->Hier der Test mit der index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples - 1140px.com</title>
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/layout_respo_grid_1492px.css">
<style type="text/css">
body {
background: #5bc1af;
color: #fff;
font-family: Ubuntu, Verdana, Tahoma, serif;
}
h1 {
margin: 20px 0 30px;
text-align:center;
}
a, h2 {
color: #fff;
margin: 14px 0;
}
.examples .row p {
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color:#777;
padding:4px 0;
text-align:center;
}
</style>
</head>
<body style=" background-color: #ccc">
<div class="container16" style="background-color: black; height: 260px; position: relative;">
<div class"row">
<div class="container16" >
<h1>HEADER</h1>
</div>
<div class="column4" >
</div>
<div class="column8" >
<nav>
<ul >
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
</ul>
</nav>
</div>
<div class="column4" >
</div>
</div>
</div>
<div class="container16">
<div class"row" style="background-color: red; min-height: 450px; position: relative;">
<div class="container16" >
<div class="container16 column13">
<h1>CONTENT</h1>
</div>
<div class="container16 column3">
<h1>SIDEBAR</h1>
</div>
</div>
</div>
</div>
<div class="container16" style="background-color: green; height: 100px; position: relative;">
<div class"row">
<div class="container16" >
<h1>FOOTER</h1>
</div>
</div>
</div>
</body>
</html>Abschliessend noch mein .info
name = germanwilds_hp_grid
core = 7.x
stylesheets[all][] = css/layout_respo_grid_1492px.css
stylesheets[all][] = css/design.css
regions[header] = Header
regions[top_menu] = Top Menu
regions[login_user] = Login and User
regions[main_menu] = Main Menu
regions[content] = Content
regions[sidebar_right] = Sidebar right
regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer] = FooterIch hoffe ihr könnt mir helfen, um das Smartphone Problem zu lösen. Vielleicht habe ich auch was übersehen...
Grüße mystery
- Anmelden oder Registrieren um Kommentare zu schreiben
Eventuell musst du auch noch
am 16.12.2014 - 15:03 Uhr
Eventuell musst du auch noch die html.tpl.php anpassen
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php print $head_title; ?></title>
<?php print $head; ?>
<?php print $styles; ?>