Leaderboard

Because there are modules that other people have created which add inline styles and colors and all sorts of other things that are not covered by the default pw and rock LESS styles. They aren't my modules! ? For example, AdminOnSteroids - the admin config interface there has all kinds of crazy styling going on. Left to its own device it looks pretty bad with a dark theme. I have a file that contains override that use the main color variables. Will probably be useful for other folks trying to style their admin and aren't sure what is going on with some crazy config screen. But not every site uses AoS, I don't always deploy it. So why include those style rules for sites that don't have the module installed? There's stuff in core as well that was put together before the UIkit days that have static css - I guess some of these could be resolved by "inherit" maybe? I haven't felt confident enough with the changes I've made myself to suggest pull requests but I can dig into it later. There are a few others. Look at the modules support @flydev has added to his theme to correct/adjust the look of admin configuration interface for some of these modules. For now I'll just load them all and see how bad the bloat is. If it ends up being negligible then great.

Hello there! I recently updated my own website - I am a frontend developer living in the northern part of germany. https://www.thumann-media.de The old design has been online since five years (time flies...) and I thought that it was time to make things a bit flashier and include a better showcase of my web projects to give the user a more detailed description of the project features. It's a classic one pager design just for the sake of keeping things as short and simple as possible (I hope the image fits inside this thread). The new version of my site includes a "portolio section" where users get a sneak preview of each project I've been working on recently. It features nice fade-in-out animations powered by aos.js (animate on scroll). Also new is that every project gets a dedicated subpage where I describe some of the unique features that this website offers: I like to have some eye-catchers. I always used the animated wave theme on my website, so why not include a message in a bottle? The animation of the bottle is done via the awesome GSAP animation engine (https://greensock.com/gsap/). This is a super powerful library and I just started diving into the possibilities of this one. Tech Talk: Some of the things I used: - ProFields used for this one (repeater matrix, combo) - Frontend framework is Bootstrap 5. I had a hard time of deciding between Bootstrap and UIKit as my new go-to framework (I am bit biased though because I've been always using bootstrap since version 2). But the grid system alone makes bootstrap so flexible and powerful for me, so I will stick with it for another 10 years I think... - https://github.com/nbcommunication/PageimageSource for image srcsets with webp support - Ajax driven contact form with bootstraps frontend validation - AIOM+ for compressing the assets (CSS and JS) https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify - SEO Maestro - WireMail SMTP AOS.js vs GSAP Which animation library you should use? I discovered the GSAP library a bit too late in the development process, tough. So I am still using aos.js for some animations. AOS has a super small footprint considering its filesize (14 kb, minified) and is super easy to use and super reliable. Whereas GSAP is quite large (71kb, minified) and if you want to make use of scroll triggers you have to include a second library which adds another 40kb. AOS has lots of nice animations which come out of the box. GSAP does not offer this, you have to program those transitions yourself. So you need to spent some time, reading the docs and looking for tutorials! GSAP can do all that AOS can and beyond. If you want to have full control over everything I would advice you to give it a try. So that's all for now. I wish all of you a great weekend!

Be sure to checkout the new grow feature ?

