1 |
85ad3d82
|
Assos Assos
|
|
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 |
a08833bd
|
Assos Assos
|
|
65 |
85ad3d82
|
Assos Assos
|
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 |
74f6bef0
|
Assos Assos
|
- responsive.smalltouch.landscape.css
|
114 |
|
|
- responsive.smalltouch.portrait.css
|
115 |
85ad3d82
|
Assos Assos
|
- 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 |
a08833bd
|
Assos Assos
|
MAPS - what are all these strage files with .map extensions?
|
215 |
|
|
-----------------------------------------------------------_
|
216 |
|
|
|
217 |
|
|
In the CSS directory you will find files with the extension .map. These files
|
218 |
|
|
are used by modern browsers such as Chrome, Safari and Firefox when developing
|
219 |
|
|
using SASS. If you are not usings SASS you can safely ignore or delete these
|
220 |
|
|
files. They are easy to regenerate if you change your mind later (in fact they
|
221 |
|
|
will generate by default if you run compass watch).
|
222 |
|
|
|
223 |
|
|
|
224 |
85ad3d82
|
Assos Assos
|
|
225 |
|
|
Support
|
226 |
|
|
-------
|
227 |
|
|
|
228 |
|
|
Ping me on Skype if you have life/death critical issues to report...
|
229 |
|
|
|
230 |
|
|
Skype: jmburnz
|
231 |
|
|
|
232 |
|
|
Otherwise support my work by joining my theme club, it really does fund my
|
233 |
|
|
contrib projects:
|
234 |
|
|
|
235 |
|
|
http://adaptivethemes.com
|
236 |
|
|
|
237 |
|
|
Or, you could get radical and file a support issue, even post a patch (which
|
238 |
|
|
makes me very happy):
|
239 |
|
|
|
240 |
|
|
http://drupal.org/project/issues/adaptivetheme
|
241 |
|
|
|