Brainstorm for v2.x

[lyquix-owner]

LESS/CSS

• Move most of the LESS files into library and copy them only when needed, define was is absolutely needed
• Do we want to change to SCSS?
• Separate each icon font css into its own file
• Add blk rules for 7-block
• Convert blk rules to flexbox (add back support for IE9 or find polyfill)
• Look into projects and bring over useful classes/rules to include in library

Javascript

• Remove unused functions or move them to separate file
• Move style-related functions into separate js file
• Remove equalheightrow if not needed with flexbox
• Add more settings to control what functions are executed automatically (e.g. getBrowser, getOS, etc.)
• Lyqbox add gallery thumbnails within lightbox, zoom and drag options
• Look into projects and bring over useful functions

Already opened issues:

• Auto resize text areas: https://github.com/Lyquix/tpl_lyquix/issues/20
• Passive event listeners: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

Do we want to separate the CSS rules as its own stand-alone library/framework? Same question for lyquix.js?

[maustin92]

• Full Support for Flexbox using existing blocks-flex file or a series of flex files similar to current blk4/5/6 files
• Full Support for CSS grid using existing block-grid-4/5/6 files
• LyqBox Rework: I don't know how to accomplish this, but a way to better customize how the elements in lyqbox are ordered. In particular, add support for choosing whether or not the close button is in or outside of the content area, same with the prev/next buttons. Could add classes for this?
• Wordpress: possible add Post plugin as part of theme?
• Possibly go further with grid and flex to use flex's ordering and grid's template areas to set generic areas we can apply to sites, with overrides in the custom directory?
• Wordpress: a file similar to joomla's less files, wherein common wordpress classes are given rules (image alignments and such)

[coffeemug777]

• Finalize rewriting of long, repetitive codes on less files to mixin/loops etc.
• Sass version, benefits are better logic and loops, closer to programming language, which enables advanced customization, current issue with sass, there is no conditional file import, need to come up with a solution
• Grid, flexbox, we should convert most things on less files to grid/flexbox when we can
• We may want to standardize the version of the command line for js and css compilation. This will minimize conflicts on git merge
• Introduce using watchers. We can automate css and js compiling. A more efficient way of compiling, and is related to standardization.
• Introduce PHP testing + js testing, we should start integrating boilercode for unit testing, angular has a way to include testing automatically on every component created, it would be great if we can have this configured
• Integrate tabs and accordions inside of lyquix.js, so we can just add classes to html elements, like lyqbox
• Discuss the 'component' or 'module' approach to files lyquix.js and scipts.js, we can start with separating lyqbox.js and scripts.js to smaller, specific component/page files? example: lyqbox.js, locations.js, specialties.js etc. using exports, imports, we can pack the files into a single minified files on production.

[lyquix-owner]

Notes from Maustin:

Less/CSS:  Nix current blk4/5/6 setup in favor of using percentages and fractions for everything.  For moving Less Files to library: Off the top of my head: transitions, effects, “common,” icons, a few others.  Look into SCSS PHP for compiling on the go – removes need to compile manually after every single change  Make box-sizing: border-box the standard for box-sizing.  For flexbox: Implement a polyfill for < 9 and also create a compatibility function that sets the max-width for IE 10 and IE 11 to prevent flex-basis from not functioning.  Object Fit: cover and fix/polyfill for IE.  Add new file with rules for block percentages from 1- 100% using programmatic generation to make it one time?  Utilize grid to control page layout? JS:  Remove unused functions in lyquix.js and/or potentially move them into separate files. Gelocate, logging, tracking, hanging punctuation, image captioning  Potential layout for new Lyqbox elements: Controls on upper right, thumbnails beneath main content of the lightbox, drag and zoom with pictures as well.  In general, review Lyquix.js and familiarize selves with all functions that we keep. In particular, the layout code for Lyqbox and the mobileMenu function solve issues we’ve had in the past.  Separate lyquis.js into multiple files and load them similarly to how we handle less files PHP:  Add a folder to lyquix flexicontent template called “fields” with files that render custom fields that are used across multiple templates instead of copying and pasting changes to override to each individual flexicontent template. Misc:  Defer/Async parameter for JS and css libraries? Helps deal with performance. Use google pagespeed insights to see if it helps at all.  Use minified js on dev as well as enable modpagepseed on dev  Agree on common naming conventions for js and css files, and standard load order for those files.

Notes from Ruben

object-fit property, pollyfill make upgrade your browser bar for IE11 no blk 4/5/6 !!!! grid polyfill

file naming convention for js, css, php files function naming convention organization of rules and functions

fc temp php files

vue.js as js framework

scripts and styles loader merge index-custom.php and component-custom.php