As I've been working through an admin theme structure that would allow me to add 1-3 colors and relationship types that would generate accent and different primary, secondary and muted colors for UIkit. There have been a number of interesting bumps along the way connected to color and contrast and this has led me through several rabbit holes that might save folks some time as they look to build their own admin theme and find themselves unsure about how to wrangler the color contrast issue. So I started with a basic color input and calculated a number of additional colors. I started with red. in LESS, I set up a few rules to calculate and arrange different colors: @base-dark-15-desat: darken(@base-color,15); @base-dark-30-desat: desaturate(darken(@base-color,30),20); @base-dark-35-desat: desaturate(darken(@base-color,35),50); @base-light-15-desat: desaturate(lighten(@base-color,15),50); @base-light-15: lighten(@base-color,25); @base-dark-15: darken(@base-color,25); @base-dark-35: darken(@base-color,35); Originally desaturated the first one, but changed my mind. All of these colors seemed to work fine for the base of #ff0000 although I needed to provide a little tweaking to get the link color usage right, because I found that when I chose other color, the contrast of the link text against the background didn't always work. It was fine for buttons and other navigation, but not link text on the main background. Blue and green, for example: The blue of the button, if applied to the link text above, would have been too dark of a contrast. In stead I brought the lightness up and it gets a sort of periwinkle tone. Green was dramatically dark: Now this piece took me down my first rabbit hole - what exactly was desaturation, lighten and darken doing to achieve their result. My assumption was that they were mixing with white or black - which LESS can certainly do. That's not what was happening here. LESS convert colors to HSL before running any color functions. And the percentage argument that comes with the lighten and darken commands does not actually brighten or darken the color by the percent you specify. Instead, it sets the absolute luminance value of the HSL value of the color to the value you state. Throw desaturation on top of that process The problem is that not all luminance values are equal. You can have two very different colors that appear to have different brightness levels, but their luminance levels are identical. If a luminance level is dark enough or light enough, using lighten will flatten the color to white, and darken will flatten the color to black. The percentage that merely dimmed the red color to a deeper brick red in combination with desaturate turned the base green color black. What can be done? It is possible to get the luminance value for a color through: lightness( color ); Then that value can be multiplied by a float between 0.01 and 1 to get an adjustment that can be added to the adjustment. This provides a percentage change from whatever the lightness level is that a color intrinsically has. But this feels a bit janky. Moving on to the next topic, and one that really captured by attention for a few days - complementary color calculation. The formulas here were similar to the single color variant - with the addition of a LESS complement calculation: @base-contrast: difference(@base-color, #ffffff); @base-dark-15-desat: darken(@base-color,15); @base-dark-30-desat: desaturate(darken(@base-contrast,30),20); @base-dark-35-desat: desaturate(darken(@base-contrast,35),50); @base-light-15-desat: desaturate(lighten(@base-color,15),50); @base-light-15: lighten(@base-color,25); @base-dark-15: darken(@base-contrast,25); @base-dark-35: darken(@base-contrast,35); This was strange to me. I was expecting violet as a complementary color. Not so, there is a rabbit hole (and a controversial one at that) connected to the legacy use of subtractive color spaces and additive color spaces. This article (and the connected libraries on github) explained it quite well: https://blog.daveeddy.com/2014/07/01/red-yellow-and-blue/ My expectation was connected to the RYB color wheel: not the RGB color wheel: So now, the thing about this situation is that even the CYMK color space - which developers and designers understand to be dull and muted when presented on monitors - is different still than RYB space, as it uses a more extensible primary color scheme that can cover gamut ranges that RYB can't touch. And yet, for some reason, RGB strikes me as having a lot of garish colors while RYB colors produce a warmer space. He's got a fun color picker for nostalgic folks like me: http://bahamas10.github.io/ryb/ Again, like the luminance cludge, trying to bounce around color space to get the effect I want led me to wonder - how are contemporary apps doing it? What color space are they using to work out all the accessibility and contrast issues? This led me to look into HCT - hue, chroma, tone - color space that is used by Material Design 3: https://m3.material.io/styles/color/dynamic-color/overview Really cool conceptually, the science behind the new color space is described in detail here: https://material.io/blog/science-of-color-design Regarding the issue we run into with LESS using lighten/darken - they give a great example of four colors that have the luminance but perceptually vary considerably in brightness: I haven't finished running calculations on how to best address color selections for contrast scores but these items gave me a lot to think about. There are Material 3 dev libraries available - I'll probably check them out this week. https://github.com/material-foundation/material-color-utilities My guess is that this sort of color comparison goes into Chrome's contrast scoring? Being able to use a library to automatically calculate appropriate contrast color sets will probably end up being a better alternative to using LESS functions in the future.

Also, change lang=en to lang=en&theme=dark if you want the black / dark look for your Twitter embeds (I do!)

