cacao-css 3.20.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (356) hide show
  1. package/.prettierignore +10 -0
  2. package/.prettierrc.json +13 -0
  3. package/CHANGELOG.md +16 -4
  4. package/LICENSE +1 -1
  5. package/README.md +8 -472
  6. package/imports.css +282 -0
  7. package/package.json +2 -51
  8. package/src/aspect/aspect.css +23 -0
  9. package/src/base/base.css +44 -0
  10. package/src/config.css +8 -0
  11. package/src/display/core/align.css +15 -0
  12. package/src/display/core/display.css +33 -0
  13. package/src/display/core/flex.css +19 -0
  14. package/src/display/core/justify.css +23 -0
  15. package/src/display/core/order.css +23 -0
  16. package/src/display/lg/align.css +17 -0
  17. package/src/display/lg/display.css +25 -0
  18. package/src/display/lg/flex.css +21 -0
  19. package/src/display/lg/justify.css +25 -0
  20. package/src/display/lg/order.css +25 -0
  21. package/src/display/md/align.css +17 -0
  22. package/src/display/md/display.css +25 -0
  23. package/src/display/md/flex.css +21 -0
  24. package/src/display/md/justify.css +25 -0
  25. package/src/display/md/order.css +25 -0
  26. package/src/display/sm/align.css +17 -0
  27. package/src/display/sm/display.css +25 -0
  28. package/src/display/sm/flex.css +21 -0
  29. package/src/display/sm/justify.css +25 -0
  30. package/src/display/sm/order.css +25 -0
  31. package/src/display/xl/align.css +17 -0
  32. package/src/display/xl/display.css +25 -0
  33. package/src/display/xl/flex.css +21 -0
  34. package/src/display/xl/justify.css +25 -0
  35. package/src/display/xl/order.css +25 -0
  36. package/src/embed/embed.css +21 -0
  37. package/src/fit/fit.css +11 -0
  38. package/src/{css/components/header/header.css → grid/core/col-1.css} +3 -6
  39. package/src/grid/core/col-10.css +43 -0
  40. package/src/grid/core/col-11.css +47 -0
  41. package/src/grid/core/col-12.css +51 -0
  42. package/src/grid/core/col-2.css +11 -0
  43. package/src/{css/components/breadcrumb/breadcrumb.css → grid/core/col-3.css} +8 -9
  44. package/src/grid/core/col-4.css +19 -0
  45. package/src/grid/core/col-5.css +23 -0
  46. package/src/grid/core/col-6.css +27 -0
  47. package/src/grid/core/col-7.css +31 -0
  48. package/src/grid/core/col-8.css +35 -0
  49. package/src/grid/core/col-9.css +39 -0
  50. package/src/grid/grid.css +19 -0
  51. package/src/{css/components/form/required.css → grid/lg/col-1.css} +5 -5
  52. package/src/grid/lg/col-10.css +45 -0
  53. package/src/grid/lg/col-11.css +49 -0
  54. package/src/grid/lg/col-12.css +53 -0
  55. package/src/grid/lg/col-2.css +13 -0
  56. package/src/grid/lg/col-3.css +17 -0
  57. package/src/grid/lg/col-4.css +21 -0
  58. package/src/grid/lg/col-5.css +25 -0
  59. package/src/grid/lg/col-6.css +29 -0
  60. package/src/grid/lg/col-7.css +33 -0
  61. package/src/grid/lg/col-8.css +37 -0
  62. package/src/grid/lg/col-9.css +41 -0
  63. package/src/{css/components/navigation/bar.css → grid/md/col-1.css} +5 -7
  64. package/src/grid/md/col-10.css +45 -0
  65. package/src/grid/md/col-11.css +49 -0
  66. package/src/grid/md/col-12.css +53 -0
  67. package/src/grid/md/col-2.css +13 -0
  68. package/src/grid/md/col-3.css +17 -0
  69. package/src/grid/md/col-4.css +21 -0
  70. package/src/grid/md/col-5.css +25 -0
  71. package/src/grid/md/col-6.css +29 -0
  72. package/src/grid/md/col-7.css +33 -0
  73. package/src/grid/md/col-8.css +37 -0
  74. package/src/grid/md/col-9.css +41 -0
  75. package/src/grid/sm/col-1.css +9 -0
  76. package/src/grid/sm/col-10.css +45 -0
  77. package/src/grid/sm/col-11.css +49 -0
  78. package/src/grid/sm/col-12.css +53 -0
  79. package/src/grid/sm/col-2.css +13 -0
  80. package/src/grid/sm/col-3.css +17 -0
  81. package/src/grid/sm/col-4.css +21 -0
  82. package/src/grid/sm/col-5.css +25 -0
  83. package/src/grid/sm/col-6.css +29 -0
  84. package/src/grid/sm/col-7.css +33 -0
  85. package/src/grid/sm/col-8.css +37 -0
  86. package/src/grid/sm/col-9.css +41 -0
  87. package/src/grid/xl/col-1.css +9 -0
  88. package/src/grid/xl/col-10.css +45 -0
  89. package/src/grid/xl/col-11.css +49 -0
  90. package/src/grid/xl/col-12.css +53 -0
  91. package/src/grid/xl/col-2.css +13 -0
  92. package/src/grid/xl/col-3.css +17 -0
  93. package/src/grid/xl/col-4.css +21 -0
  94. package/src/grid/xl/col-5.css +25 -0
  95. package/src/grid/xl/col-6.css +29 -0
  96. package/src/grid/xl/col-7.css +33 -0
  97. package/src/grid/xl/col-8.css +37 -0
  98. package/src/grid/xl/col-9.css +41 -0
  99. package/src/gutter/core/all.css +31 -0
  100. package/src/gutter/core/horizontal.css +31 -0
  101. package/src/gutter/core/vertical.css +31 -0
  102. package/src/gutter/lg/all.css +33 -0
  103. package/src/gutter/lg/horizontal.css +33 -0
  104. package/src/gutter/lg/vertical.css +33 -0
  105. package/src/gutter/md/all.css +33 -0
  106. package/src/gutter/md/horizontal.css +33 -0
  107. package/src/gutter/md/vertical.css +33 -0
  108. package/src/gutter/sm/all.css +33 -0
  109. package/src/gutter/sm/horizontal.css +33 -0
  110. package/src/gutter/sm/vertical.css +33 -0
  111. package/src/gutter/xl/all.css +33 -0
  112. package/src/gutter/xl/horizontal.css +33 -0
  113. package/src/gutter/xl/vertical.css +33 -0
  114. package/src/image/image.css +30 -0
  115. package/src/links/links.css +18 -0
  116. package/src/margin/core/all.css +27 -0
  117. package/src/margin/core/bottom.css +27 -0
  118. package/src/margin/core/end.css +27 -0
  119. package/src/margin/core/horizontal.css +33 -0
  120. package/src/margin/core/start.css +27 -0
  121. package/src/margin/core/top.css +27 -0
  122. package/src/margin/core/vertical.css +33 -0
  123. package/src/margin/lg/all.css +29 -0
  124. package/src/margin/lg/bottom.css +29 -0
  125. package/src/margin/lg/end.css +29 -0
  126. package/src/margin/lg/horizontal.css +35 -0
  127. package/src/margin/lg/start.css +29 -0
  128. package/src/margin/lg/top.css +29 -0
  129. package/src/margin/lg/vertical.css +35 -0
  130. package/src/margin/md/all.css +29 -0
  131. package/src/margin/md/bottom.css +29 -0
  132. package/src/margin/md/end.css +29 -0
  133. package/src/margin/md/horizontal.css +35 -0
  134. package/src/margin/md/start.css +29 -0
  135. package/src/margin/md/top.css +29 -0
  136. package/src/margin/md/vertical.css +35 -0
  137. package/src/margin/sm/all.css +29 -0
  138. package/src/margin/sm/bottom.css +29 -0
  139. package/src/margin/sm/end.css +29 -0
  140. package/src/margin/sm/horizontal.css +35 -0
  141. package/src/margin/sm/start.css +29 -0
  142. package/src/margin/sm/top.css +29 -0
  143. package/src/margin/sm/vertical.css +35 -0
  144. package/src/margin/xl/all.css +29 -0
  145. package/src/margin/xl/bottom.css +29 -0
  146. package/src/margin/xl/end.css +29 -0
  147. package/src/margin/xl/horizontal.css +35 -0
  148. package/src/margin/xl/start.css +29 -0
  149. package/src/margin/xl/top.css +29 -0
  150. package/src/margin/xl/vertical.css +35 -0
  151. package/src/{css/components/form/success.css → padding/core/all.css} +21 -8
  152. package/src/padding/core/bottom.css +27 -0
  153. package/src/padding/core/end.css +27 -0
  154. package/src/padding/core/horizontal.css +33 -0
  155. package/src/padding/core/start.css +27 -0
  156. package/src/padding/core/top.css +27 -0
  157. package/src/padding/core/vertical.css +33 -0
  158. package/src/padding/lg/all.css +29 -0
  159. package/src/padding/lg/bottom.css +29 -0
  160. package/src/padding/lg/end.css +29 -0
  161. package/src/padding/lg/horizontal.css +35 -0
  162. package/src/padding/lg/start.css +29 -0
  163. package/src/padding/lg/top.css +29 -0
  164. package/src/padding/lg/vertical.css +35 -0
  165. package/src/padding/md/all.css +29 -0
  166. package/src/padding/md/bottom.css +29 -0
  167. package/src/padding/md/end.css +29 -0
  168. package/src/padding/md/horizontal.css +35 -0
  169. package/src/padding/md/start.css +29 -0
  170. package/src/padding/md/top.css +29 -0
  171. package/src/padding/md/vertical.css +35 -0
  172. package/src/padding/sm/all.css +29 -0
  173. package/src/padding/sm/bottom.css +29 -0
  174. package/src/padding/sm/end.css +29 -0
  175. package/src/padding/sm/horizontal.css +35 -0
  176. package/src/padding/sm/start.css +29 -0
  177. package/src/padding/sm/top.css +29 -0
  178. package/src/padding/sm/vertical.css +35 -0
  179. package/src/padding/xl/all.css +29 -0
  180. package/src/padding/xl/bottom.css +29 -0
  181. package/src/padding/xl/end.css +29 -0
  182. package/src/padding/xl/horizontal.css +34 -0
  183. package/src/padding/xl/start.css +29 -0
  184. package/src/padding/xl/top.css +29 -0
  185. package/src/padding/xl/vertical.css +35 -0
  186. package/src/reset/reset.css +47 -0
  187. package/src/{css/utils/background/background.css → size/core/size.css} +7 -1
  188. package/src/size/lg/size.css +13 -0
  189. package/src/size/md/size.css +13 -0
  190. package/src/{css/components/content/content.css → size/sm/size.css} +7 -12
  191. package/src/size/xl/size.css +13 -0
  192. package/src/spacing/spacing.css +15 -0
  193. package/src/{css/components/footer/footer.css → typography/align.css} +4 -3
  194. package/src/typography/transform.css +15 -0
  195. package/src/{css/components/form/label.css → typography/weight.css} +5 -5
  196. package/gulp/config.js +0 -41
  197. package/gulp/css.js +0 -147
  198. package/gulp/utilities.js +0 -150
  199. package/gulpfile.js +0 -37
  200. package/src/css/base/README.md +0 -12
  201. package/src/css/base/base.css +0 -145
  202. package/src/css/base/code.css +0 -36
  203. package/src/css/base/forms.css +0 -67
  204. package/src/css/base/index.css +0 -7
  205. package/src/css/base/print.css +0 -77
  206. package/src/css/base/tables.css +0 -38
  207. package/src/css/base/typography.css +0 -258
  208. package/src/css/components/arrange/arrange.css +0 -157
  209. package/src/css/components/arrange/index.css +0 -1
  210. package/src/css/components/breadcrumb/index.css +0 -1
  211. package/src/css/components/button/README.md +0 -88
  212. package/src/css/components/button/button.css +0 -142
  213. package/src/css/components/button/index.css +0 -1
  214. package/src/css/components/constrain/README.md +0 -65
  215. package/src/css/components/constrain/constrain.css +0 -162
  216. package/src/css/components/constrain/image.css +0 -29
  217. package/src/css/components/constrain/index.css +0 -2
  218. package/src/css/components/container/README.md +0 -28
  219. package/src/css/components/container/container.css +0 -48
  220. package/src/css/components/container/index.css +0 -1
  221. package/src/css/components/content/index.css +0 -1
  222. package/src/css/components/flexembed/README.md +0 -65
  223. package/src/css/components/flexembed/flexembed.css +0 -82
  224. package/src/css/components/flexembed/index.css +0 -1
  225. package/src/css/components/footer/index.css +0 -1
  226. package/src/css/components/form/error.css +0 -21
  227. package/src/css/components/form/index.css +0 -6
  228. package/src/css/components/form/selectmenu.css +0 -92
  229. package/src/css/components/form/textinput.css +0 -60
  230. package/src/css/components/grid/README.md +0 -107
  231. package/src/css/components/grid/grid.css +0 -150
  232. package/src/css/components/grid/index.css +0 -1
  233. package/src/css/components/header/index.css +0 -1
  234. package/src/css/components/image/README.md +0 -66
  235. package/src/css/components/image/caption.css +0 -13
  236. package/src/css/components/image/image.css +0 -59
  237. package/src/css/components/image/index.css +0 -3
  238. package/src/css/components/image/wrapper.css +0 -44
  239. package/src/css/components/index.css +0 -17
  240. package/src/css/components/list/README.md +0 -36
  241. package/src/css/components/list/columns.css +0 -42
  242. package/src/css/components/list/index.css +0 -2
  243. package/src/css/components/list/list.css +0 -162
  244. package/src/css/components/media/README.md +0 -43
  245. package/src/css/components/media/index.css +0 -1
  246. package/src/css/components/media/media.css +0 -161
  247. package/src/css/components/message/index.css +0 -1
  248. package/src/css/components/message/message.css +0 -42
  249. package/src/css/components/navigation/README.md +0 -110
  250. package/src/css/components/navigation/dropdown.css +0 -165
  251. package/src/css/components/navigation/footer.css +0 -59
  252. package/src/css/components/navigation/index.css +0 -7
  253. package/src/css/components/navigation/mainnav.css +0 -73
  254. package/src/css/components/navigation/responsive-overlay.css +0 -129
  255. package/src/css/components/navigation/responsive-pushdown.css +0 -131
  256. package/src/css/components/navigation/sidebar.css +0 -44
  257. package/src/css/components/navigation/small-screen-button.css +0 -99
  258. package/src/css/components/pagination/index.css +0 -1
  259. package/src/css/components/pagination/pagination.css +0 -41
  260. package/src/css/components/triangle/README.md +0 -22
  261. package/src/css/components/triangle/index.css +0 -1
  262. package/src/css/components/triangle/triangle.css +0 -59
  263. package/src/css/config.css +0 -18
  264. package/src/css/main.css +0 -4
  265. package/src/css/utils/align/align.css +0 -26
  266. package/src/css/utils/align/index.css +0 -1
  267. package/src/css/utils/background/index.css +0 -1
  268. package/src/css/utils/content/content.css +0 -11
  269. package/src/css/utils/content/index.css +0 -1
  270. package/src/css/utils/display/display-responsive.css +0 -52
  271. package/src/css/utils/display/display.css +0 -71
  272. package/src/css/utils/display/index.css +0 -2
  273. package/src/css/utils/flex/flex-responsive.css +0 -759
  274. package/src/css/utils/flex/flex.css +0 -253
  275. package/src/css/utils/flex/index.css +0 -2
  276. package/src/css/utils/image/image.css +0 -27
  277. package/src/css/utils/image/index.css +0 -1
  278. package/src/css/utils/index.css +0 -16
  279. package/src/css/utils/layout/index.css +0 -1
  280. package/src/css/utils/layout/layout.css +0 -71
  281. package/src/css/utils/link/index.css +0 -1
  282. package/src/css/utils/link/link.css +0 -95
  283. package/src/css/utils/margin/gutters.css +0 -120
  284. package/src/css/utils/margin/index.css +0 -21
  285. package/src/css/utils/margin/marg-bottom-lg.css +0 -35
  286. package/src/css/utils/margin/marg-bottom-md.css +0 -35
  287. package/src/css/utils/margin/marg-bottom-sm.css +0 -35
  288. package/src/css/utils/margin/marg-bottom.css +0 -34
  289. package/src/css/utils/margin/marg-left-lg.css +0 -35
  290. package/src/css/utils/margin/marg-left-md.css +0 -35
  291. package/src/css/utils/margin/marg-left-sm.css +0 -35
  292. package/src/css/utils/margin/marg-left.css +0 -34
  293. package/src/css/utils/margin/marg-right-lg.css +0 -35
  294. package/src/css/utils/margin/marg-right-md.css +0 -35
  295. package/src/css/utils/margin/marg-right-sm.css +0 -35
  296. package/src/css/utils/margin/marg-right.css +0 -34
  297. package/src/css/utils/margin/marg-top-lg.css +0 -35
  298. package/src/css/utils/margin/marg-top-md.css +0 -35
  299. package/src/css/utils/margin/marg-top-sm.css +0 -35
  300. package/src/css/utils/margin/marg-top.css +0 -34
  301. package/src/css/utils/margin/spaced-lg.css +0 -41
  302. package/src/css/utils/margin/spaced-md.css +0 -41
  303. package/src/css/utils/margin/spaced-sm.css +0 -41
  304. package/src/css/utils/margin/spaced.css +0 -40
  305. package/src/css/utils/padding/gutters-lg.css +0 -40
  306. package/src/css/utils/padding/gutters-md.css +0 -40
  307. package/src/css/utils/padding/gutters-sm.css +0 -40
  308. package/src/css/utils/padding/gutters.css +0 -39
  309. package/src/css/utils/padding/index.css +0 -28
  310. package/src/css/utils/padding/pad-bottom-lg.css +0 -35
  311. package/src/css/utils/padding/pad-bottom-md.css +0 -35
  312. package/src/css/utils/padding/pad-bottom-sm.css +0 -35
  313. package/src/css/utils/padding/pad-bottom.css +0 -34
  314. package/src/css/utils/padding/pad-left-lg.css +0 -35
  315. package/src/css/utils/padding/pad-left-md.css +0 -35
  316. package/src/css/utils/padding/pad-left-sm.css +0 -35
  317. package/src/css/utils/padding/pad-left.css +0 -33
  318. package/src/css/utils/padding/pad-right-lg.css +0 -35
  319. package/src/css/utils/padding/pad-right-md.css +0 -35
  320. package/src/css/utils/padding/pad-right-sm.css +0 -35
  321. package/src/css/utils/padding/pad-right.css +0 -33
  322. package/src/css/utils/padding/pad-top-lg.css +0 -35
  323. package/src/css/utils/padding/pad-top-md.css +0 -35
  324. package/src/css/utils/padding/pad-top-sm.css +0 -35
  325. package/src/css/utils/padding/pad-top.css +0 -34
  326. package/src/css/utils/padding/spaced-lg.css +0 -41
  327. package/src/css/utils/padding/spaced-md.css +0 -41
  328. package/src/css/utils/padding/spaced-sm.css +0 -41
  329. package/src/css/utils/padding/spaced.css +0 -40
  330. package/src/css/utils/position/index.css +0 -1
  331. package/src/css/utils/position/position.css +0 -28
  332. package/src/css/utils/pull/index.css +0 -4
  333. package/src/css/utils/pull/pull-lg.css +0 -130
  334. package/src/css/utils/pull/pull-md.css +0 -130
  335. package/src/css/utils/pull/pull-sm.css +0 -130
  336. package/src/css/utils/pull/pull.css +0 -122
  337. package/src/css/utils/push/index.css +0 -4
  338. package/src/css/utils/push/push-lg.css +0 -130
  339. package/src/css/utils/push/push-md.css +0 -130
  340. package/src/css/utils/push/push-sm.css +0 -130
  341. package/src/css/utils/push/push.css +0 -122
  342. package/src/css/utils/radius/index.css +0 -1
  343. package/src/css/utils/radius/radius.css +0 -35
  344. package/src/css/utils/size/height.css +0 -25
  345. package/src/css/utils/size/index.css +0 -6
  346. package/src/css/utils/size/size-lg.css +0 -184
  347. package/src/css/utils/size/size-md.css +0 -184
  348. package/src/css/utils/size/size-sm.css +0 -184
  349. package/src/css/utils/size/size-xs.css +0 -184
  350. package/src/css/utils/size/size.css +0 -182
  351. package/src/css/utils/size/width.css +0 -25
  352. package/src/css/utils/typography/index.css +0 -4
  353. package/src/css/utils/typography/typography-lg.css +0 -17
  354. package/src/css/utils/typography/typography-md.css +0 -17
  355. package/src/css/utils/typography/typography-sm.css +0 -17
  356. package/src/css/utils/typography/typography.css +0 -241
