Türker Yıldırım

css

  • CSS custom properties are not Sass variables

    Note2 min read

    A Sass variable is substituted at compile time and does not exist in the output. A custom property is in the cascade, inherits, and can be changed at…

  • Bootstrap 4 spacing utilities replace a stylesheet

    Note1 min read

    A project stylesheet accumulates dozens of one-line rules that set a margin on one element, and each of them is a name somebody has to invent and remember.…

  • A grid that wraps without a media query

    Snippet1 min read

  • A CSS grid with named lines reads like the design

    Note2 min read

    Placing items with numeric line indexes works and becomes unreadable the moment a column is inserted, because every number after it shifts. Naming a line main-start and main-end…

  • The Bootstrap 4 breakpoint that is not a breakpoint

    Note2 min read

    Bootstrap 4 has five tiers and only four of them have an infix, which is why col-sm-6 exists and col-xs-6 does not. The reasoning is mobile-first — the…

  • Importing only the Bootstrap Sass you use

    Note2 min read

    The full compiled stylesheet is around 150 kilobytes before compression, and most projects use the grid, some utilities and three components. The order is load-bearing: variables must come…

  • BuddyPress 3.0 and the template pack you have to choose

    Note1 min read

    3.0 ships a second template pack alongside the original, and an existing site keeps the old one — so the new markup, which is the whole point of…

  • webpack 4 needs almost no configuration

    Deep dive10 min read

    One line replaced about eighty. The defaults are almost always right, and the cost is that they are invisible when they are not.

  • Bootstrap 4 dropped the float grid

    Deep dive10 min read

    Two and a half years in alpha, and the grid is flexbox now. The class renames are mechanical; the ones that changed meaning rather than name are not.

  • @supports is how grid ships this year

    Note1 min read

    Grid is in Chrome, Firefox, Safari and Edge and is not in IE11 in any form anyone should target — the 2011 prefixed implementation is a different specification.…