Jump to content

Uikit 3 is underway!


Mike Rockett
 Share

Recommended Posts

  • 2 months later...

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.

  • Like 2
Link to comment
Share on other sites

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 :)).

Link to comment
Share on other sites

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".

  • Like 1
Link to comment
Share on other sites

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. :)

  • Like 1
Link to comment
Share on other sites

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

 

 

  • Like 4
Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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 :lol:

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).

  • Like 3
Link to comment
Share on other sites

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 :lol:

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. 

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...