サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
www.madebymike.com.au
My attempt to modernise some learnings from CSS architecture and apply them in the context of modern JavaScript applications. Posted by Mike on 23rd November 2019 (about a 19 minute read). I went to a JavaScript meet-up in Sydney the other night and asked the question "How many people know what CSS Architecture is?". The room was full of different people with varying backgrounds and experience. I
Not like this... permalink This is a perfect situation to use CSS variables. The way I would have approached this with Sass, and how I've seen most people use CSS variables so far, is something like this: :root { /* scale for 1.2 */ --ms-small-1: 1rem; --ms-small-2: 1.2rem; --ms-small-3: 1.44rem; --ms-small-4: 1.728rem; --ms-small-5: 2.074rem; --ms-small-6: 2.488rem; /* scale for 1.33 */ --ms-larg
Explains the box model, cascade, formatting contexts, positioning, stacking and a lot more about how CSS works. A right of passage, I had to write my version. Posted by Mike on 4th April 2017 (about a 16 minute read). If you use CSS in your daily work, your primary goal is probably focused on making things 'look right'. How this is achieved is often far less important than the end result. This mea
A bunch of interesting techniques for using SVG to make unique responsive components. Posted by Mike on 19th September 2016 (about a 10 minute read). I think many of us are not using SVG to its full potential. I often see SVG used as an alternative image format or as a simple solution for icons, and whilst it's great for these things, it's also a lot more than that. SVG can solve problems that HTM
A very tongue-in-cheek article about why jQuery is good for the web. Posted by Mike on 19th February 2016 (about a 4 minute read). jQuery I love you. We've been together for 10 years and that's more than 50 years in JavaScript framework lifetimes. I might see you now less often than I did once, but I need you now no less than when we first met. I’ll never forget our first function together: $(docu
The flex container is: 0px The initial size of all the flex items is: (0px + 0px + 0px) = 0px So the space remaining is: 0px - 0px = 0px That's a positive number, so we will be using flex-grow to work out how to distribute the remaining space between the flex items. 2. Find the size of 1 flex-grow value:
A detailed exploration of how the space and size of items are determined when using flexbox. Posted by Mike on 9th September 2014 (about a 7 minute read). Instead of covering all properties of Flexbox this article focuses on understanding how Flexbox calculates the width of items. The examples in this article are all in the context of a horizontal layout, but the same logic applies if you use a ve
Creating fluid responsive typography with calc and viewport units. Posted by Mike on 17th March 2015 (about a 9 minute read). It is possible to have precise control over responsive typography. Using calc() and viewport units you can create fluid type that scales perfectly between specific pixel values, within a specific viewport range. This text is limited to between 20px and 40px, over a viewport
このページを最初にブックマークしてみませんか?
『www.madebymike.com.au』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く