package/.prettierignore ADDED
@@ -0,0 +1,10 @@
1
+ # Put files to ignore by Prettier here. https://prettier.io/docs/en/ignore.html
2
+
3
+ # Ignore markdown files. They conflict with other markdown formatting rules.
4
+ *.md
5
+
6
+ # Ignore package-lock
7
+ package-lock.json
8
+
9
+ # Ignore HTML files. Specifically template html files
10
+ *.html
package/.prettierrc.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "arrowParens": "always",
3
+ "semi": true,
4
+ "singleQuote": true,
5
+ "overrides": [
6
+ {
7
+ "files": "*.css",
8
+ "options": {
9
+ "printWidth": 120
10
+ }
11
+ }
12
+ ]
13
+ }
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## 4.0.0 (Nov 6, 2023)
4
+
5
+ - Changed default breakpoints to be mobile first.
6
+ - Changed breakpoints to use em instead of px.
7
+ - Updated utility classes names to be more succinct.
8
+ - Removed many rarely used classes.
9
+ - Removed all component classes. You should provide you own components now for more flexibility.
10
+
11
+ ## 3.21.0 (May 11, 2023)
12
+
13
+ - Updated b and strong to actually be bold.
14
+
3
15
  ## 3.20.0 (April 28, 2023)
4
16
 
