now that CSS Grid has become better supported in all major browsers, it is time to look at some of the more whimscal layouts that are possible. This post will look at the following areas: Positioning elements in a grid Combining grids and flexboxes Area templates All items should work in all browsers. According to caniuse.com, CSS Grid is supported in all major browsers. The basic grids We will use the following grids: 12 equal columns and compound 4x6. Both grids will have equal rows of 200px and will have 1em gap between columns and rows. The 12 column grid...
A while back I wrote about color.jshttps://publishing-project.rivendellweb.net/color-js-a-css-color-tool-in-javascript/ a color manipulation library by Lea Verou. Chroma.jshttps://gka.github.io/chroma.js/ is another color manipulation library that allows you to manipulate colors in a natural way without using preprocessors. The post will look at the basics of Chroma.js, we'll create a series of colors to exercise the library, and then we'll convert them into Custom Properties that we can use from CSS. Chroma.js The first thing I discovered when playing with Chroma was how to work with different color spaces and how to convert from one color space to another. color.hexmode='auto|rgb|rgba' The first thing that called...
Two new proposals to import non-Javascript resources in Javascript modules are reaching stage 3 in the TC39 process, meaning that implementations are already available or will be available soon. This post will take a first look at these features and how they can be used in a project. JSON Modules Json modules allow you to import JSON files and use them in your javascript modules. With the following configuration file config.json json { "name": "My Application", "version": "v1.2" } We can import and use it from a sample JSON module as shown below. js import http from 'http'; import config...
The CSS Color Level 5 specification defines a way to provide contrast between background and foreground colors. The color-contrast function takes the followng arguments: A color for the background Two or more colors to compare against the background color. The one with the highest contrast ratio will be used as the foreground color with an optional target contrast levelhttps://www.w3.org/TR/WCAG21/contrast-minimum will be used. The target contrast level can be a number or one of the following strings: AA, AA-large, AAA, or AAA-large each representing a different requirement for body text versus large text they have different contrast requirements and AA versus...
CSS is adopting a lot of new features that in the past were only available in pre-processors or via Javascript. One of those features is the ability to lighten and darken colors like SASS darken and lighten functions. There are multiple ways to achieve the desired goal. I've chose to use the color-mixhttps://drafts.csswg.org/css-color-5/color-mix function as defined in the CSS Color Module Level 5https://drafts.csswg.org/css-color-5/. According to the spec: > This function takes two https://drafts.csswg.org/css-color-4/typedef-color specifications and returns the result of mixing them, in a given <color-space>https://www.w3.org/TR/css-color-5/typedef-color-space, by a specified amount. So basically, to use color-mix you need three things: The color...
In The File System Access API: simplifying access to local fileshttps://web.dev/file-system-access/, the authors describe how to use the API to create file management functionality for web applications The idea is that we'll be able to open a file from, display it in the browser and then if desired, save it to a new location in our local file system. To open a file we'll use the following code. We define the following constants and variables: Capture the button to open a file Capture the button to save a file Capture the text area where we'll insert the text Capture the...
In 2021 I thought of building a text editor based on Monacohttps://github.com/microsoft/monaco-editor and built as an Electronhttps://www.electronjs.org/ application was a good idea. Rather than wrap Electron around the app, I will try to build an editor again but make it a PWA. A PWA presents many of the advantages of a native app without many of the disadvantages. Don't require downloads There is no app store to download from Updates are automatic since there is no app store to download from Installation is optional you can either run it in your browser or install it on your computer as a...
In the last post, we built a basic PostCSS workflow using Gulp. This post will cover additional features that are nice to have in a workflow but are not required to run it. We will also look in some detail at postcss-preset-envhttps://preset-env.cssdb.org/, what it would allow us to do and how it would work. The plugins thoughts The list of plugins that I want to use shows what they are, what I expect them to do, and a little research on SASS equivalency. postcss-color-function : postcss-color-functionhttps://github.com/postcss/postcss-color-function provides color manipulation functions equivalent to SASS @lighten and @darken. : The color functions...
For a while, SASS was all we needed. I was OK with it only being available as a Ruby Gem the original implementation was written in Ruby, then I was happy when LibSASS came around written in C and might have even been OK with the Dart implementation becoming the reference implementation and the SASS team deprecating the Ruby and C implementations, eventually stopping work on them altogether. But one thing that SASS has never done is give you the possibility of testing new CSS features as Babel does for Javascript. I first heard of PostCSShttps://postcss.org/ when Autoprefixer became a...
Rather than write about whatever catches my eye, I want to be a little more disciplined about what I write. These are some of the things I plan to do. If there's something that particularly catches my eyes, I may write about it and either include it in the regular Monday and Wednesday post or put it in the schedule for a Friday Special... no guarantees either way. Course Builder This idea looks for a way to programmatically build courses packages to use either in LMSs or as static content. It may be a good idea to base this on...
