You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

614 lines
12 KiB

  1. Dimension des frames selon tailles et type :
  2. Sur largeur 1200px :
  3. @gridColumns: 12;
  4. @gridColumnWidth1200: 70px;
  5. @gridGutterWidth1200: 30px;
  6. @gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));
  7. (12 * 70) + 30 * 11 = 840 + 330 = 1170
  8. - layout 7 :
  9. Base : Width total : 1170px
  10. .core(@NcolContent = 6, @NcolAside = 3, @NcolExtra = 3, @gridColumnWidth = 70px, @gridGutterWidth = 30px) {
  11. #container{margin:0 auto}
  12. #wrapper{float:left;width:100%=1170px;margin-left: 0;}
  13. #content{
  14. float: inherit;
  15. margin:0;
  16. width: (70 * 6) + (30 * (5)) = 420 + 150 = 570;
  17. margin-left correspond � la largeur de aside + 1 largeur de Gutter :(70 * 3) + (30 * (3));
  18. margin-right correspond � la largeur de extra + 1 largeur de Gutter:(70 * 3) + (30 * (3));
  19. }
  20. #aside{
  21. clear: none;
  22. float: left;
  23. width: (70 * 3) + (30 * (2)) = 210 + 60 = 270;
  24. margin-left: -((70 * (12 = @NcolAside+@NcolExtra+@NcolContent)) + (30 * (@NcolAside+@NcolExtra+@NcolContent - 1)));
  25. = - (840 + 330) = -1170
  26. }
  27. #extra{
  28. clear: none;
  29. float: left;
  30. width: (70 * 3) + (30 * (2)) = 270;
  31. margin-left: -((70 * 3) + (30 * (3 - 1)));
  32. = -(210 + 60) = -270
  33. }
  34. #footer{clear:left;width:100%}
  35. }
  36. }
  37. Passage en charte acad�mique :
  38. - pr�voir un �cart de 30px � gauche de aside => #aside margin-left=-1140
  39. - pr�voir un �cart de 30px � droite de extra et une r�duction de largeur de 60px pour compenser les 2 �carts pr�c�dents => #extra width=210 et margin-left=-240
  40. - d�placer #contenu de 30px vers la droite => #content margin-left=330
  41. En CSS :
  42. @media (min-width: 1200px) {
  43. #aside {
  44. margin-left:-1140px;
  45. }
  46. #extra {
  47. width:210px;
  48. margin-left:-240px;
  49. }
  50. #content {
  51. margin-left:330px;
  52. }
  53. }
  54. Layout 8 : Idem mais inverser #extra et #aside mais en grossisant
  55. En CSS :
  56. @media (min-width: 1200px) {
  57. #extra {
  58. margin-left:-1140px;
  59. width:210px;
  60. }
  61. #aside {
  62. margin-left:-300px;
  63. }
  64. #content {
  65. margin-left:270px;
  66. }
  67. }
  68. Layout 9 :
  69. @media (min-width: 1200px) {
  70. #extra {
  71. width:210px;
  72. margin-left:-240px;
  73. }
  74. #aside {
  75. margin-left:-540px;
  76. }
  77. #content {
  78. margin-left:30px;
  79. }
  80. }
  81. Layout 10 :
  82. @media (min-width: 1200px) {
  83. #extra {
  84. width:210px;
  85. margin-left:-540px;
  86. }
  87. #aside {
  88. margin-left:-300px;
  89. }
  90. #content {
  91. margin-left:30px;
  92. }
  93. }
  94. Layout 11 :
  95. @media (min-width: 1200px) {
  96. #extra {
  97. width:210px;
  98. margin-left:-840px;
  99. }
  100. #aside {
  101. margin-left:-1140px;
  102. }
  103. #content {
  104. margin-left:570px;
  105. }
  106. }
  107. Layout 12 :
  108. @media (min-width: 1200px) {
  109. #extra {
  110. width:210px;
  111. margin-left:-1140px;
  112. }
  113. #aside {
  114. margin-left:-900px;
  115. }
  116. #content {
  117. margin-left:570px;
  118. }
  119. }
  120. Layout 33 :
  121. @media (min-width: 1200px) {
  122. #extra {
  123. width:310px;
  124. margin-right:30px;
  125. }
  126. #aside {
  127. width:310px;
  128. margin-right:30px;
  129. }
  130. #content {
  131. margin-left:30px;
  132. }
  133. }
  134. Layout 34 :
  135. @media (min-width: 1200px) {
  136. #extra {
  137. width:310px;
  138. margin-left:30px;
  139. }
  140. #aside {
  141. width:310px;
  142. margin-left:30px;
  143. }
  144. #content {
  145. margin-right:30px;
  146. }
  147. }
  148. Layout 35 :
  149. @media (min-width: 1200px) {
  150. #extra {
  151. width:770px;
  152. margin-left:30px;
  153. }
  154. #aside {
  155. width:310px;
  156. margin-right:30px;
  157. }
  158. #content {
  159. margin-left:30px;
  160. }
  161. }
  162. Layout 36 :
  163. @media (min-width: 1200px) {
  164. #extra {
  165. width:770px;
  166. margin-left:30px;
  167. }
  168. #aside {
  169. width:310px;
  170. margin-right:30px;
  171. }
  172. #content {
  173. margin-left:30px;
  174. }
  175. }
  176. Layout 37 :
  177. @media (min-width: 1200px) {
  178. #extra {
  179. width:1110px;
  180. margin-right:30px;
  181. margin-left:30px;
  182. }
  183. #aside {
  184. width:310px;
  185. margin-right:30px;
  186. }
  187. #content {
  188. margin-left:30px;
  189. }
  190. }
  191. Layout 38 :
  192. @media (min-width: 1200px) {
  193. #extra {
  194. width:1110px;
  195. margin-right:30px;
  196. margin-left:30px;
  197. }
  198. #aside {
  199. width:310px;
  200. margin-left:30px;
  201. }
  202. #content {
  203. margin-left:30px;
  204. margin-right:30px;
  205. }
  206. }
  207. Sur largeur 980px � 1200px :
  208. @gridColumns: 12;
  209. @gridColumnWidth: 60px;
  210. @gridGutterWidth: 20px;
  211. @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
  212. (12 * 60) + 20 * 11 = 720 + 220 = 940
  213. - layout 7 :
  214. Base : Width total : 940px
  215. .core(@NcolContent = 6, @NcolAside = 3, @NcolExtra = 3, @gridColumnWidth = 60px, @gridGutterWidth = 20px) {
  216. #container{margin:0 auto}
  217. #wrapper{float:left;width:100%=940px;margin-left: 0;}
  218. #content{
  219. float: inherit;
  220. margin:0;
  221. width: (60 * 6) + (20 * (5)) = 360 + 100 = 460;
  222. margin-left correspond � la largeur de aside + 1 largeur de Gutter :(60 * 3) + (20 * (3)) soit 240px;
  223. margin-right correspond � la largeur de extra + 1 largeur de Gutter:(60 * 3) + (20 * (3)) soit 240px;
  224. }
  225. #aside{
  226. clear: none;
  227. float: left;
  228. width: (60 * 3) + (20 * (2)) = 180 + 40 = 220;
  229. margin-left: -((60 * (12 = @NcolAside+@NcolExtra+@NcolContent)) + (20 * (@NcolAside+@NcolExtra+@NcolContent - 1)));
  230. = - (720 + 220) = -940
  231. }
  232. #extra{
  233. clear: none;
  234. float: left;
  235. width: (60 * 3) + (20 * (2)) = 220;
  236. margin-left: -((60 * 3) + (20 * (3 - 1)));
  237. = -(180 + 40) = -220
  238. }
  239. #footer{clear:left;width:100%}
  240. }
  241. }
  242. Passage en charte acad�mique :
  243. - pr�voir un �cart de 20px � gauche de aside => #aside margin-left=-920
  244. - pr�voir un �cart de 20px � droite de extra et une r�duction de largeur de 40px pour compenser les 2 �carts pr�c�dents => #extra width=180 et margin-left=-200
  245. - d�placer #contenu de 20px vers la droite => #content margin-left=260
  246. En CSS :
  247. @media (min-width: 980px) and (max-width: 1199px) {
  248. #aside {
  249. margin-left:-920px;
  250. }
  251. #extra {
  252. width:180px;
  253. margin-left:-200px;
  254. }
  255. #content {
  256. margin-left:260px;
  257. }
  258. }
  259. Layout 8 : Idem mais inverser #extra et #aside mais en grossisant
  260. En CSS :
  261. @media (min-width: 980px) and (max-width: 1199px) {
  262. #extra {
  263. margin-left:-920px;
  264. width:180px;
  265. }
  266. #aside {
  267. margin-left:-240px;
  268. }
  269. #content {
  270. margin-left:220px;
  271. }
  272. }
  273. Layout 9 :
  274. @media (min-width: 980px) and (max-width: 1199px) {
  275. #extra {
  276. width:180px;
  277. margin-left:-200px;
  278. }
  279. #aside {
  280. margin-left:-440px;
  281. }
  282. #content {
  283. margin-left:20px;
  284. }
  285. }
  286. Layout 10 :
  287. @media (min-width: 980px) and (max-width: 1199px) {
  288. #extra {
  289. width:180px;
  290. margin-left:-440px;
  291. }
  292. #aside {
  293. margin-left:-240px;
  294. }
  295. #content {
  296. margin-left:20px;
  297. }
  298. }
  299. Layout 11 :
  300. @media (min-width: 980px) and (max-width: 1199px) {
  301. #extra {
  302. width:180px;
  303. margin-left:-680px;
  304. }
  305. #aside {
  306. margin-left:-920px;
  307. }
  308. #content {
  309. margin-left:460px;
  310. }
  311. }
  312. Layout 12 :
  313. @media (min-width: 980px) and (max-width: 1199px) {
  314. #extra {
  315. width:180px;
  316. margin-left:-920px;
  317. }
  318. #aside {
  319. margin-left:-720px;
  320. }
  321. #content {
  322. margin-left:460px;
  323. }
  324. }
  325. Layout 33 :
  326. @media (min-width: 980px) and (max-width: 1199px) {
  327. #extra {
  328. width:250px;
  329. margin-right:20px;
  330. }
  331. #aside {
  332. width:250px;
  333. margin-right:20px;
  334. }
  335. #content {
  336. margin-left:20px;
  337. }
  338. }
  339. Layout 34 :
  340. @media (min-width: 980px) and (max-width: 1199px) {
  341. #extra {
  342. width:250px;
  343. margin-left:20px;
  344. }
  345. #aside {
  346. width:250px;
  347. margin-left:20px;
  348. }
  349. #content {
  350. margin-right:20px;
  351. }
  352. }
  353. Layout 35 :
  354. @media (min-width: 980px) and (max-width: 1199px) {
  355. #extra {
  356. width:620px;
  357. margin-left:20px;
  358. }
  359. #aside {
  360. width:250px;
  361. margin-right:20px;
  362. }
  363. #content {
  364. margin-left:20px;
  365. }
  366. }
  367. Layout 36 :
  368. @media (min-width: 980px) and (max-width: 1199px) {
  369. #extra {
  370. width:620px;
  371. margin-right:20px;
  372. }
  373. #aside {
  374. width:250px;
  375. margin-left:20px;
  376. }
  377. #content {
  378. margin-right:20px;
  379. }
  380. }
  381. Layout 37 :
  382. @media (min-width: 980px) and (max-width: 1199px) {
  383. #extra {
  384. width:900px;
  385. margin-right:20px;
  386. margin-left:20px;
  387. }
  388. #aside {
  389. width:250px;
  390. margin-right:20px;
  391. }
  392. #content {
  393. margin-left:20px;
  394. }
  395. }
  396. Layout 38 :
  397. @media (min-width: 980px) and (max-width: 1199px) {
  398. #extra {
  399. width:900px;
  400. margin-right:20px;
  401. margin-left:20px;
  402. }
  403. #aside {
  404. width:250px;
  405. margin-left:20px;
  406. }
  407. #content {
  408. margin-right:20px;
  409. }
  410. }
  411. Sur largeur 768px � 979px :
  412. @gridColumnWidth768: 42px;
  413. @gridGutterWidth768: 20px;
  414. @gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
  415. 12 * 42 + 20 * 11 = 504 + 220 = 724
  416. - layout 33 :
  417. Base : Width total : 724px
  418. .core(@NcolContent = 8, @NcolAside = 4, @NcolExtra = 4, @gridColumnWidth = 42px, @gridGutterWidth = 20px) {
  419. #container{margin:0 auto}
  420. #wrapper{float:none;width:100%=724;margin-left: 0;}
  421. #content,#aside,#extra,#footer {.box-sizing(border-box);}
  422. #content{
  423. float:left;
  424. width:(@gridColumnWidth * @NcolContent) + (@gridGutterWidth * (@NcolContent - 1));
  425. 42 * 8 + 20 * 7 = 336 + 140 = 476 px
  426. margin-left:0;
  427. margin-right:0;
  428. }
  429. #aside{
  430. float: right;
  431. width: (@gridColumnWidth * @NcolAside) + (@gridGutterWidth * (@NcolAside - 1));
  432. 42 * 4 + 20 * 3 = 168 + 60 = 228 px
  433. margin-left:0;
  434. }
  435. #extra{
  436. float: right;
  437. clear: right;
  438. width: (@gridColumnWidth * @NcolExtra) + (@gridGutterWidth * (@NcolExtra - 1));
  439. 42 * 4 + 20 * 3 = 168 + 60 = 228 px
  440. margin-left:0;
  441. }
  442. #footer{clear:both;width:100%}
  443. }
  444. Passage en charte acad�mique :
  445. - pr�voir un �cart de 10px � gauche de content => #content {margin-left:10px;}
  446. - pr�voir un �cart de 10px � droite de extra et aside et une r�duction de largeur de 20px pour compenser les 2 �carts pr�c�dents => #extra {width:208px; margin-right:10px;} #aside {width:208px; margin-right:10px;}
  447. - ajouter une marge de 10px gauche/droite dans l'ent�te et le pied pour aligner avec les colonnes de contenu => .header .spip_logos {margin-left:10px;}
  448. .footer {padding-left:20px;padding-right:10px;}
  449. En CSS :
  450. @media (min-width: 768px) and (max-width: 979px) {
  451. #aside {width:208px; margin-right:10px;}
  452. #extra {width:208px; margin-right:10px;}
  453. #content {margin-left:10px;}
  454. .header .spip_logos {margin-left:10px;}
  455. .footer {padding-left:10px;padding-right:10px;}
  456. }
  457. - Layout 34 :
  458. @media (min-width: 768px) and (max-width: 979px) {
  459. #aside {width:208px; margin-left:10px;}
  460. #extra {width:208px; margin-left:10px;}
  461. #content {margin-right:10px;}
  462. .header .spip_logos {margin-left:10px;}
  463. .footer {padding-left:10px;padding-right:10px;}
  464. }
  465. 35, 36, 37, et 38 directement dans le fichier php.
  466. - Layout 39 :
  467. .core(@NcolContent, @NcolAside, @NcolExtra, @gridColumnWidth, @gridGutterWidth) {
  468. #container{margin:0 auto}
  469. #wrapper {float: none;}
  470. #content,#aside,#extra,#footer {.box-sizing(border-box);}
  471. #content{
  472. float: none;
  473. width:(@gridColumnWidth * @NcolContent) + (@gridGutterWidth * (@NcolContent - 1));
  474. 724px
  475. margin-left:0;
  476. margin-right:0;
  477. }
  478. #aside{
  479. clear: none;
  480. float: left;
  481. width: (@gridColumnWidth * @NcolAside) + (@gridGutterWidth * (@NcolAside - 1));
  482. 42 * 6 + 20 * 5 = 240 + 12 + 100 = 352
  483. margin: 0;
  484. }
  485. #extra{
  486. clear: none;
  487. float: right;
  488. width: (@gridColumnWidth * @NcolExtra) + (@gridGutterWidth * (@NcolExtra - 1));
  489. 42 * 6 + 20 * 5 = 240 + 12 + 100 = 352
  490. margin: 0;
  491. }
  492. #footer{clear:both;width:100%}
  493. }
  494. A modifier en :
  495. @media (min-width: 768px) and (max-width: 979px) {
  496. #content {width:704px; margin-left:10px; margin-right:10px;}
  497. #aside {margin-left:10px; width:342px;}
  498. #extra {margin-right:10px; width:342px;}
  499. #footer{padding-left:10px;padding-right:10px;}
  500. .header .spip_logos {margin-left:10px;}
  501. }
  502. - Layout 40 :
  503. @media (min-width: 768px) and (max-width: 979px) {
  504. #content {width:704px; margin-left:10px; margin-right:10px;}
  505. #aside {margin-right:10px; width:342px;}
  506. #extra {margin-left:10px; width:342px;}
  507. #footer{padding-left:10px;padding-right:10px;}
  508. .header .spip_logos {margin-left:10px;}
  509. }
  510. Pour une largeur comprise entre 450px et 767px :
  511. -Layout 27 :
  512. .core(@WcolContent, @WcolAside, @WcolExtra, @gridColumnWidth, @gridGutterWidth) {
  513. #container{margin:0 auto}
  514. #wrapper {float: none;}
  515. #content,#aside,#extra,#footer {.box-sizing(border-box);}
  516. #content{
  517. float: none;
  518. width: @WcolContent;
  519. auto;
  520. margin-left: 0;
  521. margin-right: 0;
  522. }
  523. #aside{
  524. clear: both;
  525. float: left;
  526. width: @WcolAside;
  527. 48%
  528. margin: 0;
  529. }
  530. #extra{
  531. clear: none;
  532. float: right;
  533. width: @WcolExtra;
  534. 48%
  535. margin: 0;
  536. }
  537. #footer{clear:both;width:100%}
  538. }
  539. @media (min-width: 451px) and (max-width: 767px) {
  540. #content {width:96%; margin-left:1.99%; margin-right:1.99%;}
  541. #extra {width:46%; margin-right:1.99%;}
  542. #aside {width:46%; margin-left:1.99%;}
  543. #footer{padding-left:1.99%; padding-right:1.99%;}
  544. .header .spip_logos {margin-left:1.99%;}
  545. }
  546. -Layout 28 :
  547. @media (min-width: 451px) and (max-width: 767px) {
  548. #content {width:96%; margin-left:1.99%; margin-right:1.99%;}
  549. #extra {width:46%; margin-left:1.99%;}
  550. #aside {width:46%; margin-right:1.99%;}
  551. #footer{padding-left:1.99%; padding-right:1.99%;}
  552. .header .spip_logos {margin-left:1.99%;}
  553. }
  554. Pour une largeur inf�rieure ou �gale � 449px :
  555. @media (max-width: 450px) {
  556. #content, #aside, #extra {width:94%; margin-left:1.99%; margin-right:1.99%; padding-left:0; padding-right:0;}
  557. #footer{padding-left:1.99%; padding-right:1.99%;}
  558. .header .spip_logos {margin-left:1.99%;}
  559. }