├── .gitignore
├── README.md
├── package.json
├── src
    ├── js
    │   ├── foundation.js
    │   └── site.js
    └── scss
    │   ├── _foundation.scss
    │   ├── _settings.scss
    │   └── main.scss
├── templates
    ├── .gitkeep
    ├── index.twig
    └── layouts
    │   └── app.twig
└── webpack.mix.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /.env
2 | /.idea
3 | .DS_Store
4 | .idea
5 | *.iml
6 | out
7 | gen
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Webpack build process for Craft CMS
 2 | ## Using Laravel Mix & Foundation
 3 | 
 4 | ---
 5 |  
 6 | 
 7 | ### Step 1 - Install / Setup Craft CMS (like normal)
 8 | * **Install Craft CMS**
 9 |   * Run `composer create-project craftcms/craft <PROJECT_NAME>`
10 |   
11 | 
12 | * **Setup Craft CMS**
13 |   * Once composer has installed the project `cd <PROJECT_NAME>`
14 |   * Create a new database in your local environment **before** running `./craft setup`
15 |   * Run `./craft setup` and follow the prompts.
16 |   
17 | This step is a normal **Craft CMS** install / setup. For more detailed instructions or if your having problems, refer to there docs: 
18 | 
19 | <a href="https://docs.craftcms.com/v3" target="_blank">Craft CMS 3 Docs</a>
20 | 
21 | ---
22 | 
23 | ### Step 2 - Download this repo
24 | * [**Download this Repo**](https://github.com/SpeakInCode/craftcms-webpack-foundation/archive/master.zip)
25 |   * We're going to [**download the zip**](https://github.com/SpeakInCode/craftcms-webpack-foundation/archive/master.zip) of this repo rather than `clone` it because we're going to move it into the existing **Craft CMS** project folder we just created.
26 |   * After downloading this repo extract it and move the folder's contents into the **Craft CMS** project that you just created. It will ask you if you want to override the existing `templates` directory, answer yes to this.
27 |   
28 | ---
29 | 
30 | ### Step 3 - Install dependencies
31 | * From the root of your **Craft CMS** project, run `yarn` or if you don't have `yarn`, run `npm install`.
32 | * Now to compile run either `yarn run watch` or `npm run watch`
33 | 
34 | ---
35 | 
36 | ### Step 4 - BrowserSync
37 | * To have your code auto refresh in the browser on save, be sure to add `:3000` to your base URL when viewing the front-end of your site.
38 | 
39 | ---
40 | 
41 | ### Other Info
42 | 
43 | * `/templates` now contains a very basic `layouts/app.twig` and `index.twig` to start from.
44 | 
45 | * Your site's CSS/JS assets will be compiled to `/web/assets/dist/`
46 | 
47 | * Custom Javascript to be written in `/src/js/site.js`
48 | 
49 | * Custom SCSS to be written in `/src/scss/` use `main.scss` to import other `scss` files you create.
50 | 
51 |   
52 | 
53 | 
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 4 |     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
 5 |     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 6 |   },
 7 |   "dependencies": {
 8 |     "cross-env": "^5.2.0",
 9 |     "foundation-sites": "6.4.3",
10 |     "laravel-mix": "^4.0.14",
11 |     "motion-ui": "1.2.3"
12 |   },
13 |   "devDependencies": {
14 |     "browser-sync": "2.24.7",
15 |     "browser-sync-webpack-plugin": "^2.0.1",
16 |     "resolve-url-loader": "2.3.1",
17 |     "sass": "^1.17.0",
18 |     "sass-loader": "7.*",
19 |     "vue-template-compiler": "^2.6.6"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/js/foundation.js:
--------------------------------------------------------------------------------
  1 | import $ from 'jquery';
  2 | 
  3 | import { Foundation } from 'foundation-sites/js/foundation.core';
  4 | Foundation.addToJquery($);
  5 | 
  6 | // Add Foundation Utils to Foundation global namespace for backwards
  7 | // compatibility.
  8 | 
  9 | import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
 10 | Foundation.rtl = rtl;
 11 | Foundation.GetYoDigits = GetYoDigits;
 12 | Foundation.transitionend = transitionend;
 13 | 
 14 | import { Box } from 'foundation-sites/js/foundation.util.box'
 15 | import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
 16 | import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
 17 | import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
 18 | import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
 19 | import { Nest } from 'foundation-sites/js/foundation.util.nest';
 20 | import { Timer } from 'foundation-sites/js/foundation.util.timer';
 21 | 
 22 | Foundation.Box = Box;
 23 | Foundation.onImagesLoaded = onImagesLoaded;
 24 | Foundation.Keyboard = Keyboard;
 25 | Foundation.MediaQuery = MediaQuery;
 26 | Foundation.Motion = Motion;
 27 | Foundation.Move = Move;
 28 | Foundation.Nest = Nest;
 29 | Foundation.Timer = Timer;
 30 | 
 31 | // Touch and Triggers previously were almost purely sede effect driven,
 32 | // so no // need to add it to Foundation, just init them.
 33 | 
 34 | import { Touch } from 'foundation-sites/js/foundation.util.touch';
 35 | Touch.init($);
 36 | 
 37 | import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
 38 | Triggers.init($, Foundation);
 39 | 
 40 | // import { Abide } from 'foundation-sites/js/foundation.abide';
 41 | // Foundation.plugin(Abide, 'Abide');
 42 | 
 43 | import { Accordion } from 'foundation-sites/js/foundation.accordion';
 44 | Foundation.plugin(Accordion, 'Accordion');
 45 | 
 46 | import { AccordionMenu } from 'foundation-sites/js/foundation.accordionMenu';
 47 | Foundation.plugin(AccordionMenu, 'AccordionMenu');
 48 | 
 49 | import { Drilldown } from 'foundation-sites/js/foundation.drilldown';
 50 | Foundation.plugin(Drilldown, 'Drilldown');
 51 | 
 52 | import { Dropdown } from 'foundation-sites/js/foundation.dropdown';
 53 | Foundation.plugin(Dropdown, 'Dropdown');
 54 | 
 55 | import { DropdownMenu } from 'foundation-sites/js/foundation.dropdownMenu';
 56 | Foundation.plugin(DropdownMenu, 'DropdownMenu');
 57 | 
 58 | import { Equalizer } from 'foundation-sites/js/foundation.equalizer';
 59 | Foundation.plugin(Equalizer, 'Equalizer');
 60 | 
 61 | // import { Interchange } from 'foundation-sites/js/foundation.interchange';
 62 | // Foundation.plugin(Interchange, 'Interchange');
 63 | 
 64 | // import { Magellan } from 'foundation-sites/js/foundation.magellan';
 65 | // Foundation.plugin(Magellan, 'Magellan');
 66 | 
 67 | // import { OffCanvas } from 'foundation-sites/js/foundation.offcanvas';
 68 | // Foundation.plugin(OffCanvas, 'OffCanvas');
 69 | 
 70 | // import { Orbit } from 'foundation-sites/js/foundation.orbit';
 71 | // Foundation.plugin(Orbit, 'Orbit');
 72 | 
 73 | import { ResponsiveMenu } from 'foundation-sites/js/foundation.responsiveMenu';
 74 | Foundation.plugin(ResponsiveMenu, 'ResponsiveMenu');
 75 | 
 76 | import { ResponsiveToggle } from 'foundation-sites/js/foundation.responsiveToggle';
 77 | Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
 78 | 
 79 | import { Reveal } from 'foundation-sites/js/foundation.reveal';
 80 | Foundation.plugin(Reveal, 'Reveal');
 81 | 
 82 | // import { Slider } from 'foundation-sites/js/foundation.slider';
 83 | // Foundation.plugin(Slider, 'Slider');
 84 | 
 85 | // import { SmoothScroll } from 'foundation-sites/js/foundation.smoothScroll';
 86 | // Foundation.plugin(SmoothScroll, 'SmoothScroll');
 87 | 
 88 | // import { Sticky } from 'foundation-sites/js/foundation.sticky';
 89 | // Foundation.plugin(Sticky, 'Sticky');
 90 | 
 91 | import { Tabs } from 'foundation-sites/js/foundation.tabs';
 92 | Foundation.plugin(Tabs, 'Tabs');
 93 | 
 94 | import { Toggler } from 'foundation-sites/js/foundation.toggler';
 95 | Foundation.plugin(Toggler, 'Toggler');
 96 | 
 97 | // import { Tooltip } from 'foundation-sites/js/foundation.tooltip';
 98 | // Foundation.plugin(Tooltip, 'Tooltip');
 99 | 
100 | import { ResponsiveAccordionTabs } from 'foundation-sites/js/foundation.responsiveAccordionTabs';
101 | Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
102 | 
103 | // Initialize Foundation components
104 | $(document).foundation()
105 | 


--------------------------------------------------------------------------------
/src/js/site.js:
--------------------------------------------------------------------------------
1 | import './foundation'
2 | 
3 | $(document).ready(function () {
4 | 
5 |   // Write JavaScript & jQuery here
6 | 
7 | })
8 | 


--------------------------------------------------------------------------------
/src/scss/_foundation.scss:
--------------------------------------------------------------------------------
 1 | @charset 'utf-8';
 2 | 
 3 | $global-flexbox: true;
 4 | $motion-ui-speeds: (
 5 |   default: 125ms,
 6 |   slow: 750ms,
 7 |   fast: 250ms,
 8 | ) !default;
 9 | 
10 | @import 'settings';
11 | @import 'node_modules/foundation-sites/scss/foundation';
12 | @import 'node_modules/motion-ui/src/motion-ui';
13 | 
14 | @include foundation-global-styles;
15 | @include foundation-flex-grid;
16 | @include foundation-typography;
17 | @include foundation-forms;
18 | @include foundation-button;
19 | @include foundation-accordion;
20 | @include foundation-accordion-menu;
21 | // @include foundation-badge;
22 | // @include foundation-breadcrumbs;
23 | @include foundation-button-group;
24 | @include foundation-callout;
25 | @include foundation-card;
26 | @include foundation-close-button;
27 | @include foundation-menu;
28 | @include foundation-menu-icon;
29 | // @include foundation-drilldown-menu;
30 | @include foundation-dropdown;
31 | @include foundation-dropdown-menu;
32 | @include foundation-responsive-embed;
33 | // @include foundation-label;
34 | // @include foundation-media-object;
35 | // @include foundation-off-canvas;
36 | // @include foundation-orbit;
37 | @include foundation-pagination;
38 | // @include foundation-progress-bar;
39 | // @include foundation-slider;
40 | // @include foundation-sticky;
41 | @include foundation-reveal;
42 | // @include foundation-switch;
43 | // @include foundation-table;
44 | @include foundation-tabs;
45 | // @include foundation-thumbnail;
46 | @include foundation-title-bar;
47 | // @include foundation-tooltip;
48 | @include foundation-top-bar;
49 | @include foundation-visibility-classes;
50 | @include foundation-flex-classes;
51 | 
52 | @include motion-ui-transitions;
53 | @include motion-ui-animations;
54 | 


--------------------------------------------------------------------------------
/src/scss/_settings.scss:
--------------------------------------------------------------------------------
  1 | //  Foundation for Sites Settings
  2 | //  -----------------------------
  3 | 
  4 | @import 'node_modules/foundation-sites/scss/util/util';
  5 | 
  6 | // 1. Global
  7 | // ---------
  8 | 
  9 | $global-font-size: 100%;
 10 | $global-width: rem-calc(1200);
 11 | $global-lineheight: 1.5;
 12 | $foundation-palette: (
 13 |   primary: #1779ba,
 14 |   secondary: #767676,
 15 |   success: #3adb76,
 16 |   warning: #ffae00,
 17 |   alert: #cc4b37,
 18 | );
 19 | $light-gray: #e6e6e6;
 20 | $medium-gray: #cacaca;
 21 | $dark-gray: #8a8a8a;
 22 | $black: #0a0a0a;
 23 | $white: #fefefe;
 24 | $body-background: $white;
 25 | $body-font-color: $black;
 26 | $body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 27 | $body-antialiased: true;
 28 | $global-margin: 1rem;
 29 | $global-padding: 1rem;
 30 | $global-position: 1rem;
 31 | $global-weight-normal: normal;
 32 | $global-weight-bold: bold;
 33 | $global-radius: 0;
 34 | $global-menu-padding: 0.7rem 1rem;
 35 | $global-menu-nested-margin: 1rem;
 36 | $global-text-direction: ltr;
 37 | $global-flexbox: true;
 38 | $global-prototype-breakpoints: false;
 39 | $global-button-cursor: auto;
 40 | $global-color-pick-contrast-tolerance: 0;
 41 | $print-transparent-backgrounds: true;
 42 | 
 43 | @include add-foundation-colors;
 44 | 
 45 | // 2. Breakpoints
 46 | // --------------
 47 | 
 48 | $breakpoints: (
 49 |   small: 0,
 50 |   medium: 640px,
 51 |   large: 1024px,
 52 |   xlarge: 1200px,
 53 |   xxlarge: 1440px,
 54 | );
 55 | $print-breakpoint: large;
 56 | $breakpoint-classes: (small medium large);
 57 | 
 58 | // 3. The Grid
 59 | // -----------
 60 | 
 61 | $grid-row-width: $global-width;
 62 | $grid-column-count: 12;
 63 | $grid-column-gutter: (
 64 |   small: 20px,
 65 |   medium: 30px,
 66 | );
 67 | $grid-column-align-edge: true;
 68 | $grid-column-alias: 'columns';
 69 | $block-grid-max: 8;
 70 | 
 71 | // 4. Base Typography
 72 | // ------------------
 73 | 
 74 | $header-font-family: $body-font-family;
 75 | $header-font-weight: $global-weight-normal;
 76 | $header-font-style: normal;
 77 | $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
 78 | $header-color: inherit;
 79 | $header-lineheight: 1.4;
 80 | $header-margin-bottom: 0.5rem;
 81 | $header-styles: (
 82 |   small: (
 83 |     'h1': ('font-size': 24),
 84 |     'h2': ('font-size': 20),
 85 |     'h3': ('font-size': 19),
 86 |     'h4': ('font-size': 18),
 87 |     'h5': ('font-size': 17),
 88 |     'h6': ('font-size': 16),
 89 |   ),
 90 |   medium: (
 91 |     'h1': ('font-size': 48),
 92 |     'h2': ('font-size': 40),
 93 |     'h3': ('font-size': 31),
 94 |     'h4': ('font-size': 25),
 95 |     'h5': ('font-size': 20),
 96 |     'h6': ('font-size': 16),
 97 |   ),
 98 | );
 99 | $header-text-rendering: optimizeLegibility;
100 | $small-font-size: 80%;
101 | $header-small-font-color: $medium-gray;
102 | $paragraph-lineheight: 1.6;
103 | $paragraph-margin-bottom: 1rem;
104 | $paragraph-text-rendering: optimizeLegibility;
105 | $code-color: $black;
106 | $code-font-family: $font-family-monospace;
107 | $code-font-weight: $global-weight-normal;
108 | $code-background: $light-gray;
109 | $code-border: 1px solid $medium-gray;
110 | $code-padding: rem-calc(2 5 1);
111 | $anchor-color: $primary-color;
112 | $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
113 | $anchor-text-decoration: none;
114 | $anchor-text-decoration-hover: none;
115 | $hr-width: $global-width;
116 | $hr-border: 1px solid $medium-gray;
117 | $hr-margin: rem-calc(20) auto;
118 | $list-lineheight: $paragraph-lineheight;
119 | $list-margin-bottom: $paragraph-margin-bottom;
120 | $list-style-type: disc;
121 | $list-style-position: outside;
122 | $list-side-margin: 1.25rem;
123 | $list-nested-side-margin: 1.25rem;
124 | $defnlist-margin-bottom: 1rem;
125 | $defnlist-term-weight: $global-weight-bold;
126 | $defnlist-term-margin-bottom: 0.3rem;
127 | $blockquote-color: $dark-gray;
128 | $blockquote-padding: rem-calc(9 20 0 19);
129 | $blockquote-border: 1px solid $medium-gray;
130 | $cite-font-size: rem-calc(13);
131 | $cite-color: $dark-gray;
132 | $cite-pseudo-content: '\2014 \0020';
133 | $keystroke-font: $font-family-monospace;
134 | $keystroke-color: $black;
135 | $keystroke-background: $light-gray;
136 | $keystroke-padding: rem-calc(2 4 0);
137 | $keystroke-radius: $global-radius;
138 | $abbr-underline: 1px dotted $black;
139 | 
140 | // 5. Typography Helpers
141 | // ---------------------
142 | 
143 | $lead-font-size: $global-font-size * 1.25;
144 | $lead-lineheight: 1.6;
145 | $subheader-lineheight: 1.4;
146 | $subheader-color: $dark-gray;
147 | $subheader-font-weight: $global-weight-normal;
148 | $subheader-margin-top: 0.2rem;
149 | $subheader-margin-bottom: 0.5rem;
150 | $stat-font-size: 2.5rem;
151 | 
152 | // 6. Abide
153 | // --------
154 | 
155 | $abide-inputs: true;
156 | $abide-labels: true;
157 | $input-background-invalid: get-color(alert);
158 | $form-label-color-invalid: get-color(alert);
159 | $input-error-color: get-color(alert);
160 | $input-error-font-size: rem-calc(12);
161 | $input-error-font-weight: $global-weight-bold;
162 | 
163 | // 7. Accordion
164 | // ------------
165 | 
166 | $accordion-background: $white;
167 | $accordion-plusminus: true;
168 | $accordion-title-font-size: rem-calc(12);
169 | $accordion-item-color: $primary-color;
170 | $accordion-item-background-hover: $light-gray;
171 | $accordion-item-padding: 1.25rem 1rem;
172 | $accordion-content-background: $white;
173 | $accordion-content-border: 1px solid $light-gray;
174 | $accordion-content-color: $body-font-color;
175 | $accordion-content-padding: 1rem;
176 | 
177 | // 8. Accordion Menu
178 | // -----------------
179 | 
180 | $accordionmenu-padding: $global-menu-padding;
181 | $accordionmenu-nested-margin: $global-menu-nested-margin;
182 | $accordionmenu-submenu-padding: $accordionmenu-padding;
183 | $accordionmenu-arrows: true;
184 | $accordionmenu-arrow-color: $primary-color;
185 | $accordionmenu-item-background: null;
186 | $accordionmenu-border: null;
187 | $accordionmenu-submenu-toggle-background: null;
188 | $accordion-submenu-toggle-border: $accordionmenu-border;
189 | $accordionmenu-submenu-toggle-width: 40px;
190 | $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width;
191 | $accordionmenu-arrow-size: 6px;
192 | 
193 | // 9. Badge
194 | // --------
195 | 
196 | $badge-background: $primary-color;
197 | $badge-color: $white;
198 | $badge-color-alt: $black;
199 | $badge-palette: $foundation-palette;
200 | $badge-padding: 0.3em;
201 | $badge-minwidth: 2.1em;
202 | $badge-font-size: 0.6rem;
203 | 
204 | // 10. Breadcrumbs
205 | // ---------------
206 | 
207 | $breadcrumbs-margin: 0 0 $global-margin 0;
208 | $breadcrumbs-item-font-size: rem-calc(11);
209 | $breadcrumbs-item-color: $primary-color;
210 | $breadcrumbs-item-color-current: $black;
211 | $breadcrumbs-item-color-disabled: $medium-gray;
212 | $breadcrumbs-item-margin: 0.75rem;
213 | $breadcrumbs-item-uppercase: true;
214 | $breadcrumbs-item-separator: true;
215 | $breadcrumbs-item-separator-item: '/';
216 | $breadcrumbs-item-separator-item-rtl: '\\';
217 | $breadcrumbs-item-separator-color: $medium-gray;
218 | 
219 | // 11. Button
220 | // ----------
221 | 
222 | $button-font-family: inherit;
223 | $button-padding: 0.85em 1em;
224 | $button-margin: 0 0 $global-margin 0;
225 | $button-fill: solid;
226 | $button-background: $primary-color;
227 | $button-background-hover: scale-color($button-background, $lightness: -15%);
228 | $button-color: $white;
229 | $button-color-alt: $black;
230 | $button-radius: $global-radius;
231 | $button-hollow-border-width: 1px;
232 | $button-sizes: (
233 |   tiny: 0.6rem,
234 |   small: 0.75rem,
235 |   default: 0.9rem,
236 |   large: 1.25rem,
237 | );
238 | $button-palette: $foundation-palette;
239 | $button-opacity-disabled: 0.25;
240 | $button-background-hover-lightness: -20%;
241 | $button-hollow-hover-lightness: -50%;
242 | $button-transition: background-color 0.25s ease-out, color 0.25s ease-out;
243 | 
244 | // 12. Button Group
245 | // ----------------
246 | 
247 | $buttongroup-margin: 1rem;
248 | $buttongroup-spacing: 1px;
249 | $buttongroup-child-selector: '.button';
250 | $buttongroup-expand-max: 6;
251 | $buttongroup-radius-on-each: true;
252 | 
253 | // 13. Callout
254 | // -----------
255 | 
256 | $callout-background: $white;
257 | $callout-background-fade: 85%;
258 | $callout-border: 1px solid rgba($black, 0.25);
259 | $callout-margin: 0 0 1rem 0;
260 | $callout-padding: 1rem;
261 | $callout-font-color: $body-font-color;
262 | $callout-font-color-alt: $body-background;
263 | $callout-radius: $global-radius;
264 | $callout-link-tint: 30%;
265 | 
266 | // 14. Card
267 | // --------
268 | 
269 | $card-background: $white;
270 | $card-font-color: $body-font-color;
271 | $card-divider-background: $light-gray;
272 | $card-border: 1px solid $light-gray;
273 | $card-shadow: none;
274 | $card-border-radius: $global-radius;
275 | $card-padding: $global-padding;
276 | $card-margin-bottom: $global-margin;
277 | 
278 | // 15. Close Button
279 | // ----------------
280 | 
281 | $closebutton-position: right top;
282 | $closebutton-offset-horizontal: (
283 |   small: 0.66rem,
284 |   medium: 1rem,
285 | );
286 | $closebutton-offset-vertical: (
287 |   small: 0.33em,
288 |   medium: 0.5rem,
289 | );
290 | $closebutton-size: (
291 |   small: 1.5em,
292 |   medium: 2em,
293 | );
294 | $closebutton-lineheight: 1;
295 | $closebutton-color: $dark-gray;
296 | $closebutton-color-hover: $black;
297 | 
298 | // 16. Drilldown
299 | // -------------
300 | 
301 | $drilldown-transition: transform 0.15s linear;
302 | $drilldown-arrows: true;
303 | $drilldown-padding: $global-menu-padding;
304 | $drilldown-nested-margin: 0;
305 | $drilldown-background: $white;
306 | $drilldown-submenu-padding: $drilldown-padding;
307 | $drilldown-submenu-background: $white;
308 | $drilldown-arrow-color: $primary-color;
309 | $drilldown-arrow-size: 6px;
310 | 
311 | // 17. Dropdown
312 | // ------------
313 | 
314 | $dropdown-padding: 1rem;
315 | $dropdown-background: $body-background;
316 | $dropdown-border: 1px solid $medium-gray;
317 | $dropdown-font-size: 1rem;
318 | $dropdown-width: 300px;
319 | $dropdown-radius: $global-radius;
320 | $dropdown-sizes: (
321 |   tiny: 100px,
322 |   small: 200px,
323 |   large: 400px,
324 | );
325 | 
326 | // 18. Dropdown Menu
327 | // -----------------
328 | 
329 | $dropdownmenu-arrows: true;
330 | $dropdownmenu-arrow-color: $anchor-color;
331 | $dropdownmenu-arrow-size: 6px;
332 | $dropdownmenu-arrow-padding: 1.5rem;
333 | $dropdownmenu-min-width: 200px;
334 | $dropdownmenu-background: $white;
335 | $dropdownmenu-submenu-background: $dropdownmenu-background;
336 | $dropdownmenu-padding: $global-menu-padding;
337 | $dropdownmenu-nested-margin: 0;
338 | $dropdownmenu-submenu-padding: $dropdownmenu-padding;
339 | $dropdownmenu-border: 1px solid $medium-gray;
340 | $dropdown-menu-item-color-active: get-color(primary);
341 | $dropdown-menu-item-background-active: transparent;
342 | 
343 | // 19. Flexbox Utilities
344 | // ---------------------
345 | 
346 | $flex-source-ordering-count: 6;
347 | $flexbox-responsive-breakpoints: true;
348 | 
349 | // 20. Forms
350 | // ---------
351 | 
352 | $fieldset-border: 1px solid $medium-gray;
353 | $fieldset-padding: rem-calc(20);
354 | $fieldset-margin: rem-calc(18 0);
355 | $legend-padding: rem-calc(0 3);
356 | $form-spacing: rem-calc(16);
357 | $helptext-color: $black;
358 | $helptext-font-size: rem-calc(13);
359 | $helptext-font-style: italic;
360 | $input-prefix-color: $black;
361 | $input-prefix-background: $light-gray;
362 | $input-prefix-border: 1px solid $medium-gray;
363 | $input-prefix-padding: 1rem;
364 | $form-label-color: $black;
365 | $form-label-font-size: rem-calc(14);
366 | $form-label-font-weight: $global-weight-normal;
367 | $form-label-line-height: 1.8;
368 | $select-background: $white;
369 | $select-triangle-color: $dark-gray;
370 | $select-radius: $global-radius;
371 | $input-color: $black;
372 | $input-placeholder-color: $medium-gray;
373 | $input-font-family: inherit;
374 | $input-font-size: rem-calc(16);
375 | $input-font-weight: $global-weight-normal;
376 | $input-line-height: $global-lineheight;
377 | $input-background: $white;
378 | $input-background-focus: $white;
379 | $input-background-disabled: $light-gray;
380 | $input-border: 1px solid $medium-gray;
381 | $input-border-focus: 1px solid $dark-gray;
382 | $input-padding: $form-spacing / 2;
383 | $input-shadow: inset 0 1px 2px rgba($black, 0.1);
384 | $input-shadow-focus: 0 0 5px $medium-gray;
385 | $input-cursor-disabled: not-allowed;
386 | $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
387 | $input-number-spinners: true;
388 | $input-radius: $global-radius;
389 | $form-button-radius: $global-radius;
390 | 
391 | // 21. Label
392 | // ---------
393 | 
394 | $label-background: $primary-color;
395 | $label-color: $white;
396 | $label-color-alt: $black;
397 | $label-palette: $foundation-palette;
398 | $label-font-size: 0.8rem;
399 | $label-padding: 0.33333rem 0.5rem;
400 | $label-radius: $global-radius;
401 | 
402 | // 22. Media Object
403 | // ----------------
404 | 
405 | $mediaobject-margin-bottom: $global-margin;
406 | $mediaobject-section-padding: $global-padding;
407 | $mediaobject-image-width-stacked: 100%;
408 | 
409 | // 23. Menu
410 | // --------
411 | 
412 | $menu-margin: 0;
413 | $menu-nested-margin: $global-menu-nested-margin;
414 | $menu-items-padding: $global-menu-padding;
415 | $menu-simple-margin: 1rem;
416 | $menu-item-color-active: $white;
417 | $menu-item-background-active: get-color(primary);
418 | $menu-icon-spacing: 0.25rem;
419 | $menu-item-background-hover: $light-gray;
420 | $menu-state-back-compat: true;
421 | $menu-centered-back-compat: true;
422 | $menu-icons-back-compat: true;
423 | 
424 | // 24. Meter
425 | // ---------
426 | 
427 | $meter-height: 1rem;
428 | $meter-radius: $global-radius;
429 | $meter-background: $medium-gray;
430 | $meter-fill-good: $success-color;
431 | $meter-fill-medium: $warning-color;
432 | $meter-fill-bad: $alert-color;
433 | 
434 | // 25. Off-canvas
435 | // --------------
436 | 
437 | $offcanvas-sizes: (
438 |   small: 250px,
439 | );
440 | $offcanvas-vertical-sizes: (
441 |   small: 250px,
442 | );
443 | $offcanvas-background: $light-gray;
444 | $offcanvas-shadow: 0 0 10px rgba($black, 0.7);
445 | $offcanvas-inner-shadow-size: 20px;
446 | $offcanvas-inner-shadow-color: rgba($black, 0.25);
447 | $offcanvas-overlay-zindex: 11;
448 | $offcanvas-push-zindex: 12;
449 | $offcanvas-overlap-zindex: 13;
450 | $offcanvas-reveal-zindex: 12;
451 | $offcanvas-transition-length: 0.5s;
452 | $offcanvas-transition-timing: ease;
453 | $offcanvas-fixed-reveal: true;
454 | $offcanvas-exit-background: rgba($white, 0.25);
455 | $maincontent-class: 'off-canvas-content';
456 | 
457 | // 26. Orbit
458 | // ---------
459 | 
460 | $orbit-bullet-background: $medium-gray;
461 | $orbit-bullet-background-active: $dark-gray;
462 | $orbit-bullet-diameter: 1.2rem;
463 | $orbit-bullet-margin: 0.1rem;
464 | $orbit-bullet-margin-top: 0.8rem;
465 | $orbit-bullet-margin-bottom: 0.8rem;
466 | $orbit-caption-background: rgba($black, 0.5);
467 | $orbit-caption-padding: 1rem;
468 | $orbit-control-background-hover: rgba($black, 0.5);
469 | $orbit-control-padding: 1rem;
470 | $orbit-control-zindex: 10;
471 | 
472 | // 27. Pagination
473 | // --------------
474 | 
475 | $pagination-font-size: rem-calc(14);
476 | $pagination-margin-bottom: $global-margin;
477 | $pagination-item-color: $black;
478 | $pagination-item-padding: rem-calc(3 10);
479 | $pagination-item-spacing: rem-calc(1);
480 | $pagination-radius: $global-radius;
481 | $pagination-item-background-hover: $light-gray;
482 | $pagination-item-background-current: $primary-color;
483 | $pagination-item-color-current: $white;
484 | $pagination-item-color-disabled: $medium-gray;
485 | $pagination-ellipsis-color: $black;
486 | $pagination-mobile-items: false;
487 | $pagination-mobile-current-item: false;
488 | $pagination-arrows: true;
489 | 
490 | // 28. Progress Bar
491 | // ----------------
492 | 
493 | $progress-height: 1rem;
494 | $progress-background: $medium-gray;
495 | $progress-margin-bottom: $global-margin;
496 | $progress-meter-background: $primary-color;
497 | $progress-radius: $global-radius;
498 | 
499 | // 29. Prototype Arrow
500 | // -------------------
501 | 
502 | $prototype-arrow-directions: (
503 |   down,
504 |   up,
505 |   right,
506 |   left
507 | );
508 | $prototype-arrow-size: 0.4375rem;
509 | $prototype-arrow-color: $black;
510 | 
511 | // 30. Prototype Border-Box
512 | // ------------------------
513 | 
514 | $prototype-border-box-breakpoints: $global-prototype-breakpoints;
515 | 
516 | // 31. Prototype Border-None
517 | // -------------------------
518 | 
519 | $prototype-border-none-breakpoints: $global-prototype-breakpoints;
520 | 
521 | // 32. Prototype Bordered
522 | // ----------------------
523 | 
524 | $prototype-bordered-breakpoints: $global-prototype-breakpoints;
525 | $prototype-border-width: rem-calc(1);
526 | $prototype-border-type: solid;
527 | $prototype-border-color: $medium-gray;
528 | 
529 | // 33. Prototype Display
530 | // ---------------------
531 | 
532 | $prototype-display-breakpoints: $global-prototype-breakpoints;
533 | $prototype-display: (
534 |   inline,
535 |   inline-block,
536 |   block,
537 |   table,
538 |   table-cell
539 | );
540 | 
541 | // 34. Prototype Font-Styling
542 | // --------------------------
543 | 
544 | $prototype-font-breakpoints: $global-prototype-breakpoints;
545 | $prototype-wide-letter-spacing: rem-calc(4);
546 | $prototype-font-normal: $global-weight-normal;
547 | $prototype-font-bold: $global-weight-bold;
548 | 
549 | // 35. Prototype List-Style-Type
550 | // -----------------------------
551 | 
552 | $prototype-list-breakpoints: $global-prototype-breakpoints;
553 | $prototype-style-type-unordered: (
554 |   disc,
555 |   circle,
556 |   square
557 | );
558 | $prototype-style-type-ordered: (
559 |   decimal,
560 |   lower-alpha,
561 |   lower-latin,
562 |   lower-roman,
563 |   upper-alpha,
564 |   upper-latin,
565 |   upper-roman
566 | );
567 | 
568 | // 36. Prototype Overflow
569 | // ----------------------
570 | 
571 | $prototype-overflow-breakpoints: $global-prototype-breakpoints;
572 | $prototype-overflow: (
573 |   visible,
574 |   hidden,
575 |   scroll
576 | );
577 | 
578 | // 37. Prototype Position
579 | // ----------------------
580 | 
581 | $prototype-position-breakpoints: $global-prototype-breakpoints;
582 | $prototype-position: (
583 |   static,
584 |   relative,
585 |   absolute,
586 |   fixed
587 | );
588 | $prototype-position-z-index: 975;
589 | 
590 | // 38. Prototype Rounded
591 | // ---------------------
592 | 
593 | $prototype-rounded-breakpoints: $global-prototype-breakpoints;
594 | $prototype-border-radius: rem-calc(3);
595 | 
596 | // 39. Prototype Separator
597 | // -----------------------
598 | 
599 | $prototype-separator-breakpoints: $global-prototype-breakpoints;
600 | $prototype-separator-align: center;
601 | $prototype-separator-height: rem-calc(2);
602 | $prototype-separator-width: 3rem;
603 | $prototype-separator-background: $primary-color;
604 | $prototype-separator-margin-top: $global-margin;
605 | 
606 | // 40. Prototype Shadow
607 | // --------------------
608 | 
609 | $prototype-shadow-breakpoints: $global-prototype-breakpoints;
610 | $prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),
611 | 0 2px 10px 0 rgba(0,0,0,.12);
612 | 
613 | // 41. Prototype Sizing
614 | // --------------------
615 | 
616 | $prototype-sizing-breakpoints: $global-prototype-breakpoints;
617 | $prototype-sizing: (
618 |   width,
619 |   height
620 | );
621 | $prototype-sizes: (
622 |   25: 25%,
623 |   50: 50%,
624 |   75: 75%,
625 |   100: 100%
626 | );
627 | 
628 | // 42. Prototype Spacing
629 | // ---------------------
630 | 
631 | $prototype-spacing-breakpoints: $global-prototype-breakpoints;
632 | $prototype-spacers-count: 3;
633 | 
634 | // 43. Prototype Text-Decoration
635 | // -----------------------------
636 | 
637 | $prototype-decoration-breakpoints: $global-prototype-breakpoints;
638 | $prototype-text-decoration: (
639 |   overline,
640 |   underline,
641 |   line-through,
642 | );
643 | 
644 | // 44. Prototype Text-Transformation
645 | // ---------------------------------
646 | 
647 | $prototype-transformation-breakpoints: $global-prototype-breakpoints;
648 | $prototype-text-transformation: (
649 |   lowercase,
650 |   uppercase,
651 |   capitalize
652 | );
653 | 
654 | // 45. Prototype Text-Utilities
655 | // ----------------------------
656 | 
657 | $prototype-utilities-breakpoints: $global-prototype-breakpoints;
658 | $prototype-text-overflow: ellipsis;
659 | 
660 | // 46. Responsive Embed
661 | // --------------------
662 | 
663 | $responsive-embed-margin-bottom: rem-calc(16);
664 | $responsive-embed-ratios: (
665 |   default: 4 by 3,
666 |   widescreen: 16 by 9,
667 | );
668 | 
669 | // 47. Reveal
670 | // ----------
671 | 
672 | $reveal-background: $white;
673 | $reveal-width: 600px;
674 | $reveal-max-width: $global-width;
675 | $reveal-padding: $global-padding;
676 | $reveal-border: 1px solid $medium-gray;
677 | $reveal-radius: $global-radius;
678 | $reveal-zindex: 1005;
679 | $reveal-overlay-background: rgba($black, 0.45);
680 | 
681 | // 48. Slider
682 | // ----------
683 | 
684 | $slider-width-vertical: 0.5rem;
685 | $slider-transition: all 0.2s ease-in-out;
686 | $slider-height: 0.5rem;
687 | $slider-background: $light-gray;
688 | $slider-fill-background: $medium-gray;
689 | $slider-handle-height: 1.4rem;
690 | $slider-handle-width: 1.4rem;
691 | $slider-handle-background: $primary-color;
692 | $slider-opacity-disabled: 0.25;
693 | $slider-radius: $global-radius;
694 | 
695 | // 49. Switch
696 | // ----------
697 | 
698 | $switch-background: $medium-gray;
699 | $switch-background-active: $primary-color;
700 | $switch-height: 2rem;
701 | $switch-height-tiny: 1.5rem;
702 | $switch-height-small: 1.75rem;
703 | $switch-height-large: 2.5rem;
704 | $switch-radius: $global-radius;
705 | $switch-margin: $global-margin;
706 | $switch-paddle-background: $white;
707 | $switch-paddle-offset: 0.25rem;
708 | $switch-paddle-radius: $global-radius;
709 | $switch-paddle-transition: all 0.25s ease-out;
710 | 
711 | // 50. Table
712 | // ---------
713 | 
714 | $table-background: $white;
715 | $table-color-scale: 5%;
716 | $table-border: 1px solid smart-scale($table-background, $table-color-scale);
717 | $table-padding: rem-calc(8 10 10);
718 | $table-hover-scale: 2%;
719 | $table-row-hover: darken($table-background, $table-hover-scale);
720 | $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
721 | $table-is-striped: true;
722 | $table-striped-background: smart-scale($table-background, $table-color-scale);
723 | $table-stripe: even;
724 | $table-head-background: smart-scale($table-background, $table-color-scale / 2);
725 | $table-head-row-hover: darken($table-head-background, $table-hover-scale);
726 | $table-foot-background: smart-scale($table-background, $table-color-scale);
727 | $table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
728 | $table-head-font-color: $body-font-color;
729 | $table-foot-font-color: $body-font-color;
730 | $show-header-for-stacked: false;
731 | $table-stack-breakpoint: medium;
732 | 
733 | // 51. Tabs
734 | // --------
735 | 
736 | $tab-margin: 0;
737 | $tab-background: $white;
738 | $tab-color: $primary-color;
739 | $tab-background-active: $light-gray;
740 | $tab-active-color: $primary-color;
741 | $tab-item-font-size: rem-calc(12);
742 | $tab-item-background-hover: $white;
743 | $tab-item-padding: 1.25rem 1.5rem;
744 | $tab-expand-max: 6;
745 | $tab-content-background: $white;
746 | $tab-content-border: $light-gray;
747 | $tab-content-color: $body-font-color;
748 | $tab-content-padding: 1rem;
749 | 
750 | // 52. Thumbnail
751 | // -------------
752 | 
753 | $thumbnail-border: solid 4px $white;
754 | $thumbnail-margin-bottom: $global-margin;
755 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
756 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
757 | $thumbnail-transition: box-shadow 200ms ease-out;
758 | $thumbnail-radius: $global-radius;
759 | 
760 | // 53. Title Bar
761 | // -------------
762 | 
763 | $titlebar-background: $black;
764 | $titlebar-color: $white;
765 | $titlebar-padding: 0.5rem;
766 | $titlebar-text-font-weight: bold;
767 | $titlebar-icon-color: $white;
768 | $titlebar-icon-color-hover: $medium-gray;
769 | $titlebar-icon-spacing: 0.25rem;
770 | 
771 | // 54. Tooltip
772 | // -----------
773 | 
774 | $has-tip-cursor: help;
775 | $has-tip-font-weight: $global-weight-bold;
776 | $has-tip-border-bottom: dotted 1px $dark-gray;
777 | $tooltip-background-color: $black;
778 | $tooltip-color: $white;
779 | $tooltip-padding: 0.75rem;
780 | $tooltip-max-width: 10rem;
781 | $tooltip-font-size: $small-font-size;
782 | $tooltip-pip-width: 0.75rem;
783 | $tooltip-pip-height: $tooltip-pip-width * 0.866;
784 | $tooltip-radius: $global-radius;
785 | 
786 | // 55. Top Bar
787 | // -----------
788 | 
789 | $topbar-padding: 0.5rem;
790 | $topbar-background: $light-gray;
791 | $topbar-submenu-background: $topbar-background;
792 | $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
793 | $topbar-input-width: 200px;
794 | $topbar-unstack-breakpoint: medium;
795 | 
796 | // 56. Xy Grid
797 | // -----------
798 | 
799 | $xy-grid: true;
800 | $grid-container: $global-width;
801 | $grid-columns: 12;
802 | $grid-margin-gutters: (
803 |   small: 20px,
804 |   medium: 30px
805 | );
806 | $grid-padding-gutters: $grid-margin-gutters;
807 | $grid-container-padding: $grid-padding-gutters;
808 | $grid-container-max: $global-width;
809 | $xy-block-grid-max: 8;
810 | 
811 | 