@Ivan Gretsky Absolutely, that would be great.

Note for anyone who reads this thread, the Module elabx suggested is set to do Twitter posts in Spanish. If you want to switch it to English, change line 277 to: "&maxwidth={$this->maxWidth}&maxheight={$this->maxHeight}&lang=en"; (formerly it was lang=es for Spanish) If you get the missing semicolon problem like I did, just add a semi colon to the end of line 163.

ProcessWire does not use a favicon in the admin backend. I usually insert a PNG-based one of the ProcessWire P logo to differentiate the frontend and backend of a site, however I upgraded my technique to use an SVG-based one, which has the added benefit of being able to quickly set the fill color. This is a nice trick, especially if you're working in multiple admin backends of different sites and want to be able to quickly identify which tab belongs to which site by the ProcessWire favicon color alone. Insert this in /site/templates/admin.php: wire('adminTheme')->addExtraMarkup('head', "<link type=\"image/svg+xml\" rel=\"shortcut icon\" href=\"data:image/svg+xml,%3Csvg width='256' height='256' viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#EB1D61' fill-rule='nonzero' d='M234.02346,56.2065308 C226.258185,44.611679 213.340949,31.3634673 200.370381,22.7873303 C173.426584,4.33370224 142.216153,-2.21573572 114.611028,0.642976614 C85.8219124,3.7470262 61.1714319,14.5951995 40.9049183,32.6861551 C22.1317268,49.454423 9.73715371,69.9560838 4.27586162,89.5083961 C-1.24942998,109.060708 -0.513435538,127.162331 1.45988289,140.794549 C3.53986718,154.629436 10.4304818,172.037714 10.4304818,172.037714 C11.8384712,175.376434 13.7904564,176.731123 14.8037821,177.296465 C19.8384108,180.048509 28.105015,177.627137 34.4516337,170.50169 C34.7716313,170.06435 34.9422967,169.45634 34.7716313,168.944332 C33.000978,162.128223 32.3609828,156.997474 31.7316543,153.029411 C30.2916651,145.178619 29.65167,132.026409 30.6116627,119.866214 C31.0916591,113.284776 32.3716494,106.244663 34.6116325,98.8632122 C38.9422665,84.281646 48.0728642,69.0600695 62.3447564,56.4092007 C77.715307,42.7876498 97.4271581,34.3715154 116.16835,32.1954806 C122.738967,31.4061347 135.240206,30.6487893 150.290759,34.3608485 C153.501401,35.1608613 167.282631,38.7555854 182.023853,48.7397449 C192.754438,56.0358614 201.394373,65.0386719 207.346328,73.9454809 C213.404949,82.44695 219.986232,96.783179 221.916885,107.279347 C224.647531,119.226204 224.647531,131.88774 222.706212,144.218603 C220.30623,156.570801 215.975596,168.581659 209.24498,179.152495 C204.605015,187.344626 194.983755,198.171465 183.613174,206.299595 C173.362585,213.510377 161.66134,218.715793 149.650764,221.595839 C143.57081,223.035862 137.469522,223.95321 131.218903,224.15588 C125.661612,224.32655 118.291001,224.15588 113.117706,223.2812 C105.427098,222.054513 103.82711,220.091815 102.067123,217.425106 C102.067123,217.425106 100.840466,215.505075 100.499135,210.36366 C100.616467,163.376243 100.595134,175.920443 100.595134,151.525387 C100.595134,144.63461 100.371136,138.383844 100.435135,132.709086 C100.755133,123.396937 101.54446,116.996835 108.20041,110.063391 C113.01104,104.953976 119.741656,101.87126 127.154934,101.87126 C129.405583,101.87126 137.160191,101.977929 143.97614,107.642019 C151.282751,113.74345 152.509409,122.084916 152.797407,124.314285 C154.461394,137.359827 145.842792,147.077316 142.536151,149.541355 C138.440182,152.613404 134.760209,154.106761 132.274895,154.981442 C126.984268,156.752137 121.170979,157.264145 115.944352,156.922806 C115.144358,156.869472 114.41903,157.392147 114.259031,158.19216 L112.499044,167.322972 C110.781724,174.256417 114.632361,176.795124 116.872345,177.691138 C124.029624,179.899173 130.376243,180.816521 137.896186,180.251179 C149.426765,179.440499 160.797346,174.896427 170.450607,165.893616 C178.663878,158.085492 183.346509,148.453338 184.946497,137.679832 C186.546485,125.722308 184.466501,112.847436 179.015875,101.945928 C173.021254,89.9244028 162.674665,79.8869091 149.042768,74.393488 C135.272206,68.9747348 124.317622,68.7827317 110.195062,72.3881226 L110.035063,72.4414568 C100.861799,75.5988406 93.0111915,79.4922361 84.8405865,87.9297042 C79.2406288,93.7537973 74.6539968,100.804577 71.8593512,108.762037 C69.0860388,116.783498 68.3393778,122.767594 68.2113788,132.069076 C68.0407134,138.959853 68.3713775,145.359955 68.3713775,151.354717 L68.3713775,190.832681 C68.3713775,203.462216 67.9447141,205.648918 68.3713775,212.145022 C68.6060424,216.454424 69.2033713,221.329168 71.091357,226.566585 C73.0326757,232.337344 77.1073116,238.257439 79.9019571,240.988149 C83.8165942,245.158882 88.7978899,248.508269 93.693853,250.588302 C104.904435,255.569715 120.125653,256.359061 132.466893,255.879054 C140.637498,255.569715 148.85077,254.439031 156.904042,252.529667 C173.010587,248.700272 188.477137,241.734828 202.077034,232.070673 C216.658258,221.798509 229.330162,207.782285 236.327442,195.878095 C245.298041,181.733869 251.100664,165.861616 254.119308,149.552022 C256.839287,133.210428 256.711288,116.452827 253.063316,100.356569 C250.183338,85.4229975 242.492729,69.0387358 233.61813,55.8118579 L234.02346,56.2065308 Z'%3E%3C/path%3E%3C/svg%3E%0A\">"); Replace the fill color (#EB1D61 -- the PW pink color) with your own brand color if needed. Note: this is not tested on Safari (doesn't support svg favicons) so make sure to implement a proper fallback if that's important to you.

I've had to mod my UIkit to include more subdivisions for the grid. UIkit 3 also doesn't have push pull and a few other source ordering features. They sortof expect you to order and filter based on content but sometimes it is nice to be able to have content semantically and visually ordered differently. Not sure why Yootheme made this choice, as the feature existed in UIkit 2. You can do a lot of similar things with flexbox, but if folks aren't as familiar or comfortable with flexbox, it's way more complicated than how Bootstrap does it. I think UIKit decided to really enhance the flexbox usage. There isn't really an easy UIkit variation for things like .offset and .order

Ok I get the part of conditionally loading LESS files. I think you'd have to do that on your own. See https://github.com/baumrock/AdminStyleRock/blob/4e1c42f0d09e090687fa1df8fa1a8bcfe6c9d065/AdminStyleRock.module.php#L38-L53 how that can be done. But I don't get why you have different modules with different LESS files?! And do they all depend on each other, like do they share color variables or such?!

I still don't get the problem here. Could you please explain that in detail if that does not feel too off-topic? Isn't the uikit grid very similar to the boodstrap grid? Isn't it just a matter of syntax where you write uk-width-1-3 (=1/3) in uikit and col-4 (=4/12 =1/3) in bootstrap?

The grow feature looks promising. I know that in another thread we discussed the responsive font handling and I was hoping that I could use boostraps RFS feature for responsive fonts: https://getbootstrap.com/docs/5.2/getting-started/rfs/ I used this feature in my latest project. But it turned out in reality that some of my big headlines just did not shrink the way that I needed them to shrink. It resulted in ugly link breaks. So i needed to make custom font size adjustment via media queries (very oldschool nowadays it seems...) So can you adjust the "grow-shrink-factor" on this one? To control how much the font will shrink down once a breakpoint is reached? EDIT: Found a scale factor variable in the depths of the bootstrap files. Anyway I find this is an important value that someone might want to tinker with, it should be possible to adjust it via a value.

I am late to this party, just watched the video and I think it is great that a css based solution is possible. I started looking into this process to replace what I have used for many years to achieve this - not so much because of the issue of mobile versus desktop, but for the sake of container readability, which was why this library was created so long ago. https://simplefocus.com/flowtype If you look at how old this github repo is (2013) and the update to the readme pointing to css-tricks, you may think it is not worth the review, but there are a few things to consider and tuning metrics that really will effect the factors you take into account. The things that you will want to be able to easily tweak at the design phase revolve around the aspect of the webfont you are working with. Definitely not a one size fits all solution and if in particular you are looking at handling text in columns. https://simplefocus.com/flowtype/demo Perhaps you might find their font ratio math interesting - or another cat to skin. I do think that legibility - 45 to 75 characters - is a valuable CX guideline: http://webtypography.net/2.1.2 I look forward to playing around with the rfGrow feature.

New video is out ?

I liked the rendering idea for showing both desktop and mobile versions of projects. That's a really cool practical display for portfolio work. I need to think more about adding animation to sites more - the dynamics and mood it adds to sites really does make an emotional impact. Works very well in your case! GSAP is incredible. I've been playing with it in conjunction with lottie presentation and there's just a lot of cool control it offers for scrolling timeline effects. I still have folks ask about bootstrap and foundation along with uikit. I think all three have their benefits.

A great concise theme. Beauty in simplicity

The site looks stylish and concise. You have an excellent job

In terms of cleanup? Cleaner to leave it on the floor. I think the random commentary bubbles and stock are funny though. It's hard to spice up dry material like coding, but I felt like these video have a good pace - I've watched them all through.

This is great stuff - I love seeing how other folks work their process and it always gives me new approaches to try. I hadn't messed with latte at all before these videos (always got stuck using smarty and twig) but the simpler syntax looks awesome. Thanks for the work you've put into these modules and the videos!

Hm... Just had the idea that it would be nice to have the domain processwire.rocks for my channel with that name... My channel was created on 21.07.2022, the domain is taken by someone else and has been registered on 06.08.2022... coincidence? who.is leads to namesilo, which shows a "try to buy" button... https://www.namesilo.com/domain/search-domains?query=processwire.rocks that.sucks Any ideas for a better name + domain are welcome! I guess I'll have to register a domain BEFORE starting the next channel ?

Yeah it's hard to provide informations if you don't know who is watching... there might be total newcomers but some things might also be interesting for advanced users... Not sure how to tackle this... Hey @szabesz not sure what you tried, but I don't think that this can work. If you define a method as static you can't do object-related things inside this method. My IDE instantly throws an error: Static methods can be helpful for things like string-manipulations (eg Paths::normalizeSeparators()), but as soon as you need to work with objects (like pages and the wire object to attach hooks or such) you can't use static methods. I just did a little testing because having it defined static could have benefits, for example if there is no page created yet. In RockMigrations I solve that by creating a dummy page and saving it in the trash. Ugly but effective ? We could make the init static if we didn't use $this to attach the hook. But then we'd need to provide the wire instance as parameter (which is kind of clumsy imho). Also, we'd need to define the hook in a callback instead of placing it in a custom method of the pageclass (because we can't access the pageclass from a static method): So if we did all that, the init method would get quite bloated. Also I try to avoid defining hooks as callbacks, because they are harder to debug! See Tracy's "hooks triggered" section: That's the reasons why I put all the hooks in the pageclass's init() but make all of them a custom method in the class ?

Do you think it is better on the latest video? I didn't want to make it bigger... it feels so... strange ?

I have updated the initial post to suggest how to provide full context flexibility, including for repeater matrix items. See also