6 ms·

Was hoping to see some examples related to CSS animations or interactivity, instead got just a few tricks that don't seem all that useful. Also, the way colors

by d33 8y ago

Was hoping to see some examples related to CSS animations or interactivity, instead got just a few tricks that don't seem all that useful. Also, the way colors were chosen for this website makes my eyes instantly hurt.

deleted 8y ago
[deleted]
lugg 8y ago
I am still blown away by how powerful CSS grid is. https://youtu.be/7kVeCqQCxlk https://youtu.be/7kVeCqQCxlk It's sad it doesn't get more use. Potwntially this is because CSS frameworks hide all this away and nobody is really learning CSS anymore but I wouldn't really know. I'm not really that exposed to the web front end side of things.
- gog 8y ago
  https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid This is probably the reason. There are still browsers out there that don't support it 100% to the spec.
  - tenaciousDaniel 8y ago
    It's not on the blackberry browser, so that's gonna be a no for me! :p
  - mcv 8y ago
    Not a lot, though. Edge, Chrome, Firefox, Safari, Opera, iOS and Android all support it. Nobody cares about Opera Mini and Blackberry, and the sooner we cut IE11, the better. It's never going to support most of the modern standards.
    - detritus 8y ago
      “Recent-ish versions of Chrome, Firefox, Safari, Opera, iOS and Android all support it”. According to my stats, there's a load of old Chrome & Safari versions using my site that would be tripped up by its use, sadly. I'm keeping a beady eye on my stats, awaiting the day and can make a site entirely with CSS Grid.
    - onychomys 8y ago
      It's not that nobody cares about Opera Mini, it's instead that OM users (like me!) have come to accept that some sites will behave in a weird way on the browser, and so it might be necessary to switch to a different one. It's the tradeoff we make to get all of the good things that come along with OM usage.
  - dictum 8y ago
    There's no reason to not use CSS Grid, except for not knowing it well enough — and there's no reason not to learn it. Of those, only IE11 is relevant, as it's a desktop browser, on wider and taller viewports. Most of these browsers are mobile browsers on devices with narrow viewports, so even the default `display: block` fallback may be sufficient. If you have margins/paddings/widths etc which only make sense in the CSS Grid version, you can set these properties inside an `@supports` query https://developer.mozilla.org/en-US/docs/Web/CSS/@supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports For IE11, it's a choice of presenting visitors with a slightly worse layout, to match the browser (https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ https://philipnewcomer.net/2014/04/target-internet-explorer-... or, if you use Sass or PostCSS, using mixins that output CSS Grid properties with Flexbox as fallback. Its bugs are well-documented, and most have workarounds https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs. Even inline-block can serve as a fallback, if you can avoid whitespace around tags in the markup (https://css-tricks.com/fighting-the-space-between-inline-block-elements/ https://css-tricks.com/fighting-the-space-between-inline-blo...) A reasonable fallback doesn't need to match CSS Grid exactly. The whole point of media queries and responsive web design is that the website won't look exactly the same on all devices; it will look and work as good as it needs to look in that specific device.
    - folkrav 8y ago
      My last workplace's policy was to fully support the last couple version of Edge, Firefox and Chrome, but for IE11, it was "it won't be utterly unusable". That approach is becoming more and more commonplace, too. Reasonable fallbacks doesn't mean being perfect, either. I'll be honest anyway, most people still using IE11 these days are either literally stuck with it, or a pretty used to half the sites they visit to be a bit broken.
- pjmlp 8y ago
  Originally contributed by Microsoft, based on XAML grid. https://alistapart.com/article/the-story-of-css-grid-from-its-creators https://alistapart.com/article/the-story-of-css-grid-from-it...
- danijelb 8y ago
  Before CSS layouts, HTML tables were (ab)used for layout and were functionally very similar to what CSS grid is now, except responsive of course. In hindsight, maybe tables for layout weren't wrong.
  - remify 8y ago
    Well it worked. Kind of. What a lot of developers need to understand is that HTML shouldn't be use for layout. HTML should be use for semantic and information structure.
    - TeMPOraL 8y ago
      > What a lot of developers need to understand is that HTML shouldn't be use for layout. HTML should be use for semantic and information structure. That was the great lie of the 2000s. It was oft repeated, but almost never adhered to. CSS Zen Garden was cool, but the typical attempt at "separating content from presentation" almost universally resulted in a div soup that was even worse than table layouts. If a div exists only to hang a class off it, so that it can be targeted in CSS, it's a part of layout, not semantic/information structure. In a perfect world, in which most websites were not actively user-hostile, we could have separation of layout from content. It would include relinquishing control over rendering back to the users. It would require to stop obsessing so much over colors and layouts and custom controls. The very concept is anathema to the modern web, though.
      - dmix 8y ago
        > If a div exists only to hang a class off it, so that it can be targeted in CSS, it's a part of layout, not semantic/information structure. Thanks, I've always thought this intuitively but never seen it written out. Just as any academic theory hitting the reality through actual implementation, the theory should be more of a guiding force instead of a rigid structure to follow. Much like how the military learned to plan battles (No battle plan ever survives contact with the enemy - Helmuth von Moltke the Elder) by giving troops higher-level objectives, rather than planning every single step of the attack, such as exactly where they should walk and hide, and expecting them to follow it to a T. This is how I approach most programming/web design theories... including BEM.
- rangerpolitic 8y ago
  I am hopeful for CSS grid. I am hopeful that we can properly return to the principle of separating concerns. I am so tired of dealing with sites that have HTML littered with divs and spans solely for the purposes of layout and styling.
- Theodores 8y ago
  > It's sad it doesn't get more use. This is basic HTML5 literacy. At the end of the day the new HTML5 and CSS features do not fit into out dated work practices and the excuses that go with it. Web content creators and developers should be familiar with all of this stuff and not kidding themselves that the 'sea of divs is the way to go because we do really important projects and need to have polyfills back to IE6'. Not using the new tags and not using CSS grid is a bit like only eating fast food and no longer knowing how to use a knife and fork. When I look at div soup I know that the team behind the page have not got it yet. None of the div soup HTML is maintainable. It is dated. So any 'wow you can use the details/summary' article comes across to me as 'wow, you have learned to wipe your own nose!' This whole industry needs to get to grips with the lingua franca of the web, focus on document structure, use the stuff that works in evergreen browsers and move away from big up front visual design made into div soup to content driven design. It is that simple and excuses are pathetic.
bigbadgoose 8y ago
The best tip was in the conclusion. Did you read it? > I already knew all of these things and this is a bad article. > - Probably Someone
Bassetts 8y ago
I created a pure CSS stopwatch last year. Was a bit of a brainwave in the shower after I had been playing with CSS animations. I was quite surprised how well it turned out, it works exactly as I imagined it would. https://codepen.io/bassetts/pen/oQWdLK https://codepen.io/bassetts/pen/oQWdLK
- rangerpolitic 8y ago
  You can do quite a lot with nothing but HTML/CSS. https://codepen.io/jcoulterdesign/pen/NOMeEb https://codepen.io/jcoulterdesign/pen/NOMeEb
mostlysimilar 8y ago
I like it. It's unique and still usable.

by d33 8y ago

deleted 8y ago

[deleted]

lugg 8y ago

I am still blown away by how powerful CSS grid is. https://youtu.be/7kVeCqQCxlk https://youtu.be/7kVeCqQCxlk It's sad it doesn't get more use. Potwntially this is because CSS frameworks hide all this away and nobody is really learning CSS anymore but I wouldn't really know. I'm not really that exposed to the web front end side of things.

gog 8y ago
https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid This is probably the reason. There are still browsers out there that don't support it 100% to the spec.
- tenaciousDaniel 8y ago
  It's not on the blackberry browser, so that's gonna be a no for me! :p
- mcv 8y ago
  Not a lot, though. Edge, Chrome, Firefox, Safari, Opera, iOS and Android all support it. Nobody cares about Opera Mini and Blackberry, and the sooner we cut IE11, the better. It's never going to support most of the modern standards.
  - detritus 8y ago
    “Recent-ish versions of Chrome, Firefox, Safari, Opera, iOS and Android all support it”. According to my stats, there's a load of old Chrome & Safari versions using my site that would be tripped up by its use, sadly. I'm keeping a beady eye on my stats, awaiting the day and can make a site entirely with CSS Grid.
  - onychomys 8y ago
    It's not that nobody cares about Opera Mini, it's instead that OM users (like me!) have come to accept that some sites will behave in a weird way on the browser, and so it might be necessary to switch to a different one. It's the tradeoff we make to get all of the good things that come along with OM usage.
- dictum 8y ago
  There's no reason to not use CSS Grid, except for not knowing it well enough — and there's no reason not to learn it. Of those, only IE11 is relevant, as it's a desktop browser, on wider and taller viewports. Most of these browsers are mobile browsers on devices with narrow viewports, so even the default `display: block` fallback may be sufficient. If you have margins/paddings/widths etc which only make sense in the CSS Grid version, you can set these properties inside an `@supports` query https://developer.mozilla.org/en-US/docs/Web/CSS/@supports https://developer.mozilla.org/en-US/docs/Web/CSS/@supports For IE11, it's a choice of presenting visitors with a slightly worse layout, to match the browser (https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ https://philipnewcomer.net/2014/04/target-internet-explorer-... or, if you use Sass or PostCSS, using mixins that output CSS Grid properties with Flexbox as fallback. Its bugs are well-documented, and most have workarounds https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs. Even inline-block can serve as a fallback, if you can avoid whitespace around tags in the markup (https://css-tricks.com/fighting-the-space-between-inline-block-elements/ https://css-tricks.com/fighting-the-space-between-inline-blo...) A reasonable fallback doesn't need to match CSS Grid exactly. The whole point of media queries and responsive web design is that the website won't look exactly the same on all devices; it will look and work as good as it needs to look in that specific device.
  - folkrav 8y ago
    My last workplace's policy was to fully support the last couple version of Edge, Firefox and Chrome, but for IE11, it was "it won't be utterly unusable". That approach is becoming more and more commonplace, too. Reasonable fallbacks doesn't mean being perfect, either. I'll be honest anyway, most people still using IE11 these days are either literally stuck with it, or a pretty used to half the sites they visit to be a bit broken.
pjmlp 8y ago
Originally contributed by Microsoft, based on XAML grid. https://alistapart.com/article/the-story-of-css-grid-from-its-creators https://alistapart.com/article/the-story-of-css-grid-from-it...
danijelb 8y ago
Before CSS layouts, HTML tables were (ab)used for layout and were functionally very similar to what CSS grid is now, except responsive of course. In hindsight, maybe tables for layout weren't wrong.
- remify 8y ago
  Well it worked. Kind of. What a lot of developers need to understand is that HTML shouldn't be use for layout. HTML should be use for semantic and information structure.
  - TeMPOraL 8y ago
    > What a lot of developers need to understand is that HTML shouldn't be use for layout. HTML should be use for semantic and information structure. That was the great lie of the 2000s. It was oft repeated, but almost never adhered to. CSS Zen Garden was cool, but the typical attempt at "separating content from presentation" almost universally resulted in a div soup that was even worse than table layouts. If a div exists only to hang a class off it, so that it can be targeted in CSS, it's a part of layout, not semantic/information structure. In a perfect world, in which most websites were not actively user-hostile, we could have separation of layout from content. It would include relinquishing control over rendering back to the users. It would require to stop obsessing so much over colors and layouts and custom controls. The very concept is anathema to the modern web, though.
    - dmix 8y ago
      > If a div exists only to hang a class off it, so that it can be targeted in CSS, it's a part of layout, not semantic/information structure. Thanks, I've always thought this intuitively but never seen it written out. Just as any academic theory hitting the reality through actual implementation, the theory should be more of a guiding force instead of a rigid structure to follow. Much like how the military learned to plan battles (No battle plan ever survives contact with the enemy - Helmuth von Moltke the Elder) by giving troops higher-level objectives, rather than planning every single step of the attack, such as exactly where they should walk and hide, and expecting them to follow it to a T. This is how I approach most programming/web design theories... including BEM.
rangerpolitic 8y ago
I am hopeful for CSS grid. I am hopeful that we can properly return to the principle of separating concerns. I am so tired of dealing with sites that have HTML littered with divs and spans solely for the purposes of layout and styling.
Theodores 8y ago
> It's sad it doesn't get more use. This is basic HTML5 literacy. At the end of the day the new HTML5 and CSS features do not fit into out dated work practices and the excuses that go with it. Web content creators and developers should be familiar with all of this stuff and not kidding themselves that the 'sea of divs is the way to go because we do really important projects and need to have polyfills back to IE6'. Not using the new tags and not using CSS grid is a bit like only eating fast food and no longer knowing how to use a knife and fork. When I look at div soup I know that the team behind the page have not got it yet. None of the div soup HTML is maintainable. It is dated. So any 'wow you can use the details/summary' article comes across to me as 'wow, you have learned to wipe your own nose!' This whole industry needs to get to grips with the lingua franca of the web, focus on document structure, use the stuff that works in evergreen browsers and move away from big up front visual design made into div soup to content driven design. It is that simple and excuses are pathetic.

bigbadgoose 8y ago

The best tip was in the conclusion. Did you read it? > I already knew all of these things and this is a bad article. > - Probably Someone

Bassetts 8y ago

I created a pure CSS stopwatch last year. Was a bit of a brainwave in the shower after I had been playing with CSS animations. I was quite surprised how well it turned out, it works exactly as I imagined it would. https://codepen.io/bassetts/pen/oQWdLK https://codepen.io/bassetts/pen/oQWdLK

rangerpolitic 8y ago
You can do quite a lot with nothing but HTML/CSS. https://codepen.io/jcoulterdesign/pen/NOMeEb https://codepen.io/jcoulterdesign/pen/NOMeEb

mostlysimilar 8y ago

I like it. It's unique and still usable.