--------------------------------------------------------------------------------
/src/scss/main.scss:
--------------------------------------------------------------------------------
1 | @import 'foundation';
2 | 
3 | 


--------------------------------------------------------------------------------
/templates/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SpeakInCode/craftcms-webpack-foundation/f17cdad8327fac617c61cfe1226d6e31b36c6834/templates/.gitkeep


--------------------------------------------------------------------------------
/templates/index.twig:
--------------------------------------------------------------------------------
 1 | {% extends 'layouts/app' %}
 2 | 
 3 | {% block content %}
 4 | 
 5 |     <div class="row">
 6 |       <div class="small-12 columns">
 7 |           <h1>Index</h1>
 8 |       </div>
 9 |     </div>
10 | 
11 | {% endblock %}
12 | 


--------------------------------------------------------------------------------
/templates/layouts/app.twig:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html class="no-js" lang="{{ craft.app.language|slice(0,2) }}">
 3 | <head>
 4 | 
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="x-ua-compatible" content="ie=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 8 | 
 9 |     {# Inline / Critical CSS #}
10 |     {% if
11 |         block('inlineCss')|length or
12 |         block('criticalCss')|length and
13 |         not craft.config.devMode
14 |     %}
15 |         <style>
16 |             {% block criticalCss %}{% endblock %}
17 |             {% block inlineCss %}{% endblock %}
18 |         </style>
19 |     {% endif %}
20 | 
21 |     {# CSS #}
22 |     <link rel="stylesheet" href="/assets/dist/main.css">
23 | 
24 | </head>
25 | 
26 | <body>
27 | 
28 |     <main class="site" role="document">
29 |         {% block content %}{% endblock %}
30 |     </main>
31 | 
32 |     {# Javascript #}
33 |     <script src="/assets/dist/site.js"></script>
34 | 
35 |     {# Inline Javascript#}
36 |     {% block inlineJs %}{% endblock %}
37 | 
38 | </body>
39 | </html>
40 | 
41 | 
42 | 


--------------------------------------------------------------------------------
/webpack.mix.js:
--------------------------------------------------------------------------------
 1 | var mix = require('laravel-mix')
 2 | var webpack = require('webpack')
 3 | 
 4 | // Trigger Laravel Mix
 5 | mix
 6 | 
 7 | // Add jQuery globally
 8 | .webpackConfig({
 9 |   plugins: [
10 |     new webpack.ProvidePlugin({
11 |       $: 'jquery',
12 |       jQuery: 'jquery',
13 |       'window.jQuery': 'jquery'
14 |     })
15 |   ]
16 | })
17 | 
18 | // Suppress success messages
19 | .disableSuccessNotifications()
20 | 
21 | // Assets path
22 | .setPublicPath('web/assets/dist')
23 | 
24 | // Compile JavaScript
25 | .js('src/js/site.js', 'web/assets/dist/site.js')
26 | 
27 | // Compile Sass
28 | .sass('src/scss/main.scss', 'web/assets/dist/main.css')
29 | 
30 | // Add Sourcemaps
31 | .sourceMaps()
32 | 
33 | // BrowserSync config
34 | .browserSync({
35 |   proxy: 'http://craft.test',
36 |   host: 'http://craft.test',
37 |   notify: false,
38 |   open: false,
39 |   reloadOnRestart: true,
40 |   injectChanges: true,
41 |   files: [
42 |     './web/assets/dist/*', // watch css/js
43 |     './templates/**/*' // watch html/twig
44 |   ]
45 | })
46 | 


--------------------------------------------------------------------------------