main.scss 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. /**
  2. * This file is the main entry point for a single page's stylings. It should
  3. * be self-contained CSS for *one* page. There is another SCSS file for
  4. * styling a *book* that depends on this one.
  5. *
  6. * It uses the Inuit CSS framework: https://github.com/inuitcss/inuitcss
  7. *
  8. * InuitCSS only provides basic typographic stylings and helper functions. All
  9. * framework files live in ./inuitcss/ . All of our custom CSS lives in one of
  10. * these 7 folders:
  11. *
  12. * `/settings`: Global variables, site-wide settings, config switches, etc.
  13. * `/tools`: Site-wide mixins and functions.
  14. * `/generic`: Low-specificity, far-reaching rulesets (e.g. resets).
  15. * `/elements`: Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
  16. * `/objects`: Objects, abstractions, and design patterns (e.g. `.o-layout {}`).
  17. * `/components`: Discrete, complete chunks of UI (e.g. `.c-carousel {}`).
  18. * `/utilities`: High-specificity, very explicit selectors. Overrides and
  19. helper classes (e.g. `.u-hidden {}`).
  20. *
  21. * CONTENTS
  22. *
  23. * SETTINGS
  24. * Core.................inuitcss’ core and setup settings.
  25. * Global...............Project-wide variables and settings.
  26. *
  27. * TOOLS
  28. * Font-size............A mixin which guarantees baseline-friendly line-heights.
  29. * Clearfix.............Micro clearfix mixin.
  30. * Hidden...............Mixin for hiding elements.
  31. * Sass MQ..............inuitcss’ default media query manager.
  32. *
  33. * GENERIC
  34. * Box-sizing...........Better default `box-sizing`.
  35. * Normalize.css........A level playing field using @necolas’ Normalize.css.
  36. * Reset................A tiny reset to complement Normalize.css.
  37. * Shared...............Sensibly and tersely share some global commonalities
  38. * (particularly useful when managing vertical rhythm).
  39. *
  40. * ELEMENTS
  41. * Page.................Set up our document’s default `font-size` and
  42. * `line-height`.
  43. * Headings.............Very minimal (i.e. only font-size information) for
  44. * headings 1 through 6.
  45. * Images...............Base image styles.
  46. * Tables...............Simple table styles.
  47. *
  48. * OBJECTS
  49. * Wrapper..............Page constraint object.
  50. *
  51. * COMPONENTS
  52. * Buttons..............An example button component, and how it fits into the
  53. * inuitcss framework.
  54. *
  55. * UTILITIES
  56. * Clearfix.............Bind our clearfix onto a utility class.
  57. */
  58. // SETTINGS
  59. @import 'inuitcss/settings/settings.core';
  60. @import 'settings/settings.global';
  61. // // TOOLS
  62. @import 'inuitcss/tools/tools.font-size';
  63. @import 'inuitcss/tools/tools.clearfix';
  64. @import 'inuitcss/tools/tools.hidden';
  65. @import 'inuitcss/tools/tools.mq';
  66. // // GENERIC
  67. @import 'inuitcss/generic/generic.box-sizing';
  68. @import 'inuitcss/generic/generic.normalize';
  69. @import 'inuitcss/generic/generic.reset';
  70. @import 'inuitcss/generic/generic.shared';
  71. @import 'generic/generic.phone-scrolling';
  72. // // ELEMENTS
  73. @import 'inuitcss/elements/elements.page';
  74. @import 'inuitcss/elements/elements.headings';
  75. @import 'inuitcss/elements/elements.images';
  76. @import 'inuitcss/elements/elements.tables';
  77. @import 'elements/elements.variables';
  78. @import 'elements/elements.typography';
  79. @import 'elements/elements.syntax-highlighting';
  80. @import 'elements/elements.tables';
  81. @import 'elements/elements.links';
  82. // // OBJECTS
  83. @import 'inuitcss/objects/objects.wrapper';
  84. @import 'inuitcss/objects/objects.layout';
  85. @import 'objects/objects.tooltip';
  86. @import 'objects/objects.copy-button';
  87. // // COMPONENTS
  88. @import 'components/components.page';
  89. @import 'components/components.sidebar-right';
  90. @import 'components/components.hidecells';
  91. // // UTILITIES
  92. @import 'inuitcss/utilities/utilities.clearfix';
  93. @import 'inuitcss/utilities/utilities.hide';
  94. @import 'inuitcss/utilities/utilities.spacings';