3fingers

Uikit Pw Themes

5 posts in this topic

Hey all,

yesterday evening I started playing with the new uikit admin theme and I have to say I really like the way @ryan has developed it, it's relatively easy to modifiy it further.

It took me around 10 minutes to prepare the development pipeline (from installation, setup the build processes and grasp the directory structures), so I highly encourage every designer in here to get their hand dirty and start without any fear :D

I'm going to post in this thread my progresses, since my will is to dedicate every evening 1 hour or so with the purpose to release a visually pleasing and stable admin theme.

If you want to post your progresses in this thread too, you're welcome!

13 people like this

Share this post


Link to post
Share on other sites

Just a little progress I made, there is (of course) a lot of work to do and several tweaks, but it's a starting point :)

 

page-edit.PNG

root.PNG

3 people like this

Share this post


Link to post
Share on other sites

I agree! I was playing around with the styles the other day for about 20 minutes to create a "calm" version, not yet finished, but see the screenshots. 

 

home.png

edit.png

4 people like this

Share this post


Link to post
Share on other sites

body {filter: saturate(0)}

img {filter: saturate(1)}

calm version the quick way :)

2 people like this

Share this post


Link to post
Share on other sites
5 minutes ago, tpr said:

body {filter: saturate(0)}

img {filter: saturate(1)}

calm version the quick way :)

Oh yeah, it can be done such way. I used this approach to create a dark version in the past. :) 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By AndZyk

      This is a minimalistic website for the german architecture office Weissenrieder Architekten BDA. The front-end uses UIkit 2 and Isotope for the projects overview. Every project category can be accessed in the overview with an URL segment. ProFields Table was used for the project detail view.
      www.architekt-weissenrieder.de
      Modules used:
      AdminThemeUIkit Table ProCache Markup Sitemap XML Email Obfuscation (EMO) Jumplinks Tracy Debugger Regards, Andreas
    • By Jozsef
      Hi everyone, I'd like to start a conversation about your view and practices for profitable web design and development (unless there is already one that I didn't find). I use ProcessWire for most of my sites currently.
      Wherever I look though I can see plenty of web design freelancers and even larger agencies running exclusively on WordPress and themes. Many people are running "web design" businesses even without any development skills. There are just so many that I started to doubt if that's the way to go.
      - Do you use Wordpress + themes to cut cost and increase your bottom line? If yes, what is the middle ground? Is it worth to put up with WP?
      - If not, what alternatives you use for micro/small businesses?
      - And finally, how do you use ProcessWire to speed up small, basic brochure websites?
      Clients care more about budget and results than "custom" design. I love working with ProcessWire but only if it doesn't mean lost opportunities.
      Any opinions are welcome, especially from those of you who are advocates for themes yet are skilled developers.
    • By hansv
      Ryan has opened my eyes with his skyscrapers2-demo.  Uikit is really a fantastic frontend-framework.  My question is about  scrolling uikit-side-nav and the pw-code to use for the content.
      Is it possible to realize a scrolling nav-side-bar as the uikit-layout-example: https://getuikit.com/docs/layouts_documentation.html ?  The scrolling-bar should show the headers for example h3 en h2 of the body-part of the page When scrolling down the page, the headers in the sidebar, e.g. h3 h2, show where you are in the page.

      Can anyone show me the way to the code to trigger e.g. the h3 and h2 headers?
    • By blad
      Hi everyone  
       
      I´m creating an AdminTheme based on Semantic UI framework. Here is the beta version. I 'm fixing bugs.
       
       
      Github here

       
      Changelog:
      0.0.1 --- Fixed background color / image.








    • By GuruMeditation
      Hi all,
       
      I'm working on a project which will be using UIKit for the frontend framework, and the front page will display images that are attached to various pages. I'm using CroppableImage to generate the thumbnails. The idea is that clicking on the thumbnails will display the original image in UIKit's lightbox. The problem is that I can't get the lightbox to work.
       
      My simplified code......
      <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="<?php echo $config->site_meta;?>"> <title><?=$config->site_title;?> | <?=$page->title;?></title> <link rel="stylesheet" type="text/css" href="<?=$config->urls->templates;?>css/uikit.css"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="<?=$config->urls->templates;?>js/uikit.min.js"></script> </head> <body> <?php $items = $pages->find("template=link_full, limit=10, sort=-f_date"); foreach($items as $item) {    $image = $item->f_multi_image->first()->getCrop('frontpage');    echo "<article class='uk-article'>            <a class='uk-thumbnail' href='{$image->url}' data-uk-lightbox title='{$image->description}'>            <img src='{$image->url}' alt='{$image->description}' />            </a>          </article>"; } </body> Now, I've added the "data-uk-lightbox" attribute as it states in the docs http://getuikit.com/docs/lightbox.html but I'm at a loss after that.

      Any help?