Comments (11)
Hi!
I understand it's constructive feedback, but please let me clarify an important point: I never intended there's a lack of need for IE support in general, and we did put a lot of effort to make sure our framework and components supported older browsers.
The Auto-Sized Grid is not the grid system of the framework. The grid system of the framework can be found here:
https://codyhouse.co/ds/docs/framework/grid-layout
If you use the .grid and .col classes, you create a grid that behaves identically in new and older browsers (IE9 included).
The Auto-Sized Grid is just a component based on a specific CSS Grid property (minmax function). In these cases, you can only provide a fallback for older browsers. If you're trying to create a similar experience for all browsers, you should use the framework grid system.
This is the only reason why I closed this thread: all feedback is welcome (and always helpful), but we're referring to a component, not the grid system of the framework.
I'd kindly invite to open a new issue if there's a bug related to the framework grid system. Given that the object ('IE 11 not recognising variables?') is not correct and could be misleading for other users.
Thanks :)
from codyhouse-framework.
The main color variables work in all browsers (it requires the posct-css-variables plugin). The Color Themes are not supported in older browsers (data-theme="themeName").
https://codyhouse.co/ds/docs/framework#css-variables
The auto-sized grid is based entirely on CSS Grid, therefore it's not possible to create the same effect in older browsers (without using JS). You can use the fallback (3 cols) to set a custom grid in older browsers.
from codyhouse-framework.
OK, I'm upgrading to v2 and after installing the above plugin (using npm install postcss-css-variables --save-dev) , I get:
npm ERR! code 128
npm ERR! Command failed: git clone --mirror -q https://github.com/CodyHouse/postcss-css-variables.git /root/.npm/_cacache/tmp/git-clone-1483010b/.git
npm ERR! fatal: could not create leading directories of '/root/.npm/_cacache/tmp/git-clone-1483010b/.git'
npm ERR!
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2019-09-12T02_34_21_608Z-debug.log
[r
from codyhouse-framework.
** to get around this, I just loaded the files manually via ftp, and gulp watch seems to work ok now.
from codyhouse-framework.
ok, well - that post-css things fails miserably when it comes to IE11 and basic layouts. I'm building a somewhat dynamic fallback for basic elements and will share my idea when I'm done.
As much as I'd like to ignore IE and pretend it doesn't exist, for some clients it can equate to 9% of their traffic, which can be a hell of a lot of money if ignored.
: sigh :
from codyhouse-framework.
Hi there, the post-css-variables plugin provides a fallback for CSS variables and works properly on IE11. If you are having issues with colors, then it could mean the plugin was not properly configured.
If you are using our gulp config file, please make sure you are serving the style-fallback.css to older browsers. You can read more about that here:
https://codyhouse.co/ds/docs/framework#progressive-enhancement
About layout, CSS Grid is not fully supported in IE11. We do provide an accessible version of our components for older browsers as well (for example the auto-sized-grid component has a fallback included).
from codyhouse-framework.
Hi,
Yes I'm using the fallback css but the grid still doesn't work. Even codyhouse.co doesn't render as it should in ie11, and I'm guessing it should as I can see a fallback css in your code.
Am I missing something?
from codyhouse-framework.
Hi 👋
We don't use a fallback on codyhouse.co because, given our target, we have almost no visitors using IE (yeah!). If you're referring to the component (auto-sized grid), we provide a fallback to have 3 columns on IE. For example, this is IE9:
https://www.dropbox.com/s/gi2ya5v0y2jepl4/Screenshot%202019-09-14%2012.21.37.png?dl=0
Unfortunately, it's not possible to create the same auto-sized effect in IE because Grid is not support, but you can edit the fallback at different breakpoints if you prefer.
I'm closing this issue because it's not specifically related to the framework.
Cheers
from codyhouse-framework.
Hi,
Thanks for the reply. I hear you about the lack of a need for IE fallback in your industry , but I'm going to continue this thread for other professionals out there that want to use this framework in live production scenario and still require better IE fallback.
In our case, if we didn't find a fallback for the grid/column system, our clients would be losing nearly $1 million a year based on IE usage % and turnover.
As far as the auto-sized-grid yes we have already set fixed % width based on the different breakpoints and that will do just fine.
The basic column widths though definitely require a custom fix to make them work, and these are actually fairly minimal - I'll share what I've done once I'm finished, so that anyone else who needs some extra IE fallback can also use it.
Please don't get me wrong Sebastiano - I'm your biggest fan. It's just that as I said, if we are going to use this in production in our own system, across all clients, then we can't just ignore IE.
These are ecommerce sites and it would be like trowing 10% of everyone's income in the bin.
Thanks again and keep up the great work.
from codyhouse-framework.
@xcartmods comment deleted for inappropriate content.
from codyhouse-framework.
apologies
from codyhouse-framework.
Related Issues (20)
- gulp-clean-css makes css min file larger than source? HOT 2
- CodyHouse Pro Twitter link HOT 1
- Purge CSS is breaking Main Header component mobile functionality HOT 2
- Gridsome app - SCSS compiles but styles not loading HOT 6
- Gulp not refreshing Browser But compiles changes HOT 2
- Text component vertical space changed in v3 HOT 3
- Cannot install npm on this project due to latest version of npm & node HOT 2
- Modularize CodyHouse HOT 1
- remove margin / offset so grid elements are full width of container HOT 4
- how to use it with vite ? HOT 2
- Use data attributes instead of js-* classes HOT 1
- any chance of 10 minutes of zoom support? HOT 1
- HTML inputs with date-related type attribute are slightly higher than others HOT 2
- Add experiment library to codyhouse components HOT 2
- masonry.js is throwing error
- troubles with aspect-ratios HOT 2
- Button Editor: misleading contrast checker HOT 1
- Add an option to disable closing a modal by clicking Escape or clicking the backdrop HOT 1
- Using breakpoint mixin throws an error HOT 1
- Error when using google-closure-compiler HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from codyhouse-framework.