SASS Archives | portalZINE NMN | Development meets Creativity

2. December 2020

cubicFUSION Themes for Klaro!

“Klaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).”

The tool is developed by KIPROTECT and can be found on Github.

Black & White

As I integrated Klaro on a couple of websites so far, I decided to make my work a bit easier and start building some basic clean themes for it.

I have a basic white and black&white theme so far. The download includes a testdrive folder, to showcase the themes. The white theme is also used on this website ;)

I really hate those standard consent management modals, that integrate badly into the website native design.

Klaro does a good job allowing to override its core theme and makes it a bit more pleasant. We do have to live with those modals from now on ;)

The themes are Sass-based and provide easy configuration options.

Enjoy!

cubicFUSION Themes for Klaro! @ Github

Klaro! Tweaks

Klaro is still missing some things, will collect some workarounds here for you to play with.

Missing events for consent modal open / closed …

Updates: Github Discussion
– 0.7.10 also adds custom callbacks to services (onAccept, onDecline, onInit) NICE!

Used a simple MutationObserver to do some magic for now, without diving into the core Klaro code for now. I am sure they already have an event listener or watcher setup.

var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {
    console.log("consentModalOpen")
}, false);
	
document.addEventListener("DOMContentLoaded", function(e) {        

        var cm_target 	= document.getElementById( "klaro" ),
			cm_visible 	= false;	

        var observer 	= new MutationObserver(function(mutationRecords) {          

            if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){	
                cm_visible = true;
                document.dispatchEvent(cm_event);
              
            }else{
                cm_visible = false;
            }
        });

      observer.observe(cm_target, {
        childList: true, 
        subtree: true, 
        characterDataOldValue: true 
      });
});

var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {

console.log("consentModalOpen")

}, false);

document.addEventListener("DOMContentLoaded", function(e) {

var cm_target = document.getElementById( "klaro" ),

cm_visible = false;

var observer = new MutationObserver(function(mutationRecords) {

if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){

cm_visible = true;

document.dispatchEvent(cm_event);

}else{

cm_visible = false;

}

});

observer.observe(cm_target, {

childList: true,

subtree: true,

characterDataOldValue: true

});

6. November 2020

Welcome Dashboard with Gutenberg – cubicFUSION Admin Enhancer 0.2.5

What’s new / What changed ?

Admin Enhancer is the first free plugin released under the cubicFUSION brand. The plugin is still work in progress, but a tool that is already used within some of my client projects. I am using this plugin to centralise things I love & need, when sending out a finished website or project.

NEW: DASHBOARD GUTENBERG / DASHBOARD TEMPLATES
NEW: ADMIN TOOLBAR
UPDATE: SHORTCODES

Addons included …

This version includes a new addon “GUTENBERG DASHBOARD“, that allows you to build a White-Label Admin Dashboards using the Gutenberg Editor.

It integrates with the SHORTCODES addon and allows to drop in the dashboard widgets via its own Gutenberg Block.

The Block provides settings to overwrite CSS from the admin widgets, allowing you tweak them a bit — for better visual integration. The Dashboard template itself can be tweaked using CSS and Sass via SCSS now 😉

I am also releasing the first integration of the “ADMIN TOOLBAR” addon, which allows you to tweak some of the admin toolbar and footer options (Hide WP Logo, Hide Toolbar on Frontend, Hide Menu Items ..)

Already working on 0.3 … ENJOY!

cubicFUSION – Admin Enhancer
WordPress Repository

6. September 2019

Finally! GreenApe Shop goes live!

Together with my partners in crime (Dorit & Micha), we have finally opened our own personal online store.

We have been selling our single origin coffees (1st Single Malt Whisky Coffee, Basic – Single Origin Arabica, Kill me Quick Espresso -Single Origin Robusta), teas (Kräuterschorle – Kräutertee, Feuerkieker – Schwarztee) and rum (Fortune Teller – Double Aged Barbados Rum) using the Amazon Marketplace for the past 2 years.

No more Amazon

GreenApe has been a side project for the past years and I never wanted to deal with the maintenance of our own store. But its time to move on and do our own thing. Amazon has removed so many useful features over the years or added a new fee on top of other fees. Even though Amazon provides access to a large amount of customers, for small companies the fees build up quickly.

Our own

With our own store we can finally do bundles, coupons again and better optimized shipping. It will also allow me to better testdrive some new interesting features for my customers ;) Yeah its kind of my new toy or shopping lab! Its fun being able to work on untested new SEO features, structured data, merchant tools, shopping ads and tracking of all of those.

Locations

We have been selling in Germany for the past 2 years, but that might be changing in the future depending how well the new store shapes up :)

