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: http://juplo.de/gitweb/?a=commitdiff_plain;h=697279a7b2b206ef6d274ed0c56c795dd28559f6;p=website
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';
+}