Uikit 3 is underway!

[Mike Rockett]

https://getuikit.com/docs/uikit3.html

I like what I see.

[Zeka]

Yeah, UKit has a lot of cool components. Just hope that it will be build with mixins and functions in the same way as Foundation is built, so we can make our markup more semantic.

[AndZyk]

The beta of UIkit 3 is out now. 

Sadly there is no Sass version yet, but I think it is on the way.

[szabesz]

https://getuikit.com/v2/

It is hard to believe that they just replaced the frontend of the old site at this beta stage. The new docs looks alpha and is rather hard to read too. I hope v3 will be a great success, but this is such a dumb launch  

[3fingers]

Honestly I'm disappointed on what I see on UiKit3 release. I personally find it as @szabesz said as an "alpha" release... As an example : no more 12 colums for the width component (just 6...what?!), confusing grid classes (at least for me, but it's something I can learn quickly) and no sass version....

[LostKobrakai]

It's still a beta release and I'm not sure why they should worry about a sass version as it's ever been a less project and it's not yet a stable release. But the marketing strategy of replacing the whole website at this stage truely is strange.

[tpr]

I don't use such frameworks for some time now so I wasn't too excited seeing the features for v3. To be honest I'm not very happy that PW is about to use UIkit in the admin though I understand it is about to simplify module developers' life (most of them being no CSS ninjas ).

[szabesz]

28 minutes ago, tpr said:

to simplify module developers' life (most of them being no CSS ninjas ).

To pick a capable "Bootstrap like" framework is not just about supporting non-CSS-ninjas, it should be more about teamwork support. An easy to use, reasonably well documented framework is something everyone can pick up easily so more contribution can be expected in this regard. UIkit v2 seemed to be a good choice, however at this stage I'm not so sure about v3, but let's see what the future holds  After all, it is still "beta".

[LostKobrakai]

1 hour ago, tpr said:

To be honest I'm not very happy that PW is about to use UIkit in the admin

Where did you pick up that information? 

[tpr]

Ryan mentions UIkit in his comment here but reading it again he is only considering this.

[AndZyk]

20 hours ago, szabesz said:

It is hard to believe that they just replaced the frontend of the old site at this beta stage. The new docs looks alpha and is rather hard to read too. I hope v3 will be a great success, but this is such a dumb launch  

Here is a more detailed blog post about the release of the Beta with an explanation, why they launched UIkit 3 this way.

In my opinion the docs are already good, but if you don't like them, you can report an issue on the GitHub repository of the docs. 

10 hours ago, 3fingers said:

Honestly I'm disappointed on what I see on UiKit3 release. I personally find it as @szabesz said as an "alpha" release... As an example : no more 12 colums for the width component (just 6...what?!), confusing grid classes (at least for me, but it's something I can learn quickly) and no sass version....

The width component is new in UIkit 3 (see the blog post), but if you meant the grid component, in UIkit 2 it only had 10 columns max. That is still more than 6, but personally I can't remember any use case for such small columns.

9 hours ago, LostKobrakai said:

It's still a beta release and I'm not sure why they should worry about a sass version as it's ever been a less project and it's not yet a stable release.

Yes, it is a Less project, but they had support for Sass since 2.11.0. They also said it is planned, but not done yet.

9 hours ago, tpr said:

I don't use such frameworks for some time now so I wasn't too excited seeing the features for v3. To be honest I'm not very happy that PW is about to use UIkit in the admin though I understand it is about to simplify module developers' life (most of them being no CSS ninjas ).

As already mentioned, picking a framework isn't always about being lazy or trying to avoid custom code, it can be about finding common components for every contributor to make contribution much easier.

I would welcome if ProcessWire would implement UIkit as framework for its back end. 

[szabesz]

Hi UIkit 3 users 

In v2 there used to be a file called uikit-variables (actually two files, a less and a sass version).

I liked it this way, because I could simply use my text editor's find all feature to look for what I was interested in. In v3 all the variables are declared in separate files found in the components directory.

So I hacked together a simple bash script to collect all the variables in a single file, just for reference purposes, so that I can still do my search in one file only. Should anyone want to do the same, please feel free to use it:

#!/bin/bash
# Author: Szabesz, release date: 2017-01-12
# Use at your own risk!
# Purpose: This script collects all the variables used by UIKit 3
# Configuration: adjust the variables called SOURCE_DIR, TARGET_DIR and FILE_NAME
# Usage: run the script and find the result in the generated output file: $TARGET_DIR/$FILE_NAME
# How it works: it finds all the 'less' files we need in the folder called 'components' (specified by $SOURCE_DIR)
#               then grep filters all the lines beginning with @
#               in each line, the first occurrence of ':' is replaced with ': ' by sed, so that we have some extra space
#               finally lines are outputted into a file
# Known issues: tested only on macOS 10.11 and Bash 4.x
#               @media queries are also included, but I consider this to be an added bonus :P
# Credits: https://getuikit.com/

set -e;
printf "Collecting all variables used by UIKit 3...\n"
SOURCE_DIR="/path/to/uikit/src/less/components"
TARGET_DIR="/path/to/target/folder"
FILE_NAME=_UIkitVars_$(date "+%Y-%m-%d_all.txt")
cd $SOURCE_DIR
if [ -f $TARGET_DIR/$FILE_NAME ]; then
	rm $TARGET_DIR/$FILE_NAME