5
17
  - Take 3.... Updated more hover states to only be applied if hover is supported by the device.
@@ -11,7 +23,7 @@
11
23
  ## 3.18.0 (April 28, 2023)
12
24
 
13
25
  - Updated hover states to only be applied if hover is supported by the device.
14
-
26
+
15
27
  ## 3.17.0 (July 28, 2022)
16
28
 
17
29
  - Added u-size1of1 as an alternate class to u-sizeFull.
@@ -29,11 +41,11 @@
29
41
  ## 3.14.0 (May 12, 2022)
30
42
 
31
43
  - Removed the small screen font styles that cause the font to be smaller on small screens. This is no longer necessary with high resolution mobile phones.
32
-
44
+
33
45
  ## 3.13.0 (December 17, 2021)
34
46
 
35
47
  - Added smooth scrolling on the `<html>` tag by default.
36
-
48
+
37
49
  ## 3.12.0 (December 3, 2021)
38
50
 
39
51
  - Added vertical margin spacing utilities.
@@ -87,7 +99,7 @@ Skipped because this tag already accidentally existed.
87
99
  ## 3.3.0 (Oct 16, 2017)
88
100
 
89
101
  - Adjusted some of the font sizes and margins to be based of of rem and ems instead of pixels.
90
- The goal is to improve accessibility and relative font sizing.
102
+ The goal is to improve accessibility and relative font sizing.
91
103
 
