James Peret's blog. Built with Jekyll and the Mikey theme.

_variables.scss 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. //
  2. // Variables
  3. // --------------------------------------------------
  4. //
  5. // Credit: Bootstrap 3
  6. //== Media queries breakpoints
  7. //
  8. //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
  9. // Extra small screen / phone
  10. //** Deprecated `$screen-xs` as of v3.0.1
  11. $screen-xs: 480px !default;
  12. //** Deprecated `$screen-xs-min` as of v3.2.0
  13. $screen-xs-min: $screen-xs !default;
  14. //** Deprecated `$screen-phone` as of v3.0.1
  15. $screen-phone: $screen-xs-min !default;
  16. // Small screen / tablet
  17. //** Deprecated `$screen-sm` as of v3.0.1
  18. $screen-sm: 768px !default;
  19. $screen-sm-min: $screen-sm !default;
  20. //** Deprecated `$screen-tablet` as of v3.0.1
  21. $screen-tablet: $screen-sm-min !default;
  22. // Medium screen / desktop
  23. //** Deprecated `$screen-md` as of v3.0.1
  24. $screen-md: 992px !default;
  25. $screen-md-min: $screen-md !default;
  26. //** Deprecated `$screen-desktop` as of v3.0.1
  27. $screen-desktop: $screen-md-min !default;
  28. // Large screen / wide desktop
  29. //** Deprecated `$screen-lg` as of v3.0.1
  30. $screen-lg: 1200px !default;
  31. $screen-lg-min: $screen-lg !default;
  32. //** Deprecated `$screen-lg-desktop` as of v3.0.1
  33. $screen-lg-desktop: $screen-lg-min !default;
  34. // So media queries don't overlap when required, provide a maximum
  35. $screen-xs-max: ($screen-sm-min - 1) !default;
  36. $screen-sm-max: ($screen-md-min - 1) !default;
  37. $screen-md-max: ($screen-lg-min - 1) !default;
  38. //== Grid system
  39. //
  40. //## Define your custom responsive grid.
  41. //** Number of columns in the grid.
  42. $grid-columns: 12 !default;
  43. //** Padding between columns. Gets divided in half for the left and right.
  44. $grid-gutter-width: 30px !default;
  45. // Navbar collapse
  46. //** Point at which the navbar becomes uncollapsed.
  47. $grid-float-breakpoint: $screen-sm-min !default;
  48. //** Point at which the navbar begins collapsing.
  49. $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
  50. //== Container sizes
  51. //
  52. //## Define the maximum width of `.container` for different screen sizes.
  53. // Small screen / tablet
  54. $container-tablet: ((720px + $grid-gutter-width)) !default;
  55. //** For `$screen-sm-min` and up.
  56. $container-sm: $container-tablet !default;
  57. // Medium screen / desktop
  58. $container-desktop: ((940px + $grid-gutter-width)) !default;
  59. //** For `$screen-md-min` and up.
  60. $container-md: $container-desktop !default;
  61. // Large screen / wide desktop
  62. $container-large-desktop: ((1140px + $grid-gutter-width)) !default;
  63. //** For `$screen-lg-min` and up.
  64. $container-lg: $container-large-desktop !default;