From: Kai Moritz <kai@juplo.de>
Date: Mon, 13 Jan 2014 13:53:07 +0000 (+0100)
Subject: CSS für Media-Queries in einer Datei zusammengefasst
X-Git-Tag: thymeroot-2.0.0~143
X-Git-Url: https://juplo.de/gitweb/?p=website;a=commitdiff_plain;h=697279a7b2b206ef6d274ed0c56c795dd28559f6

CSS für Media-Queries in einer Datei zusammengefasst

Es ist performanter, wenn der Browser nur eine CSS-Datei für das Screen-Layout
laden muss. Zudem ermöglicht die Zusammenfassung die Verschachtelung von
@media-Ausdrücken, da diese dann von LESS aufgelöst werden können.
---

diff --git a/pom.xml b/pom.xml
index 6eea9bab..b9e7a1b3 100644
--- a/pom.xml
+++ b/pom.xml
@@ -45,7 +45,7 @@
     <slf4j.version>1.5.8</slf4j.version>
     <springframework.version>3.2.4.RELEASE</springframework.version>
     <tiles.version>3.0.1</tiles.version>
-    <wro4j.version>1.7.2</wro4j.version>
+    <wro4j.version>1.7.3-SNAPSHOT</wro4j.version>
 
   </properties>
 
diff --git a/src/main/webapp/WEB-INF/templates/html-head.jsp b/src/main/webapp/WEB-INF/templates/html-head.jsp
index 1cf205c6..61870cd5 100644
--- a/src/main/webapp/WEB-INF/templates/html-head.jsp
+++ b/src/main/webapp/WEB-INF/templates/html-head.jsp
@@ -6,10 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
 <style type="text/css">
-  @import '${base}css/screen.css' screen and (min-width: 750px);
-  @import '${base}css/tablet.css' screen and (min-width: 750px) and (max-width: 939px);
-  @import '${base}css/phone.css' screen and (max-width: 599px);
-  @import '${base}css/tiny.css' screen and (max-width: 399px);
+  @import '${base}css/screen.css' screen;
 </style>
 <script src="${base}js/base.js"></script>
 <!--[if IE 8]>
diff --git a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
index ae0fb689..0ef0520c 100644
--- a/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenaufteilung.jsp
@@ -9,8 +9,7 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet/less" type="text/css" href="/less/screen/layout.less" />
-    <script src="/js/less.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="/css/seitenaufteilung.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>
diff --git a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
index d7a94729..c9a82c0a 100644
--- a/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
+++ b/src/main/webapp/WEB-INF/views/test/seitenkopf.jsp
@@ -9,8 +9,7 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet/less" type="text/css" href="/less/screen/head.less" />
-    <script src="/js/less.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="/css/seitenkopf.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>
diff --git a/src/main/webapp/WEB-INF/views/test/tablet.jsp b/src/main/webapp/WEB-INF/views/test/tablet.jsp
index 5bf88823..cfe37c73 100644
--- a/src/main/webapp/WEB-INF/views/test/tablet.jsp
+++ b/src/main/webapp/WEB-INF/views/test/tablet.jsp
@@ -9,14 +9,12 @@
   <t:putAttribute name="htmlhead" type="string">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
-    <link rel="stylesheet" type="text/css" href="${base}css/screen.css" />
     <link rel="stylesheet" type="text/css" href="${base}css/tablet.css" />
   </t:putAttribute>
   <t:putAttribute name="maincontent" type="string">
     <p>
       Diese Seite bindet alle Styles ein, die für Tablets eingebunden
-      werden (<code>/css/base.css</code>, <code>/css/screen.css</code> und
-      <code>/css/tablet.css</code>).
+      werden (<code>/css/base.css</code> und <code>/css/tablet.css</code>).
     </p>
     <section>
       <h1>Weitere Experimente</h1>
diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index db202706..8dcf19d8 100644
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -1,43 +1,47 @@
 <groups xmlns="http://www.isdc.ro/wro">
 
   <group name="base">
-    <css>/less/base/browserreset.less</css>
-    <css>/less/base/fonts.less</css>
-    <css>/less/base/util.less</css>
-    <css>/less/base/typo.less</css>
-    <css>/less/base/head.less</css>
-    <css>/less/base/navigation.less</css>
-    <css>/less/base/content.less</css>
-    <css>/less/base/prettify.less</css>
-    <css>/less/base/marginal.less</css>
-    <css>/less/base/footer.less</css>
-    <css>/less/base/formulare.less</css>
+    <css>/less/base.less</css>
     <js>/js/prettify.js</js>
   </group>
 
   <group name="screen">
+    <css>/less/screen.less</css>
+    <css>/less/tablet.less</css>
+    <css>/less/phone.less</css>
+    <css>/less/tiny.less</css>
+  </group>
+
+  <!-- Diese werden nur für die explizite Auswahl eines Stylings benötigt -->
+  <group name="tablet">
+    <css>/less/variables.less</css>
     <css>/less/screen/typo.less</css>
     <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/screen/navigation.less</css>
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
-  </group>
-
-  <group name="tablet">
     <css>/less/tablet/layout.less</css>
     <css>/less/tablet/footer.less</css>
   </group>
-
   <group name="phone">
+    <css>/less/variables.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/navigation.less</css>
   </group>
-
   <group name="tiny">
+    <css>/less/variables.less</css>
     <css>/less/tiny/typo.less</css>
     <css>/less/tiny/navigation.less</css>
   </group>
