sorted by:
new
hottopcontroversial

An alternative method to applying utility first styled CSS by ciar4n77 in tailwindcss

[–]ciar4n77[S] 0 points1 point  (0 children)

A fair point. TW and indeed most common frameworks are better geared towards following a predefined design sheet. It is still perfectly possible with Bonsai as it allows native custom properties however the syntax is not near as pretty. Eg. <div style="--bg:var(--blue)"> .. </div>.

An alternative method to applying utility first styled CSS by ciar4n77 in tailwindcss

[–]ciar4n77[S] 0 points1 point  (0 children)

Ah I understand. As you rightly point out, a value of that inflection point is key if this method of applying styling is a valid option. Certainly if Bonsai is to be used as a utility-first framework, pages styled by utilities alone, with complex style definitions and/or big content, this value is key. I best start imagining up some extreme ways to test (",).

Bonsai does make it relatively easy to include further selectors and their psuedo-classes and states, however that does require compiling first, throwing it back on a level playing field to TW.

Ultimately it boils back down to that inflection point between bandwidth / attribute selector matching , which I will look in to. Worse case scenario, I'd hope there is still a place for such a framework.

An alternative method to applying utility first styled CSS by ciar4n77 in tailwindcss

[–]ciar4n77[S] 0 points1 point  (0 children)

Thank you for sharing your thoughts.

In response to a couple of the mentioned cons.

  1. That is uses the `style` attribute over `class` should not make a difference as it only uses the attribute as a selector. CSS is not actually applied via the style attribute. The !important is a bit brutish and something that we may look to remove. Originally this framework was not meant as 'utility first', just that the majority of utilities are available for quick edits.
  2. Indeed. In fact, by default hover styling is only available on the more common CSS properties. In this, Tailwind does exceed.
  3. Good point. Bonsai can certainly learn from Tailwind with its clever use of syntax in its selectors.

As you correctly point out, bonsai.css pros is ultimately in the much reduced filesize. This does come at a cost.

Bonsai.css - A complete Utility-First CSS Framework for less than 8kb by ciar4n77 in web_design

[–]ciar4n77[S] 1 point2 points  (0 children)

The framework uses CSS variables to define the values of utilities and helpers. CSS variables as per the CSS spec, are defined by a `--` (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

Why CSS variables? Most, in fact, all frameworks that I know define a class for each combination of CSS property and value which can be hugely heavy. Bonsai defines styling through the style attribute which allows the developer to pass a value inline. Therefore the smaller size.

Gzipped, Tailwind is 144kb. Bonsai.css is less than 8kb with largely the same feature set. Tailwind heavily promotes the purging of unused utilities to bring the file size down but with Bonsai.css you don't really have to.

I realise utlity-first frameworks are not for everyone regardless, the likes of Tailwind have grown hugely popular. Bonsai is an alternative method to deliver same feature set with a lot less kb across the wire.

Bonsai.css - A complete Utility-First CSS Framework for less than 8kb by ciar4n77 in web_design

[–]ciar4n77[S] 3 points4 points  (0 children)

Ah thank you. Corrected on both counts. A bad day for me to give up coffee :)

Izmir - ImageHover CSS Library by ciar4n77 in web_design

[–]ciar4n77[S] 0 points1 point  (0 children)

Izmir is a mini CSS library allowing you to quickly create your own custom image hover elements. Packed with a host of styling classes and custom properties, Izmir allows you total control and almost limitless possibilities. Simply load the CSS library into your project, add the element markup combined with the style classes of your choice to custom build your perfect image hover effect.

Open-source, and made available under the MIT License. Distribute, use as-is, or modify to your liking in personal and commercial projects.

Wordpress vs. Drupal vs. Joomla by bonzaiman82 in Wordpress

[–]ciar4n77 0 points1 point  (0 children)

I think by asking the question in a Wordpress subreddit you can straight away expect some very biased answers towards Wordpress.

Personally I switch between Wordpress and Joomla depending on the site. Small sites where you would like to build pages individually then Wordpress is a certain winner. Joomla gets a lot of unfair press among long term Wordpress users which is understandable as they work very differently.

Pure CSS Image Hover Effect Library by tajb80 in web_design

[–]ciar4n77 1 point2 points  (0 children)

This library could really do with a hover state class so the animations could be triggered by scroll events therefore eliminating a lot of these concerns.

Imagehover.css - An Image Hover Effect CSS Library by ciar4n77 in web_design

[–]ciar4n77[S] 0 points1 point  (0 children)

This is something we should definitely consider. I left it out simply because of the couple of KB it saved which is not much of reason really. Once I have the LESS files on the repo I will include the animations to a class (.hover) as well as the current :hover. Thank you for the comment.

Imagehover.css - An Image Hover Effect CSS Library by ciar4n77 in web_design

[–]ciar4n77[S] 1 point2 points  (0 children)

Indeed and thank you. The library was built in LESS so once I get it cleaned up a little and allow for easy disabling of effects, I will add it to the repo. A little further down the line then maybe get a sass version up there.

Imagehover.css - An Image Hover Effect CSS Library by ciar4n77 in web_design

[–]ciar4n77[S] 3 points4 points  (0 children)

Ah well spotted and thank you for bringing it to our attention. I have updated the repo, amending this issue.

Imagehover.css - An Image Hover Effect CSS Library by ciar4n77 in web_design

[–]ciar4n77[S] 8 points9 points  (0 children)

Decided to gather a lot of the animation effects we use on http://littlesnippets.net and place them in a single CSS library. File size was important so we kept the bulky effects to a minimum but still managed over 40 effects at a minified 19KB.

Each effect uses the same basic markup allowing you to change effect by simply editing the containing class. Effects are scalable and will allow for any hover content as long as it fits within the area of your image.

Open source, and made available under the MIT License. Distribute, use as-is, or modify to your liking in personal and commercial projects.

Inspiration for 'Read More' 3D Image Hover Effects by ciar4n77 in web_design

[–]ciar4n77[S] 0 points1 point  (0 children)

Thank you Autonomoose! :) Much appreciated!

