More a question than an issue: In the framework, is there a way to vertically align say an image within a div? I can't find anything....

When the new style.css file is created using gulp, the time modified stamp remains untouched.

Ideally we would use this to version the css file but this is not possible without an updated date stamp.

Is this something that can be fixed in gulpfile.js?

Not sure if Im missing something, but there seems no global control for font-weights. This would be great if it could be added.

Thanks.

https://codyhouse.co/ds/components/app/video-bg

Responsive Video Background doesn't play on iPhone.

I have tested on iPhone 6 plus, iOS 12.3.1
Safari, Chrome, Firefox.

It seems like it needs additional initialization via javascript.

How to reproduce?

In index.html

• add the link tag <link rel="stylesheet" href="assets/css/style-fallback.css"> and comment the block condition which checks the CSS custom variables support.
• add a simple grid markup (e.g. taken from https://codepen.io/codyhouse/pen/orvKEq) and relative CSS styles.

<div class="parent grid grid-gap-xs">
  <div class="col-1"></div>
  <div class="col-1"></div>
  ...
</div>

What I expect?

After running the dev server (npm run gulp watch) the gird system should be identical to that one which supports CSS variables.

But I found out that there are some problems:

• [class*="grid-gap"] margins are not applied. Apparently calc() it's not able to generate the correct output when a variable in this case var(--grid-gap) has also a fallback value (1em).

• .grid-gap-{size} will not change the margins of the grid items and also the [class*="grid-gap"] will not benefit the changes of the var(--grid-gap) from the modifiers.

style.css vs style-fallback.css outputs

style-fallback.css

When selecting .grid.grid-gap-xs element.

.grid-gap-{size} modifiers are not event generated as class.

style.css (supports CSS variables)

When selecting .grid.grid-gap-xs element.

As we can see here the var(--grid-gap) it's taken in consideration which reevaluates the size of the gap for the elements which are using it.

Can you publish the source on npmjs for command line installs?

--line-height-multiplier and --text-vspace-multiplier is undefined

Hi there, I'm trying to get https://codyhouse.co/gem/vertical-timeline/ working, but it depends on codyhouse-framework.

I'm using webpack and added this to my application.js:

require("codyhouse-framework/main/assets/js/util")
require("vertical-timeline/assets/js/main")
require("vertical-timeline/assets/css/style.scss")

When I run webpack, I get:

ERROR in ./node_modules/vertical-timeline/assets/css/style.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./node_modules/vertical-timeline/assets/css/style.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '../../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
^
      File to import not found or unreadable: ../../../../../codyhouse-framework/main/assets/css/style.scss.
      in /Users/hackeron/Dropbox/Development/timeline2/node_modules/vertical-timeline/assets/css/style.scss (line 1, column 1)
 @ ./node_modules/vertical-timeline/assets/css/style.scss 2:14-173
 @ ./app/javascript/packs/application.js

How do I import the framework in WebPack?

The grid class applies padding which gives a weird result. I don't know the notion behind it. Check it out in the image below.
<div class='grid'>

Computed Result

padding : var(--space-md) 0 0 var(--space-md);

*padding-top: var(--space-md);
*padding-right: 0;
*padding-bottom: 0;
*padding-left: var(--space-md);

What's the reason behind the 0 0 on the right and bottom ?

Can I push or pull columns like in other frameworks?
Lets say I want to push a 6 col from 3 columns from the left.

In Bootstrap I would use col-md-offset-3

<div class="container max-width-adaptive-lg">
  <div class="grid grid-gap-lg">
    <div class="col-6@md">
      <p>Row 1 column</p>
    </div>
  </div>
</div>

Feature v4 Component - There is a random close tag without an opening. This is creating an HTML error - see the screenshot below.

Hi,

Can you tell me how i can override the $breakpoints sass map. There is no way for me now to change the breakpoints and have the grid also use the newly updated $breakpoints i have defined.

So for example: If i wish to change the xl breakpoint to let's say 120rem (~1920px). I cannot do so in a way that the grid classes also use this new breakpoint. .col-6@xl will still become a col-6 on 90rem, not on 120rem.

Hi Codyhouse-Team,

it would be nice, if you could at a helper class for bold text.
Actually there are only helpers fort text-subtle, text-inherit. But if i want a headline or a span to be bold i only can use the "strong"-tag or make a individual class for them.
I dont want to use the strong tag for bold text, because it is sometimes rendered different in browsers.
So a standard helper class for bold text would be nice.

is the info feedback colors missing?
the currently the there are:

• error
• warning
• sucess

it feels like the info blue is missing.

When it comes to keyboard access, the mobile menu of the main header should probably include trapping (like the Dialog component). Meaning, when it's toggled open, tabbing through will recycle back to the MENU button instead of tabbing to the main content which lays underneath, and no longer accessible.

https://codyhouse.co/ds/components/app/main-header

I'm trying hard to install the necessary packages but when I run "npm install" inside the codyhouse-framework directory it gives me a bunch of errors and because of this I also can't run "npm run gulp watch".
I have reinstall the nodejs and check that npm is working fine but it don't work in the framework directory.

Following CMD lines:

E:\CodyHouse\node_modules\codyhouse-framework>npm install
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno ENOENT
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://github.com/CodyHouse/postcss-css-variables.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\aqibc\AppData\Roaming\npm-cache_logs\2019-10-09T07_47_28_158Z-debug.log

Kindly help me out of this!!

I came across this error a number of times, in compiling scss used in samples here.　However I checked the details of scss files, couldn't find its definition.Do you have?

Hi guys,
is there any list of supported browsers?

Thank you all.

on https://codyhouse.co/ds/components/app/tabbed-navigation-v2 the tabs are all pointing to #0 and thus don't open.

Hey there!

I'm just evaluating your framework in combination with IE11. I think there is an issue with CSS properties when they are overwritten in media queries. You can test it easily with the button component of how it looks like in Chrome and in IE11. For example the button have different padding values.

The padding-top property has the variable --btn-padding-y which is related to --space-xs.
--space-xs is calculated like that calc(0.5 * var(--space-unit));

The --space-unit variable is changed by media query @include breakpoint(md) { --space-unit: 1.25em; }

The modified postcss plugin for the fallback seems to have some troubles to calculate and find all relations?

Thx for helping.

I would like to go back to the stylesheet being built using Sass partials instead of everything existing within _base.scss or, at the very least, put mixins in a partial of their own. My stylesheet uses the new Sass module system, so one of my partials would use @use instead of @import. For example:

@use '~codyhouse-framework/main/assets/css/base/breakpoints';

.some-class {
	@include breakpoints.breakpoint(md) {
		//
	}
}

With the change introduced in v2.7, these partials no longer exist, forcing me to use @import globally again, which will eventually be removed altogether, per the Sass blog post.

when I build a style with sacss command I got this in grid system only.

For some reason, when I visit https://codyhouse.co/ds/components/app/floating-label, the component doesn't work. It was working earlier on. All browsers are having the issue. (Mac, Mojave)

I updated my codyhouse project to V2.0.0 and i dont get the breakpoint classes to work. Probably this was allready not working in V1.2.0 but here for example the class names were different, so i didn't noticed this.

For example this one: "display@xl" or this "hide@xl".
It is a strange problem, because no styles seems to defined here. But when i have a look in my style.css file, the styles are there.
I have this in my styles.css file:
@media (min-width: 90rem) { .hide\@xl { display: none !important; } }

I dont know why this is not working. Seems this "@" gets erased, because if i try "hidexl" it is working.

Regards
Sven

There seems to be a bug for the Input Merge component in Firefox. The text boxes stack by default. Please see the screenshot below. The component works fine in Chrome and Safari.

First of all congrats for your awesome work!

I found a lot of useful components, and very nice that is all custom built with vanilla JS.

I would like to see some example of layouts, like bootstrap has. Example admin layout with sidebar, etc. Something like:

https://getbootstrap.com/docs/4.3/examples/

Hi!

I like your framework very much! What is the reason you "simplified the framework structure" in commit 56de758#diff-ae4dce3eb5dc858397675ab1bee2ab49?

Now it is much harder to include only parts of your framework, for example the mixins.

Hi, thank you for a great product!
In many components with a dropdown list, the menu does not close when the link is clicked.
For example,

1. https://codyhouse.co/ds/components/app/mega-site-navigation click on Documentation
2. https://codyhouse.co/ds/components/app/language-picker click on any option (closing in the demo, not in the copied code)
3. https://codyhouse.co/ds/components/app/adaptive-navigation click on an option in the dropdown
4. https://codyhouse.co/ds/components/app/menu click on the dropdown option

It doesn't seem very convenient, can you add a default closure? Thanks!

The last three links in the Design System page are pointing to text-divider (when you click on the text), clicking on the image works fine.

Hi,

I have updated the code framework to [email protected] gulp
as i am having this strange issue where on all browsers even after flushing cache, and with no gulp sass or scripts errors, certain components i add to an existing projects on refresh show correctly then upon refreshing again it doesnt show correctly.

For example in this page i am using masonry gallery and see what happens:
Video here: https://drive.google.com/file/d/1D7x2njlYrNlLptT3xpBiPehPVN_ySoJl/view?usp=sharing

Another example when refreshing the page on the mega-site-navigation
When refreshing it switches between mobile version and dekstop
Video Here: https://drive.google.com/file/d/16WMUGyVinhw3JT7f2ox9cH9q2C906woK/view?usp=sharing

its strange as there is no issues with other components

Hi, everything was working fine, then suddenly Gulp gives me a error, I don't know why.

I've tried everything, cache deletion, node_modules and package-lock.json deletion, even uninstalling Node completely, and I still get the same error when running 'npm run gulp watch':

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gulp: `gulp "watch"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gulp script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Usuario\AppData\Roaming\npm-cache\_logs\2020-05-20T14_22_32_342Z-debug.log

Content of the log

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'gulp',
1 verbose cli   'watch'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pregulp', 'gulp', 'postgulp' ]
5 info lifecycle [email protected]~pregulp: [email protected]
6 info lifecycle [email protected]~gulp: [email protected]
7 verbose lifecycle [email protected]~gulp: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~gulp: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;E:\Google Drive\Mis webs\Proyectocarta\node_modules\.bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\Usuario\bin;C:\PROGRAM FILES (X86)\COMMON FILES\ORACLE\JAVA\JAVAPATH;C:\RUBY24-X64\BIN;C:\RUBY25-X64\BIN;C:\PROGRAM FILES\COMMON FILES\MICROSOFT SHARED\WINDOWS LIVE;C:\PROGRAM FILES (X86)\COMMON FILES\MICROSOFT SHARED\WINDOWS LIVE;C:\PROGRAM FILES (X86)\NVIDIA CORPORATION\PHYSX\COMMON;C:\Windows\SYSTEM32;C:\Windows;C:\Windows\SYSTEM32\WBEM;C:\Windows\SYSTEM32\WINDOWSPOWERSHELL\V1.0;C:\PROGRAM FILES\CALIBRE2;C:\PROGRAM FILES (X86)\ATI TECHNOLOGIES\ATI.ACE\CORE-STATIC;C:\PROGRAM FILES (X86)\WINDOWS LIVE\SHARED;C:\XAMPP\PHP;C:\PROGRAMDATA\COMPOSERSETUP\BIN;C:\PROGRAM FILES\GIT\CMD;C:\Program Files\ASUS\Bluetooth Software;C:\Program Files\ASUS\Bluetooth Software\syswow64;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Users\Usuario\AppData\Local\nylas\bin;C:\Users\Usuario\AppData\Roaming\Composer\vendor\bin;C:\Users\Usuario\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Usuario\AppData\Roaming\npm
9 verbose lifecycle [email protected]~gulp: CWD: E:\Google Drive\Mis webs\Proyectocarta
10 silly lifecycle [email protected]~gulp: Args: [ '/d /s /c', 'gulp "watch"' ]
11 silly lifecycle [email protected]~gulp: Returned: code: 1  signal: null
12 info lifecycle [email protected]~gulp: Failed to exec gulp script
13 verbose stack Error: [email protected] gulp: `gulp "watch"`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:310:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:310:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd E:\Google Drive\Mis webs\Proyectocarta
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "gulp" "watch"
18 verbose node v12.16.3
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] gulp: `gulp "watch"`
22 error Exit status 1
23 error Failed at the [email protected] gulp script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Please, can you help me?

I have the strange problem in my compiled css, that there are duplicated blocks with the exact same css.

For example:

@supports (--css: variables) {
    @media (min-width: 64rem) {
      .main-footer__nav-item {
    margin-left: 1.5625em;
    margin-left: var(--space-md);
      }
    }
  }
@supports (--css: variables) {
    @media (min-width: 64rem) {
      .main-footer__nav-item {
    margin-left: 1.5625em;
    margin-left: var(--space-md);
      }
    }
  }

It seems there is a bug with the postcss-css-variables Plugin.
See here the issue: MadLittleMods/postcss-css-variables#67

Do you have a idea how to fix that?

Not sure if this is intentional or not, but you're missing the xs breakpoint (in _breakpoint.scss) which also means the following (at least) is also missing (from _grid_layout.scss)

@include breakpoint(xs) {
@for $i from 1 through $grid-columns {
.col--xs-#{$i} {
flex-basis: round-width($i);
max-width: round-width($i);
}
}
}

We have the use case scenario where we only want to show a single item in the carousel.

I've tried setting .carousel__list width to 100%, but when I reduce the width of the page, the image in the list item disappears.

What's the best way to show just a single large item in the carousel at one time?

I'm trying really hard to get this gulp thing working, but just can't seem to do it.

I think you'll have a better take up if this initial part of the set up is made a bit clearer.

• when I run 'npm run gulp watch' from the 'my_project/node_modules/codyhouse-framework' path,
  I get a whole bunch of errors, despite having followed the instructions on https://css-tricks.com/gulp-for-beginners/

have I run it from the wrong path maybe?

node --version
v10.15.0

gulp -v
[16:47:04] CLI version 2.0.1
[16:47:04] Local version 4.0.0

Hi,

I've looked through the docs at great length but I can't see how I would add letter-spacing to the typography, specifically, different spacing for each H1, H2, H3 and so on.

Is there a way to do this with the way the typography and responsive sizes work?

Thanks

Jon

I realise this is not a helpdesk as such, but I figure this working, will be of great benefit to everyone else using the framework...

I'm trying to get gulp watch working with js files, and it just seems to run the scripts task in an endless loop. The task should concatenate any js file in main/assets/js/**/*, create the scripts.js and then rename and minify.

instead it just loops and loops. Dependencies have been installed using: npm install gulp-concat gulp-rename gulp-uglify --save-dev as shown on https://codehangar.io/concatenate-and-minify-javascript-with-gulp/

What is wrong in here?

The initial build creates the js files just fine - it seems the "watch" command creates the loop;

Again, feel free to decline to answer, but i really do think it will be of great help to anyone else.

Thanks in advance.

gulpfile.js.zip

Hi there, I'm getting a flash of the unstyled page both on local dev and on a live site when using the Javascript css var detection. Basically the css clearly isn't loading quick enough.

If I bypass this and just call the style.css normally the issue disappears. Not a solution really though as I do need the fallback.

Anyone else experienced this or know how to stop the delay?

You can see this on the live site at: https://ligtas.co.uk/

It would be nice to have a way to download specific version of files.
You can publish each release on release tab :)

• I searched for nuxt in the issues section and did not find anything
• the documentation also covers only gulp webpack and manual install
• how do I install CodyHouse base in nuxt
• Would be awesome if you can add a section in the guide for the same
• Fantastic work team, cheers

I've been trying to install the necessary modules for the framework but my computer is running errors. I thought uninstalling everything then reinstalling the files would work but that obviously hasn't worked. I've been struggling with the screenshot below:

Open the Demo page with the timeline, with your browser narrowed down.
press "Next" button until timeline shifted fully to the left. No more items to the right.
Then drag the page wider, the "Next" button shifts right but the timeline doesn't. Pressing the "Next" button causes the timline to re-adjust to the wider view and look normal.

Hi,

Every time I use the addClass and removeClass util functions I keep getting an error in Chrome and Safari of:

Uncaught TypeError: Cannot read property 'classList' of undefined
    at t.value (kubix.js:8)
    at new t (kubix.js:8)
    at Module.<anonymous> (kubix.js:8)
    at e (kubix.js:1)
    at Object.<anonymous> (kubix.js:3)
    at e (kubix.js:1)
    at kubix.js:1
    at kubix.js:1
value @ kubix.js:8
t @ kubix.js:8
(anonymous) @ kubix.js:8
e @ kubix.js:1
(anonymous) @ kubix.js:3
e @ kubix.js:1
(anonymous) @ kubix.js:1
(anonymous) @ kubix.js:1
11:27:37.713 

I was wondering if I'm missing something with these functions or is it a bug? The functions seem to work when uncompiled but when compiling scripts the error occurs. I use Webpack 4.32.0 for compiling my JavaScript and Gulp for everything else. When compiled an error is like this:

t.classList ? t.classList.add(e[0]) : Util.hasClass(t, e[0]) || (t.className += " " + e[0]),

Any help would be great.

Thanks for taking the time to read my post.

I'm checking a build in IE 11 (face palm) and can see things like var(--color-primary-lighter) and auto-sized-grid not working.

I notice in auto-sized-grid the fallback is 3 - which I'm guessing will explain why the grids are showing at 33% width.

Is IE11 really that incompatible? Or is something else at play here?

I seem to be having a problem with gulp that I can't find an answer to after searching for more than an hour including the issue #6 that is closed.

1. I cloned the framework
2. I run npm install and wait for everything to complete
3. I run npm run gulp watch and the terminal just returns with no messages

Environment

Environment: OSX 10.15.2 (Catalina)
npm/npx --version : 6.13.6
node --version : v13.5.0
gulp --version : CLI version: 2.2.0, Local version: 4.0.2

Error
I tried just gulp watch and this shows the following error:

internal/fs/utils.js:229
    throw err;
    ^

Error: ENOENT: no such file or directory, scandir '**/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:886:3)
    at Object.getInstalledBinaries (**/node_modules/node-sass/lib/extensions.js:132:13)
    at foundBinariesList (**/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (**/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (**/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (**/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (**/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:1139:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1159:10)
    at Module.load (internal/modules/cjs/loader.js:988:32) {
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '**/node_modules/node-sass/vendor'

The ** in the path is just the path to where I am storing my test app

I checked and sure enough there is not a directory or file named vendor in the node-sass folder.

I purged my npm cache clean, updated all my global npm packages but nothing I do allows this to run.

Notes:
Simple clone of the framework. No files have been changed and only the npm command has been run to install all the packages

Question:
It seems that the error is in fsutils. But this package is not listed in the package.json so it must be a dependency

No matter what I try, the grid gap (margin between divs) doesn't work. I'm testing using the same structure as in the bottom example on https://codyhouse.co/ds/docs/globals/grid-layout

I'm using css from gulp.

Inner padding seems to work, but not margin. (actually, padding on the first div doesn't work, but others are ok)

Am I missing something here?

codyhouse framework is really great framework for static website ~

But it would be better combine with handlebars.js for html components.
For example, the header component can just write once and then use in multi pages.

Will you consider this plan？

Hi,

I realise that this might not be a direct issue with the latest update, it could be down to code I have written. Since the latest update, any styles I change are not injected into the browser and no browser reload occurs. Has anybody else had this issue? My gulp file code is pasted below. I can't see anything out of the ordinary.

Thanks in advance,
Jon

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var source = require('vinyl-source-stream');
var request = require('request');
var merge = require('merge2');
var buffer = require('gulp-buffer');
var browserSync = require('browser-sync').create();
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssvariables = require('postcss-css-variables');
var calc = require('postcss-calc');
var rename = require('gulp-rename');
var babel = require("gulp-babel");

// js file paths
var utilJsPath = 'main/assets/js'; // util.js path - you may need to update this if including the framework as external node module
var componentsJsPath = 'main/assets/js/components/*.js'; // component js files
var scriptsJsPath = '../web/assets/js'; //folder for final scripts.js/scripts.min.js files

// css file paths
var cssFolder = '../web/assets/css'; // folder for final style.css/style-custom-prop-fallbac.css files
var scssFilesPath = 'main/assets/css/**/*.scss'; // scss files to watch

function reload(done) {
browserSync.reload();
done();
}

// Copying the necessary framework files from node_modules to a specified folder in the dev folder for a new project
gulp.task('copy-framework', function() {
gulp.src([
'node_modules/codyhouse-framework/main/assets/css/**/.scss',
'node_modules/codyhouse-framework/main/assets/js/.js'
])
.pipe(gulp.dest('main/assets/new'));
return new Promise(function(resolve, reject) {
console.log("Codyhouse-framework updated files have been copied from node_modules to the dev folder");
resolve();
});
});

// Update the base style scss files if they have been updated in the git repository
gulp.task('update-base-styles', function() {
gulp.src('node_modules/codyhouse-framework/main/assets/css/base/*.scss')
.pipe(gulp.dest('main/assets/css/base'));
return new Promise(function(resolve, reject) {
console.log("Codyhouse-framework base styles have been updated from node_modules to the dev folder");
resolve();
});
});

// Update the base script util.js file if it has been updated in the git repository
gulp.task('update-base-scripts', function() {
gulp.src('node_modules/codyhouse-framework/main/assets/js/util.js')
.pipe(gulp.dest('main/assets/js'));
return new Promise(function(resolve, reject) {
console.log("Codyhouse-framework base scripts have been updated from node_modules to the dev folder");
resolve();
});
});

// Generating and serving a minified css file to the web directory
gulp.task('sass', function() {
return gulp.src(scssFilesPath)
.pipe(sassGlob())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(cssFolder))
.pipe(browserSync.reload({
stream: true
}))
.pipe(rename('style-fallback.css'))
.pipe(postcss([cssvariables(), calc()]))
.pipe(gulp.dest(cssFolder));
});

// Generating and serving a minified javascript file to the web directory
gulp.task('scripts', function() {
var jquery = request('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js').pipe(source('jquery.js'));
var mainPlugins = gulp.src([
'node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js',
'node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js',
'node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js',
'node_modules/gsap/src/minified/TweenMax.min.js',
'main/assets/js/util.js',
'main/assets/js/components/midnight.jquery.min.js',
// 'main/assets/js/components/smooth-scroll.js',
'main/assets/js/components/navigation.js',
'main/assets/js/components/homepage.js'
]);
return merge(jquery, mainPlugins)
.pipe(buffer())
.pipe(babel())
.pipe(concat('scripts.js'))
.pipe(gulp.dest(scriptsJsPath))
.pipe(browserSync.reload({
stream: true
}))
.pipe(rename('scripts.min.js'))
// .pipe(uglify())
.pipe(gulp.dest(scriptsJsPath))
.pipe(browserSync.reload({
stream: true
}));
});

// Change these credentials to match the host in MAMP Pro
gulp.task('browserSync', gulp.series(function (done) {
browserSync.init({
proxy: "http://jonquayle.dev",
host: 'jonquayle.dev',
open: 'external',
reloadOnRestart: true
})
done();
}));

gulp.task('watch', gulp.series(['browserSync', 'sass', 'scripts'], function () {
gulp.watch('main/assets/css//*.scss', gulp.series(['sass']));
gulp.watch('../templates//.twig', gulp.series(reload));
gulp.watch('main/assets/js/**/.js', gulp.series(reload));
gulp.watch(componentsJsPath, gulp.series(['scripts']));
}));

Local variables under element mouse events are not available

scss file code

.ex-link {
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); // fix iOS 12 bug
  box-shadow: 0 0 0 3px var(--color-shadow-1);

  &:hover {
    --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); // fix iOS 12 bug
    box-shadow: 0 0 0 3px var(--color-shadow-2);
  }
}

Compile

.ex-link {
  --color-shadow-1: hsla(220, 90%, 56%, 0.2);
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-1);
}

no events, that's work!

.ex-link:hover {
  --color-shadow-2: hsla(355, 90%, 61%, 0.2);
  --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
  box-shadow: undefined;
  box-shadow: 0 0 0 3px var(--color-shadow-2);
}

.ex-link:hover:hover {
  box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-2);
}

.form-control:focus {
  outline: none;
  border-color: hsl(220, 90%, 56%);
  border-color: var(--color-primary);
  --color-shadow: hsla(220, 90%, 56%, 0.2);
  --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  box-shadow: undefined;
  box-shadow: 0 0 0 3px var(--color-shadow);
}

.form-control:focus:focus {
  box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow);
}

Just the problem after the code is compiled, the browser display is normal (including IE9)

fix

.ex-link {
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); // fix iOS 12 bug
  box-shadow: 0 0 0 3px var(--color-shadow-1);
  --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); // fix iOS 12 bug

  &:hover {
    box-shadow: 0 0 0 3px var(--color-shadow-2);
  }
}

.ex-link {
  --color-shadow-1: hsla(220, 90%, 56%, 0.2);
  --color-shadow-1: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);
  box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-1);
  --color-shadow-2: hsla(355, 90%, 61%, 0.2);
  --color-shadow-2: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);
}

.ex-link:hover {
  box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2);
  box-shadow: 0 0 0 3px var(--color-shadow-2);
}

Hey guys, thanks for the great library.

How do you build and document the actual site, e.g. https://codyhouse.co/ds/components describing and documenting the design system? Is it open source or you're using something custom? I assume you manage components in some kind of templating language?

Hopefully it makes sense. Thanks in advance.