+  <group name="seitenaufteilung">
+    <css>/less/variables.less</css>
+    <css>/less/screen/layout.less</css>
+  </group>
+  <group name="seitenkopf">
+    <css>/less/variables.less</css>
+    <css>/less/screen/head.less</css>
+  </group>
 
   <group name="ie8">
     <js>/js/html5shiv.js</js>
diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less
new file mode 100644
index 00000000..c8ab1eec
--- /dev/null
+++ b/src/main/webapp/less/base.less
@@ -0,0 +1,12 @@
+@import 'variables.less';
+@import 'base/browserreset.less';
+@import 'base/fonts.less';
+@import 'base/util.less';
+@import 'base/typo.less';
+@import 'base/head.less';
+@import 'base/navigation.less';
+@import 'base/content.less';
+@import 'base/prettify.less';
+@import 'base/marginal.less';
+@import 'base/footer.less';
+@import 'base/formulare.less';
diff --git a/src/main/webapp/less/base/formulare.less b/src/main/webapp/less/base/formulare.less
index 0e2ff374..15843249 100644
--- a/src/main/webapp/less/base/formulare.less
+++ b/src/main/webapp/less/base/formulare.less
@@ -1,7 +1,5 @@
 /** Formulare *****************************************************************/
 
-@import '../variables.less';
-
 .form {
   position: relative;
   width: 100%;
diff --git a/src/main/webapp/less/base/head.less b/src/main/webapp/less/base/head.less
index 750995a6..3c956271 100644
--- a/src/main/webapp/less/base/head.less
+++ b/src/main/webapp/less/base/head.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #header
 {
   .bpreplay;
diff --git a/src/main/webapp/less/base/marginal.less b/src/main/webapp/less/base/marginal.less
index 1b0868d3..9d12af5a 100644
--- a/src/main/webapp/less/base/marginal.less
+++ b/src/main/webapp/less/base/marginal.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 .marginal h1
 {
   font-size: 125%; /** 20 px */
diff --git a/src/main/webapp/less/base/typo.less b/src/main/webapp/less/base/typo.less
index a8d2add4..4516a9c5 100644
--- a/src/main/webapp/less/base/typo.less
+++ b/src/main/webapp/less/base/typo.less
@@ -1,7 +1,5 @@
 /** Typografische Grundeinstellungen ******************************************/
 
-@import '../variables.less';
-
 body
 {
   .droid;
diff --git a/src/main/webapp/less/phone.less b/src/main/webapp/less/phone.less
new file mode 100644
index 00000000..86d429b6
--- /dev/null
+++ b/src/main/webapp/less/phone.less
@@ -0,0 +1,6 @@
+@media screen and (max-width: 599px)
+{
+  @import 'variables.less';
+  @import 'phone/typo.less';
+  @import 'phone/navigation.less';
+}
diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
new file mode 100644
index 00000000..110dc86d
--- /dev/null
+++ b/src/main/webapp/less/screen.less
@@ -0,0 +1,10 @@
+@media screen and (min-width: 750px)
+{
+  @import 'variables.less';
+  @import 'screen/typo.less';
+  @import 'screen/layout.less';
+  @import 'screen/head.less';
+  @import 'screen/navigation.less';
+  @import 'screen/marginal.less';
+  @import 'screen/footer.less';
+}
diff --git a/src/main/webapp/less/screen/footer.less b/src/main/webapp/less/screen/footer.less
index c11be8ce..a9e05771 100644
--- a/src/main/webapp/less/screen/footer.less
+++ b/src/main/webapp/less/screen/footer.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #footer
 {
   padding: 2em 0;
diff --git a/src/main/webapp/less/screen/head.less b/src/main/webapp/less/screen/head.less
index b7409352..b0a20bbe 100644
--- a/src/main/webapp/less/screen/head.less
+++ b/src/main/webapp/less/screen/head.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #header
 {
   margin-left: -4em;
diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index a8cf4ff6..2834d8f5 100644
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 body
 {
   padding: 0 3em 0 5em;
diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
index e393589b..b9704400 100644
--- a/src/main/webapp/less/screen/navigation.less
+++ b/src/main/webapp/less/screen/navigation.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 #nav > hr
 {
   display: none;
diff --git a/src/main/webapp/less/tablet.less b/src/main/webapp/less/tablet.less
new file mode 100644
index 00000000..60456d96
--- /dev/null
+++ b/src/main/webapp/less/tablet.less
@@ -0,0 +1,6 @@
+@media screen and (min-width: 750px) and (max-width: 939px)
+{
+  @import 'variables.less';
+  @import 'tablet/layout.less';
+  @import 'tablet/footer.less';
+}
diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less
index c737f050..df17d2f9 100644
--- a/src/main/webapp/less/tablet/footer.less
+++ b/src/main/webapp/less/tablet/footer.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 .cols_1 > #footer
 {
   margin: 0 0 0 -5em;
diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index d7d37c99..6d97d708 100644
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -1,5 +1,3 @@
-@import '../variables.less';
-
 body
 {
   padding: 0 0 0 5em;
diff --git a/src/main/webapp/less/tiny.less b/src/main/webapp/less/tiny.less
new file mode 100644
index 00000000..ef1470b5
--- /dev/null
+++ b/src/main/webapp/less/tiny.less
@@ -0,0 +1,6 @@
+@media screen and (max-width: 399px)
+{
+  @import 'variables.less';
+  @import 'tiny/typo.less';
+  @import 'tiny/navigation.less';
+}