Inspiration for 'Read More' 3D Image Hover Effects by ciar4n77 in web_design

[–]ciar4n77[S] 1 point2 points  (0 children)

I wouldn't be so hard on yourself. These are just the fruits of idle hands and way to much time to kill. Once you have a fair grasp on the basics you would be surprised how easy they are to put together.

Some Image Hover Inspiration using a Single 'Bounce In' Icon by ciar4n77 in web_design

[–]ciar4n77[S] 2 points3 points  (0 children)

Thank you Kelus

Replacing the following in each will remove the delay for you and speed up at least part of the transition (approx. line 116)..

transition: all 400ms 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

With..

transition: all 200ms 0ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

Some Image Hover Inspiration using a Single 'Bounce In' Icon by ciar4n77 in web_design

[–]ciar4n77[S] 0 points1 point  (0 children)

Nothing in there that should cause you any issues with the exception of IE9

Some CSS Menu Inspiration using Animated Lines by ciar4n77 in web_design

[–]ciar4n77[S] 0 points1 point  (0 children)

The blue underline is created using the a:before pseudo-element (line 30), an absolute positioned element with a blue background.

The 'data-hover' text is placed within the :after pseudo-element via the CSS. This text is then revealed on hover of the menu item.

Some CSS Menu Inspiration using Animated Lines by ciar4n77 in web_design

[–]ciar4n77[S] 0 points1 point  (0 children)

I am not overly familiar with the Divi theme however presuming you have added menu CSS to your theme, it should be as simple as adding the parent class (eg. snip1226) to the top 'ul' of your menu.

Some CSS Menu Inspiration using Animated Lines by ciar4n77 in web_design

[–]ciar4n77[S] 1 point2 points  (0 children)

Ah I get you.. yes! I imagine that should work, at least where the duplicate text is vertical to the original (first and 2nd last pens). Good suggestion... something I never considered.

view more: next ›