If you live in Germany, love good coffee, tee or rum … say Hi!

GreenApe – Makes Your Life Better
Homepage
Shop
Contact us

17. May 2019

CSS3 Animations with Special Effects.

A nice set of CSS3 Animations that can be easily used to spice up your design.

The animations can be triggered through Javascript, jQuery and the timings can be tweaked through pure CSS. The package also provides gulp, so that you can tweak every aspect easily.

Demo
Github

15. May 2019

A Helping Hand for Image & CSS Sprites

SPRITEOWL is a Photoshop extension that takes over the boring part of working with sprite images and CSS.
Retrieves x, y, width and height info of all sprite elements
Exports retina ready PNG files and required media queries of your Photoshop sprite file
Supports preprocessors LESS, SASS/SCSS & Stylus
Spriteowl
CSSOWL is a mixin library that works with Spriteowl.
LESS, SASS/SCSS & Stylus support
Open source
Cssowl

Two tools that can enhance your workflow immensely. Enjoy!

9. March 2018

Pretty checkboxes and radio buttons in pure CSS

Easily add beautiful checkboxes and radio buttons in pure CSS. Highly customizable via SCSS.

Basic
- Shapes – Square, Curve, Round
- Variants – Default, Fill, Thick
- Colors – Primary, Success, Info, Warning, Danger
- Color types – Solid, Outline
- Animations – Smooth, Tada, Jelly, Pulse, Rotate
Switch – iOS style – Outline, Fill, Slim
Responsive
No JavaScript
Custom Font Icons
SVG Icons
Image support
Toggle between icons / SVG’s / images
Lock
State – Focus, Hover, Indeterminate
Supports frameworks – Bootstrap, Foundation, Sematic UI, Bulma, …
SCSS customization
Supports all modern browsers, including mobile devices
Print friendly

  <!-- add class p-default -->
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Default</label>
        </div>
    </div>

    <!-- add class p-fill -->
    <div class="pretty p-default p-fill">
        <input type="checkbox" />
        <div class="state">
            <label>Fill</label>
        </div>
    </div>

    <!-- add class p-thick -->
    <div class="pretty p-default p-thick">
        <input type="checkbox" />
        <div class="state">
            <label>Thick</label>
        </div>
    </div>

<label>Default</label>

</div>

</div>

<label>Thick</label>

</div>

GitHub

23. January 2018

60+fps lightweight parallax for jQuery

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

See the Pen <a href="https://codepen.io/AldoFerrari/pen/JELBwJ/" target="_blank" rel="noopener">Parallax tilt effect, Tilt.js</a> by Aldo Ferrari (<a href="https://codepen.io/AldoFerrari" target="_blank" rel="noopener">@AldoFerrari</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.<br />

GitHub

30. August 2017

GreenApe is breathing again

After some downtime, GreenApe is breathing again. I revived the brand with a good friend of mine and we will be reopening shop options shortly.

Michael and I have been friends for a long time. We have been working on many different projects over the years.

He launched GreenApe in 2011 and I helped him with his first steps. A couple of months ago we decided to merge our competences and expand what GreenApe offers and stands for.

From the website: “The GreenApe brand was established in 2011. GreenApe’s career began with the 1st Single Malt Whisky Coffee.

As the first of its kind, our coffee is refined with Original Single Malt Whisky. To this day, he pampers many connoisseurs and gourmets with his unique taste. Now there is another reason to rejoice.

From now on, we are continuously expanding the GreenApe product world with several stylish gadgets and useful accessories. For you this means that you will be able to discover even more beautiful, special or practical things in the future.“

GreenApe is all about lifestyle & leisure products, fun gadgets and unique food & drinks.

14. May 2017

Lets fix the short comings of current CSS integrations – EQCSS / Element queries

“Element queries are a new way of thinking about responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser.
Unlike CSS @media queries, @element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains.
Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they contain.”

Element Query Conditions

11. October 2016

SpinThatShit is a set of SCSS mixins for single element loaders and spinners

SpinThatShit is a set of SCSS mixins for single element loaders and spinners.

<div class="your-loader"></div>

1	<div class="your-loader"></div>

.your-loader {
 @include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle);
}

.your-loader {

@include loader09($size: 10px, $height: 48px, $gap: 8px, $duration: 1s, $align: middle);

}

SpinThatShit

Black & White

Klaro! Tweaks

Missing events for consent modal open / closed …

What’s new / What changed ?

Addons included …

No more Amazon

Our own

Locations

Element Query Conditions

Width-based Conditions

Height-based Conditions

Count-based Conditions

Scroll-based Conditions

Aspect-based Conditions

Meta-Selectors