1
|
|
2
|
|
3
|
First read this about SASS, its very important!
|
4
|
-----------------------------------------------
|
5
|
|
6
|
There is more information regarding working with SASS in the SASS CSS folder
|
7
|
_README, however, you need to be aware that if you set Compass to watch the
|
8
|
SASS folder or any SCSS file in this theme it will OVERWRITE the CSS file/s in
|
9
|
your sub-themes CSS directory!
|
10
|
|
11
|
To prevent this ever happening you can delete the config.rb file in the
|
12
|
sub-theme root (unless you are actually planning on using SASS, in which case
|
13
|
you will want to keep it).
|
14
|
|
15
|
|
16
|
|
17
|
|
18
|
Working with Responsive Design in Adaptivetheme
|
19
|
-----------------------------------------------
|
20
|
|
21
|
The subtheme is designed to be "mobile first". In short this means to
|
22
|
first load a set of global styles, the progressively add styles for larger
|
23
|
devices using media queries.
|
24
|
|
25
|
Its important to note that you do not have to follow a mobile first approach.
|
26
|
Adaptivetheme can support Desktop first approach as well, which means you will
|
27
|
progressively add styles to override things for mobile, rather than progressively
|
28
|
adding style for larger devices.
|
29
|
|
30
|
You can do both in Adaptivetheme - it's merely a matter of where you place
|
31
|
the majority of your styles, and what theme settings you choose in the
|
32
|
Appearance settings for your sub-theme.
|
33
|
|
34
|
Lets examine the CSS file structure of Adaptivetheme and look at how each
|
35
|
file is loaded. From this you will be able to deduce what approach might work
|
36
|
for you, and where you should be placing your CSS.
|
37
|
|
38
|
|
39
|
|
40
|
|
41
|
Moible First or Desktop First - that is the Question!
|
42
|
-----------------------------------------------
|
43
|
|
44
|
Depending on your approach AT will load the stylesheets in a different order,
|
45
|
indeed it will load different stylesheets. You MUST make a conscious decision
|
46
|
which to use and set this in theme settings.
|
47
|
|
48
|
Look under CSS settings. By default AT is set to Mobile first, if you want to do
|
49
|
Desktop first you should change this setting.
|
50
|
|
51
|
|
52
|
|
53
|
|
54
|
Global Styles
|
55
|
-------------
|
56
|
|
57
|
The global styles do not target any specific device - they always load for all
|
58
|
devices.
|
59
|
|
60
|
There are two main global stylesheets:
|
61
|
|
62
|
- global.base.css
|
63
|
- global.styles.css
|
64
|
|
65
|
global.base.css - this holds a few imoportant declarations that should probably
|
66
|
not be removed, however you can modify them, such as gutter width and flexibile
|
67
|
image/media styles.
|
68
|
|
69
|
global.styles.css - includes a slighly modified normalize reset and many empty
|
70
|
selectors for elements and drupal classes and id's. If you prefer you can delete
|
71
|
everything in global.styles.css and start with a clean slate.
|
72
|
|
73
|
The selectors are extensive and you should delete unused selectors before
|
74
|
going live to reduce CSS weight. You can use cleancss.com or a better way is
|
75
|
just use SASS, it does this for you.
|
76
|
|
77
|
Each file includes a lot of comments and documentation, please review each of
|
78
|
the global CSS files for more help.
|
79
|
|
80
|
If you are doing mobile first then you will probably keep things to a minimum
|
81
|
in these files. "Minimum" is relative, this might still be a lot of CSS,
|
82
|
never-the-less its worth keeping in mind the mobile view of the site, and
|
83
|
avoid writing CSS rules that are clearly for larger width devices.
|
84
|
|
85
|
|
86
|
|
87
|
|
88
|
Responsive Styles
|
89
|
-----------------
|
90
|
|
91
|
Adaptivetheme 7.x-3.x has two "modes" - Development mode and Production mode.
|
92
|
Depending on what mode you are in the stylesheets will load differently.
|
93
|
|
94
|
Mode changes automatically depending on CSS aggregation settings. When CSS
|
95
|
aggregation is ON, the its in Production mode.
|
96
|
|
97
|
If you don't know what CSS aggregation is, look here:
|
98
|
|
99
|
~/admin/config/development/performance
|
100
|
|
101
|
|
102
|
## Responsive Styles - Development mode
|
103
|
|
104
|
In Development mode (CSS aggregation OFF) the responsive stylesheets will load
|
105
|
in individual link elements with the media query in media attribute.
|
106
|
|
107
|
This allows them to load directly into the browser and you will see your CSS
|
108
|
changes immediately, as per normal CSS development.
|
109
|
|
110
|
There are five of these responsive stylesheets - one for each break point set
|
111
|
in the theme settings:
|
112
|
|
113
|
- responsive.smalltouch.landscape.css
|
114
|
- responsive.smalltouch.portrait.css
|
115
|
- responsive.tablet.landscape.css
|
116
|
- responsive.tablet.portrait.css
|
117
|
- responsive.desktop.css
|
118
|
|
119
|
Its important to know that these files DO NOT contain the media queries,
|
120
|
instead they load in the <link> elements media attribute - remember, these
|
121
|
files only load when in Development Mode.
|
122
|
|
123
|
|
124
|
## Responsive Styles - Production mode
|
125
|
|
126
|
When in production mode all the responsive stylesheets are aggregated into one
|
127
|
file and use embedded @media queries. AT Core will automatically aggregate
|
128
|
the CSS from each of the development mode stylesheets and wrap it in the right
|
129
|
media query. This reduces the number of HTTP requests from 5 to 1.
|
130
|
|
131
|
This file is always called:
|
132
|
|
133
|
- ThemeName.responsive.styles.css
|
134
|
|
135
|
You will find this file at:
|
136
|
|
137
|
~/[public files]/adaptivetheme/[ThemeName]/ThemeName.responsive.styles.css
|
138
|
|
139
|
NOTE: please see the section below titled "Relative Paths in Responsive Styles".
|
140
|
|
141
|
|
142
|
## Important Note about CSS Aggregation and Responsive Stylesheets
|
143
|
|
144
|
Once you have CSS aggregation ON if you make changes to any responsive
|
145
|
stylesheet, you MUST re-save the theme settings AND clear the sites cache. AT
|
146
|
Core will re-write the saved files, then clearing the cache tells Drupal to
|
147
|
use the new file.
|
148
|
|
149
|
|
150
|
## Relative Paths in Responsive Stylesheets
|
151
|
|
152
|
When CSS aggregation is ON AT Core will load the production version of your
|
153
|
responsive styles (see above "Production mode"). this file is loading from
|
154
|
Public Files and not from within your theme so special handling is required for
|
155
|
relative assets - AT Core will do this for you.
|
156
|
|
157
|
AT Core will automatically re-write the relative paths to the files so they
|
158
|
are relative to the site root. This is the same functionality as Drupal core
|
159
|
CSS aggregation feature, so paths are not broken.
|
160
|
|
161
|
If you use absolute paths these will not be altered.
|
162
|
|
163
|
|
164
|
|
165
|
|
166
|
Overlapping/Custom Media queries
|
167
|
--------------------------------
|
168
|
|
169
|
By default the media queries in Adaptivetheme are "stacked", meaning they do
|
170
|
not overlap. This makes it very easy to target one set of device width and not
|
171
|
have those styles "leak" over into others. However it can also mean you may
|
172
|
need to duplicate CSS that you would rather have cascade.
|
173
|
|
174
|
To use custom media queries the sub-theme includes a special file called:
|
175
|
|
176
|
responsive.custom.css
|
177
|
|
178
|
To enable the use of this file in your theme see your theme settings:
|
179
|
|
180
|
Layout & General Settings > CSS > Custom Media Queries
|
181
|
|
182
|
This file has embedded media queries which means you MUST set them yourself.
|
183
|
Defaults are provided.
|
184
|
|
185
|
Allowing styles to cascade can result in a huge saving on total CSS weight and
|
186
|
speed up development.
|
187
|
|
188
|
|
189
|
|
190
|
|
191
|
Internet Explorer Styles and Scripts
|
192
|
------------------------------------
|
193
|
|
194
|
AT can load conditional stylsheets and scripts from you sub-themes info file.
|
195
|
|
196
|
Please see adaptivetheme_subtheme.info - there are good docs and examples of
|
197
|
how to declare stylesheets and scripts for Internet Explorer.
|
198
|
|
199
|
Adaptivetheme also includes special conditional classes on the HTML element
|
200
|
which allow you to easily target styles at specific version of IE.
|
201
|
|
202
|
These are the classes you can use:
|
203
|
|
204
|
.iem7 (IE7 Mobile)
|
205
|
.lt-ie7 (less than IE7)
|
206
|
.lt-ie8 (less than IE8)
|
207
|
.lt-ie9 (less than IE9)
|
208
|
|
209
|
Use these if you only have a small number of overrides and do not want to load
|
210
|
a dedicated conditional stylesheet.
|
211
|
|
212
|
|
213
|
|
214
|
|
215
|
Support
|
216
|
-------
|
217
|
|
218
|
Ping me on Skype if you have life/death critical issues to report...
|
219
|
|
220
|
Skype: jmburnz
|
221
|
|
222
|
Otherwise support my work by joining my theme club, it really does fund my
|
223
|
contrib projects:
|
224
|
|
225
|
http://adaptivethemes.com
|
226
|
|
227
|
Or, you could get radical and file a support issue, even post a patch (which
|
228
|
makes me very happy):
|
229
|
|
230
|
http://drupal.org/project/issues/adaptivetheme
|
231
|
|
232
|
|