92
104
  ## 3.2.0 (Oct 13, 2017)
93
105
 
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2016 Aptuitiv, Inc
3
+ Copyright (c) 2023 Aptuitiv, Inc
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -1,481 +1,17 @@
1
1
  # Cacao
2
2
 
3
- A set of CSS modules that provide a solid foundation for starting a new project.
4
- Includes project scaffolding and build system for CSS using
5
- [Gulp](http://gulpjs.com/) and [PostCSS](https://github.com/postcss/postcss).
3
+ ## Installation
6
4
 
7
- [How to pronounce Cacao](https://www.youtube.com/watch?v=kVSIkXL_Nmo).
5
+ Install Cacao via NPM:
8
6
 
9
- Cacao stylesheets are based on the [SUIT CSS](https://suitcss.github.io) methodology
10
- including [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md),
11
- [style format](http://github.com/suitcss/suit/blob/master/doc/STYLE.md#css),
12
- and [architectural principles](http://github.com/suitcss/suit/blob/master/doc/design-principles.md).
13
-
14
- ## First time usage
15
-
16
- ### Install Gulp and NodeJS globally if you have not already
17
-
18
- Before you can build the project there are some dependencies that need to be
19
- installed. First install the system-wide dependencies listed below:
20
-
21
- - [Node.js & npm](https://nodejs.org/)
22
- - [Gulp](http://gulpjs.com/)
23
-
24
- ## Getting started
25
-
26
- ### 1) Setup your project folder on your machine
27
-
28
- ### 2) Download the Zip file for this repository and unzip into your project folder
29
-
30
- `Make sure that you can view hidden files and that the .stylelintrc file is included.`
31
-
32
- Or, you can clone the repository and use that as your starting base for your website project.
33
-
34
- ### 3) Navigate to the project directory and install local project dependencies
35
-
36
- Use the command line on your computer to navigate to your projects directory and run the following:
37
-
38
- ```terminal
39
- npm install
40
- ```
41
-
42
- Depending on how node was installed you may need to use:
43
-
44
- ```terminal
45
- sudo npm install
46
- ```
47
-
48
- This will install Gulp, download linked projects (like jQuery) and setup the necessary node components to process CSS, combine and uglify Javascript and minify images (amoung other things).
49
-
50
- If you are using [WebStorm](https://www.jetbrains.com/webstorm/) then you can simply start a new project using your projects folder, open the Terminal tab in Webstorm and run the above command.
51
-
52
- Then run:
53
-
54
- ````terminal
55
- gulp
56
- ````
57
-
58
- That will build the CSS and start the watch task.
59
-
60
- The built resources are located in the new 'dist' folder.
61
-
62
- ````terminal
63
- gulp build
64
- ````
65
-
66
- That will build the CSS.
67
- Essentially everything the default task does except start the watch task.
68
-
69
- ## Working with CSS
70
-
71
- Gulp is used to process the CSS files and compile them together into one CSS file at `dist/css/main.css`.
72
-
73
- Cacao stylesheets are based on the [SUIT CSS](https://suitcss.github.io) methodology
74
- including [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md),
75
- [style format](http://github.com/suitcss/suit/blob/master/doc/STYLE.md#css),
76
- and [architectural principles](http://github.com/suitcss/suit/blob/master/doc/design-principles.md).
77
-
78
- The idea is that you have very focused stylesheets for individual components instead of having one large stylesheet.
79
-
80
- The following is the folder structure for stylesheets within the `src\css` folder:
81
-
82
- ````text
83
- main.css
84
- config.css
85
- L base
86
- L components
87
- L utils
88
- ````
89
-
90
- The `main.css` file imports the `config.css` file as well as the `main.css` files within the `base`, `components` and `utils` folders.
91
-
92
- ### config.css
93
-
94
- The `config.css` file is where global media query breakpoints and global configuration variables are located.
95
-
96
- By default just a few media query breakpoints are setup:
97
-
98
- ````css
99
- @custom-media --c-bp-xl (max-width: 1200px);
100
- @custom-media --c-bp-lg (max-width: 1050px);
101
- @custom-media --c-bp-md (max-width: 800px);
102
- @custom-media --c-bp-sm (max-width: 600px);
103
- @custom-media --c-bp-xs (max-width: 425px);
104
- ````
105
-
106
- You would use those in your CSS like so:
107
-
108
- ````css
109
- @media (--c-bp-lg) {
110
- .Header {
111
- border: none;
112
- }
113
- }
114
- ````
115
-
116
- An example usage of global variables would be to setup common colors used so that you don't have to type the same color over and over again. It also makes it convenient to have one place
117
- to change a color if necessary.
118
-
119
- ````css
120
- :root {
121
- --c-blue: #15bdde;
122
- --c-green: #64a70b;
123
- --c-orange: #dc4405;
124
- --c-teal: #009483;
125
- }
126
- ````
127
-
128
- You could then use that variable in your CSS like so:
129
-
130
- ````css
131
- .Button {
132
- background-color: var(--c-blue);
133
- }
134
- ````
135
-
136
- ### Base
137
-
138
- The base directory contains the following stylesheets:
139
-
140
- ````css
141
- base.css
142
- code.css
143
- forms.css
144
- index.css
145
- tables.css
146
- typography.css
147
- ````
148
-
149
- `index.css` imports the other stylesheets within this folder as well as [Normalize.css](https://necolas.github.io/normalize.css/).
150
-
151
- The styles in the base folder are the general styles for elements. The direct element tag is used as the selector.
152
-
153
- #### base.css
154
-
155
- base.css includes the basic styles for `<body>` as well as images, iframe and other elements.
156
-
157
- Other than changing the body background this file isn't changed much.
158
-
159
- #### code.css
160
-
161
- code.css includes basic styles for `<code>`, `<kdb>`, `<pre>` and `<samp>` tags.
162
-
163
- #### forms.css
164
-
165
- forms.css includes basic styles for `<fieldset>`, `<label>`, `<input>`, `<button>`, `<textarea>` and other form related tags.
166
-
167
- This file is not changed much.
168
-
169
- #### tables.css
170
-
171
- tables.css includes basic styles for for tables, table columns and table headings.
172
-
173
- This files is not changed much.
174
-
175
- #### typography.css
176
-
177
- The typography.css file is the one file in the `base` directory that you would most likely change.
178
-
179
- It contains the typographical styles for most elements.
180
-
181
- For the most part you can simply change the values for the variables at the top.
182
-
183
- ````css
184
- :root {
185
- --base-typography-color: #333;
186
- --base-typography-fontFamily: sans-serif;
187
- --base-typography-fontSize: 15px;
188
- --base-typography-fontWeight: 400;
189
- --base-typography-hrule-width: 1px;
190
- --base-typography-letterSpacing: 0;
191
- --base-typography-lineHeight: 20px;
192
- --base-typography-spacing: var(--base-typography-lineHeight);
193
- }
194
-
195
- :root {
196
- --base-typography-link-color: #000;
197
- --base-typography-link-colorHover: var(--base-typography-link-color);
198
- --base-typography-link-decoration: underline;
199
- --base-typography-link-decorationHover: underline;
200
- }
201
-
202
- /* headings */
203
-
204
- :root {
205
- --base-typography-h1-fontSize: 32px;
206
- --base-typography-h2-fontSize: 28px;
207
- --base-typography-h3-fontSize: 24px;
208
- --base-typography-h4-fontSize: 20px;
209
- --base-typography-h5-fontSize: 18px;
210
- --base-typography-h6-fontSize: 15px;
211
- --base-typography-h1-lineHeight: 40px;
212
- --base-typography-h2-lineHeight: 30px;
213
- --base-typography-h3-lineHeight: 33px;
214
- --base-typography-h4-lineHeight: 30px;
215
- --base-typography-h5-lineHeight: 20px;
216
- --base-typography-h6-lineHeight: 20px;
217
- --base-typography-heading-color: inherit;
218
- --base-typography-heading-fontFamily: sans-serif;
219
- --base-typography-heading-fontWeight: 700;
220
- --base-typography-heading-letterSpacing: 0;
221
- }
222
- ````
223
-
224
- Or, if necessary you could edit or add styles directly further down in the stylesheet.
225
-
226
- Keep in mind that this is supposed to be general styles for HTML elements. You would not use class selectors in any of the `base` stylesheets. That would take place either in the utility classes or within components.
227
-
228
- ### Components
229
-
230
- The `components` directory is where you will do most of your work with a site.
231
-
232
- This directory has a number of included components for things like buttons, dropdown and main navigation bars, text fields, images, and grid.
233
-
234
- Many of the components have README files within their directory that explains what they are and how to use them.
235
-
236
- [View tests for components](http://aptuitiv.github.io/cacao/test/).
237
-
238
- #### Adding a new component
239
-
240
- In this example we're going to add a "header" component to hold the styles for the header section of the site.
241
-
242
- ##### 1) To add a new component first create a directory within the `components` directory that matches the name of the component
243
-
244
- Keep in mind that components follow the [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) of [SUIT CSS](https://suitcss.github.io).
245
-
246
- The component folder should always be lowercase.
247
-
248
- In our example the folder would be `header`.
249
-
250
- ##### 2) Add a stylesheet within your component folder that is the same name as your component
251
-
252
- In our example the stylesheet would be called `header.css`.
253
-
254
- ##### 3) Add a stylesheet within your component folder called index.css and import the other stylesheet
255
-
256
- In our example the index.css file would include the following:
257
-
258
- ````css
259
- @import './header';
260
- ````
261
-
262
- You can include ".css" after "header" if you want but it's not necessary.
263
-
264
- ##### 4) Add an import into `components\index.css` to import the new component
265
-
266
- In our example you would add the following within `components\index.css`:
267
-
268
- ````css
269
- @import './header';
270
- ````
271
-
272
- Since the 'header' directory contains an `index.css` file then that import statement will import the `index.css` file. It's the same as writing
273
-
274
- ````css
275
- @import './header/index.css';
276
- ````
277
-
278
- ##### 5) Add an initial comment to your component stylesheet
279
-
280
- It's always good to add a comment at the top of your component stylesheet to describe what it is.
281
-
282
- The very first comment in the file should follow this structure:
283
-
284
- ````css
285
- /* =========================================================================== *\
286
- Description of component here
287
- \* =========================================================================== */
288
- ````
289
-
290
- ##### 6) Add the `Define` statement to your component stylesheet
291
-
292
- To enforce the SuitCSS [naming convention](http://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) we add a special comment near the top of the file to set what the
293
- base class name should be within this file.
294
-
295
- In our `header` example we would have the following code.
296
-
297
- ````css
298
- /** @define Header */
299
- ````
300
-
301
- This will cause the CSS parser to show you a warning in the terminal when the CSS is processed if you are using an invalid selector.
302
-
303
- Cacao uses the [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) plugin to enforce naming rules.
304
-
305
- The combination of steps 5 and 6 would result in the following code at the top of the header.css file:
306
-
307
- ````css
308
- /* =========================================================================== *\
309
- Page header styles. The section of the page above the main navigation.
310
- \* =========================================================================== */
311
-
312
-
313
- /** @define Header */
314
-
315
- ````
316
-
317
- You would then add your CSS below all that.
318
-
319
- #### Using an invalid selector
320
-
321
- If for some reason you need to use a selector in your stylesheet that would not be valid you can add the following comment on the line immediately before your selector:
322
-
323
- ````css
324
- /* postcss-bem-linter: ignore */
325
- ````
326
-
327
- That only applies to one selector so you would need to add that before each selector that is not valid.
328
-
329
- ````css
330
- /* postcss-bem-linter: ignore */
331
- .invalid-selector {
332
- color: red;
333
- }
334
-
335
- /* postcss-bem-linter: ignore */
336
- .another-invalid-selector {
337
- color: blue;
338
- }
339
- ````
340
-
341
- ### Utils
342
-
343
- The `utils` directory includes all of the utility classes.
344
-
345
- You would use these to adjust font styles, set grid column sizes, adjust margins apply flex styles and change element layouts.
346
-
347
- These classes are useful because you can use a combination of them to set a HTML element's style instead of creating a bunch of small components.
348
-
349
- **If you find yourself adding a lot of utlity classes to an element (other than size classes on Grid columns) then you may want to create a new component instead.**
350
-
351
- Typically the styles within this directory are not changed much, if at all.
352
-
353
- #### align
354
-
355
- Adjust the vertical alignment of elements.
356
-
357
- #### display
358
-
359
- Set the `display` style for elements. Includes styles that can be used at different breakpoints.
360
-
361
- #### flex
362
-
363
- Apply common flexbox styles to an element.
364
-
365
- #### image
366
-
367
- Set an image to be full width.
368
-
369
- #### layout
370
-
371
- Floats and clearfix.
372
-
373
- #### link
374
-
375
- Adjust how links are styled. Useful for adjusting the `text-decoration` style for links.
376
-
377
- #### margin
378
-
379
- Adjust the top and/or bottom margins. Includes styles that can be used at different breakpoints.
380
-
381
- #### padding
382
-
383
- Adjust the top and/or bottom padding.
384
-
385
- Adjust the horizontal padding with gutter utility classes.
386
-
387
- #### position
388
-
389
- Adjust the `position` style for elements.
390
-
391
- #### pull
392
-
393
- Pull an element to the left. Includes styles that can be used at different breakpoints.
394
-
395
- This is commonly used with the Grid component.
396
-
397
- #### push
398
-
399
- Push an element to the right. Includes styles that can be used at different breakpoints.
400
-
401
- This is commonly used with the Grid component.
402
-
403
- #### radius
404
-
405
- Adjust the `border-radius` style for elements.
406
-
407
- #### size
408
-
409
- Adjust the size of an element. Includes styles that can be used at different breakpoints.
410
-
411
- This is commonly used with the Grid component, although, you can use it with any `block` or `inline-block` element.
412
-
413
- To set an element to be full width use:
414
-
415
- ````css
416
- .u-sizeFull
417
- ````
418
-
419
- or it's breakpoint versions:
420
-
421
- ````css
422
- .u-lg-sizeFull
423
- .u-md-sizeFull
424
- .u-sm-sizeFull
425
- .u-xs-sizeFull
426
- ````
427
-
428
- #### typography
429
-
430
- - Set the `text-transform` style for elements
431
- - Set the `text-align` style for elements (includes styles that can be used at different breakpoints)
432
- - Set the `font-weight` style for elements
433
- - Set the font size and line height styles with different pre-defined utility classes
434
- - Other miscellaneous text styles like kerning, word wrapping and truncating
435
-
436
- ## Setting up a new website
437
-
438
- First navigate via the command line to the folder where the new site will be located.
439
- Clone the Cacao directory to a folder with the website name. (Replace "WEBSITE_NAME" with the folder name for your website)
440
-
441
- `git clone https://github.com/aptuitiv/cacao.git WEBSITE_NAME`
442
-
443
- Move into the website directory
444
-
445
- `cd WEBSITE_NAME`
446
-
447
- Rename the Cacao remote from "origin" to "cacao"
448
-
449
- `git remote rename origin cacao`
450
-
451
- Add the the remote repository for the actual website. In this case we're using BitBucket. Replace "YOUR-USERNAME" with your BitBucket username
452
-
453
- `git remote add origin https://YOUR-USERNAME@bitbucket.org/YOUR-ACCOUNT/YOUR-WEBSITE-REPOSITORY.git`
454
-
455
- Confirm that the remotes are set up correctly.
456
-
457
- `git remote -v`
458
-
459
- That should show you something like this:
460
-
461
- ```css
462
- cacao https://github.com/aptuitiv/cacao.git (fetch)
463
- cacao https://github.com/aptuitiv/cacao.git (push)
464
- origin https://YOUR-USERNAME@bitbucket.org/YOUR-ACCOUNT/YOUR-WEBSITE-REPOSITORY.git (fetch)
465
- origin https://OUR-USERNAME@bitbucket.org/YOUR-ACCOUNT/YOUR-WEBSITE-REPOSITORY.git (push)
7
+ ```bash
8
+ npm install cacao-css@4
466
9
  ```
467
10
 
468
- Push to the website repository if the repository is brand new. If the repository contains commits already don't push.
469
-
470
- `git push -u origin master`
471
-
472
- ### Issues merging unrelated histories
11
+ Add a copy of [imports.css](imports.css) to your project. This file allows you to configure what modules are included in your final project. This helps to keep the CSS lean and the performance high. The relative imports are expecting to be placed under "my-project/src/css/main.css". You may need to adjust the imports if using a different folder structure.
473
12
 
474
- If having trying to merge cacao into an existing repository and GIT is saying that it won't merge unrelated histories then follow these steps.
13
+ Using the default imports, you get access to aspect ratios (used for embedded iframes), embeds, images, gutters, displays, margins, paddings, and a basic grid. You can uncomment out import lines to include specific modules. Responsive classes are not added by default and must be added by uncommenting an import for the responsive viewport.
475
14
 
476
- 1) Check out cacao/master as cacao-master
477
- 2) Check out origin/master as master. At this point you should currently have origin/master checked out.
478
- 3) On the command line run `git merge cacao-master --allow-unrelated-histories` You will be prompted to enter a commit message. Do so and then `Esc w q` to write and close the message.
479
- 4) You can then push the merged changes to master.
15
+ ## Customization
480
16
 
481
- See <https://stackoverflow.com/questions/38255655/trying-to-pull-files-from-my-github-repository-refusing-to-merge-unrelated-his> for more info.
17
+ You can customize Cacao simply by overriding a class. You can also override the breakpoints by creating your own `@custom-media` directives as found in [config.css](src/config.css).