fi
find . -type f \( -iname "*.less" ! -iname "_import*" \) | xargs grep -E "^@" | sed 's/:/: /' >> $TARGET_DIR/$FILE_NAME
printf "End of script has been reached :)\n"
exit 0

 

 

[szabesz]

UIkit 3 Beta Roundup

Quote

Yesterday, we just released the 21st beta version. We want to take this opportunity to highlight some of the additions and changes from the last few releases.

https://yootheme.com/blog/2017/04/12/uikit-3-beta-roundup

[pwired]

Are you guys using uikit both for web interfaces and web site front ends ? So for web site front ends the next question would be: is uikit better than bootstrap ? Digged with Google but would like to hear from you guys from the field directly.

[szabesz]

4 minutes ago, pwired said:

is uikit better than bootstrap ?

Well, you know it all depends  I prefer UIkit 3 to Bootstrap 3/4 because UIkit 3 is more lightweight and more versatile regarding customizations, and for me it is easier to use.

[Zeka]

I like UIkit, but current I stick to Foundation 6 because of its mixins nature.

[horst]

On 12.1.2017 at 1:12 PM, szabesz said:

Hi UIkit 3 users 

In v2 there used to be a file called uikit-variables (actually two files, a less and a sass version).

I liked it this way, because I could simply use my text editor's find all feature to look for what I was interested in. In v3 all the variables are declared in separate files found in the components directory.

So I hacked together a simple bash script to collect all the variables in a single file, just for reference purposes, so that I can still do my search in one file only. Should anyone want to do the same, please feel free to use it:

The result should be something like this: _UIkitVars_2017-01-12_all.txt.zip

 

 

@szabesz but the files are there. You have to look at uikit/src/scss/variables.scss or less instead of scss.

[elabx]

On 4/12/2017 at 4:35 AM, pwired said:

Are you guys using uikit both for web interfaces and web site front ends ? So for web site front ends the next question would be: is uikit better than bootstrap ? Digged with Google but would like to hear from you guys from the field directly.

Using it for website design, overriding styles all the time. I kind of have liked that you have must buzzword components right at hand, ready to integrate, so when a clients asks: oohhh those nice backgrounds that move around when you scroll, DONE, ohhhh I want all this animated like a disney movie, DONE and so on... I have found some things that I need to hack around but in a much less percentage than Bootstrap, at least in my experience. 

Though a fellow I am working with now has really spoiled me into noticing that writing your own CSS isn't that hard and just makes less work than reverse engineering a framework.

[SamC]

On 12/04/2017 at 9:41 PM, elabx said:

Though a fellow I am working with now has really spoiled me into noticing that writing your own CSS isn't that hard and just makes less work than reverse engineering a framework.

I'm in the opposite camp recently. I've been writing my own CSS for about a decade (I don't like using 'grid-4-is-4-columns' and all that in my HTML, I prefer class names that describe the contained content, then style them out in the CSS).

However, this is becoming too time consuming for exactly the reasons you mention above, want some parallax, I have to go find a jquery library, then some custom css, the bootstrap guys are already having a tea break 

Maybe the grass isn't always greener, but I have to try at least one proper framework to make a fair decision! Currently looking at uikit and bootstrap 4 (yes, I know this means adding a bunch of dumb sounding classes all over my HTML).

[elabx]

3 hours ago, SamC said:

I'm in the opposite camp recently. I've been writing my own CSS for about a decade (I don't like using 'grid-4-is-4-columns' and all that in my HTML, I prefer class names that describe the contained content, then style them out in the CSS).

However, this is becoming too time consuming for exactly the reasons you mention above, want some parallax, I have to go find a jquery library, then some custom css, the bootstrap guys are already having a tea break 

Maybe the grass isn't always greener, but I have to try at least one proper framework to make a fair decision! Currently looking at uikit and bootstrap 4 (yes, I know this means adding a bunch of dumb sounding classes all over my HTML).

My "uk-margin-almostlikeyouwantit" filled divs are looking at your comment and laughing at me haha. 

 

[SamC]

21 minutes ago, elabx said:

My "uk-margin-almostlikeyouwantit" filled divs are looking at your comment and laughing at me haha. 

 

Lol, maybe not, my styles.scss contains stuff like:

/* Services page */
.services-flex {
    text-align: center;

    @include media("<tablet") {
        .services-item-image {
            img {
                margin-bottom: $base-spacing * 1.5;
            }
        }
    }

    @include media(">=tablet") {
        display: flex;
        flex-wrap: row nowrap;
        justify-content: space-between;
        text-align: left;
    }

    @include media(">=tablet") {
        .services-item-image {
            flex: 1 30%;

            img {
                height: auto;
                max-width: 100%;
            }
        }

        .services-item-summary {
            flex: 1 60%;
        }
    }

    .even & {
        flex-direction: row-reverse;

        .services-item-image {
            @include media(">=tablet") {
                text-align: right;
            }
        }
    }
}

...which becomes a pita if I want to change a layout and when I go back to it after a few months, it takes awhile to work out what does what. Starting to think 'uk-myclass-does-some-alignment' is the lesser of two evils here.

Looking at ui-kit now, and trying to work out how it would fit into my node/gulp/gulp-sass way of working.