Do you use CSS Grid?

Bravo! I deleted the empy-placeholder class and now they render within pg. I was going crazy about this but as in the browser preview mode they would show i did not look for this cause any further. I though the moment you give it a class the empy-placeholder thing was automatically dumped by pg.
About the image size, yeah, i should do that.

building flowers palm

here you go, little pictures for you :slight_smile: 500 px

Cheers for eating my bandwidth :wink:

your originals are big enough to project onto the surface of the moon and still see from Earth!
:slight_smile:

likeā€¦
the Palm leavesā€¦ 4925 Ɨ 3398

do they even make screens (or Cinemas?) that size?
<3

oh yes, and these are .png files, so you will also have to change your imageā€™s files extension from .jpg to .png in your css classes! sorry,
Just incase that is driving you nuts or didnā€™t notice.

My bad.

1 Like

aaaand another bug!

gah!

This time I simply tried editing the file extension from .jpg to .png in the styles viewer on the top right.

For some reason this did NOT reflect or save the in the actual CSS file code.
Ie

(Also, I removed the 2 , br tags in your H1 heading as I donā€™t think this is correct /required and it still renders nice with your css grid :slight_smile:

ā€¦although I STILL cant get display:grid to display in the Pinegrow visual style editor.

So im hunting that down nowā€¦

See? I only wanted to put the palm leaves In a circular div! :slight_smile:
This is why everything takes me soooo long.

Ok! I found it. Have no idea what it was, but basically I had to shut and re open Pinegrow!

THEN it rendered with display:grid in the visual editor.

You might want to copy your original site and send it to info@pinegrow.com
Because it manages to break Pinegrow.

Well done! Iā€™m proud of you!
it might just be a double body tag that does that
I will experiment now

ā€¦nope I have no idea.
maybe it was the massive imagesā€¦that caused a gravitational anomaly in the RAM and sucked all the Grid Classes into the images foldersā€¦ :wink:

Ta Da !!

This is all I wanted to do :slight_smile:

ah, I prefer this, although slightly more cluttered in pulls the heading into the two greens.

ah! I followed the advice on here

and then got this :slight_smile:

As the leaves were a bit noisy under the headingā€¦ and detracted from the text.
N.B.

I donā€™t quite understand the explanation of getting rid of the border but if anyone can, could you show how to do that please?

Cheers :slight_smile:
That would finish what I wanted to achieve by way of modifying your fine site :slight_smile:

UPDATEā€¦ I couldnā€™t help myself :slight_smile:
thanks @red-rosefields, I really like this layout of yours, what do you think of it with this text colour from your flower image? I think it really worksā€¦

I had to create a new class to specify the final nav item to be the green off your dot class, in order for it to not get lost in the flower image - it also ties in the other 2 green elements with a tiny 3rd! :slight_smile: for counter poise, as well as the 3 major pinks in triangular shapes and the 2 balanced, central white texts.

Cheers, this is great fun. I will check out your actual grid layouts tomorrow. I need to spend some time digesting it. thanks for sharing this.

Hey, glad you enjoyed it. I had fun too. Just learning how pinegrow works. Nice customization.
If i have time i will try to replicate another site this time maybe injecting some basic js. I want to add some kind of interaction.
Here is an article i found interesting to read. 3 minutes reading time.

oooh nice!

now imagine this

with your Navigation links , on those shiny sides, separated by shadows.
Excellent!

I might try that.
We (me and @Printninja and @Thomas) were talking about such things , and 3D designs just the other day.

CSS coloured/shaped layouts, with deep shadows, and a nav layout overlaid upon that with css grid.
now THAT could be an interesting project :slight_smile:
Cheers @red-rosefields

1 Like

As a designer, I donā€™t feel the vignette works with the overall design. Iā€™d rather see something like thisā€¦

1 Like

Yah ,thats pretty funky too. I do like that.
I just fancied the phased out look of that in contrast to the blockyness of everything else, but actually, in keeping with the blockiness, your design works better and its half circle, half squareā€¦oh quarters, if one would wish to be a pendant, so sits nicely between those other shapes in the design.

Yes, this works and breaks it up nicely.
Im playing with a 3d cube at the momentā€¦ which means I should be sorting out the electrics in my truck of courseā€¦and cookingā€¦and eating. and andā€¦ all that other yawns ā€¦stuffā€¦

mmm actually, how did you get the corner effect with the css?
or is it an image of a quarter of a circle in a standard image square space?

MMmm I wonder what that would look like with the Palm leave reversed, so the quadrant shape still pointed the same way , but the leave pointed out with smaller leaves towards the corner with a call to action kind of pink button bottom right.

NOT to detract from the overall CSS GRID purpose of this thing, just wondering.
This is fun :slight_smile:

1 Like

Iā€™ve read that article a couple of times. I think the author is having a bit of trouble seeing the forest for the trees. For example, Google is going all in on their AMP project, once again forcing website developers to do all sorts of contortions to rank highly in their algorithm. It kind of annoys me that Google has come to hold so much sway over how we developers do things. Users have become absurdly impatient (a vice I donā€™t mind pointing out) so Googleā€™s attitude is ā€œWE MUST INDULGE THEIR IMPATIENCE!!!ā€ and put the screws to the devs. Build pages how we decide, or risk being banished to the ignominious realm of page two of the SERP!

Meanwhile, how many people were willing to wait ten to twenty seconds for a rich Flash site to load back in the early 2000ā€™s just to enjoy the aesthetics and interactivity? I remember some websites for big blockbuster films that were almost like mini-video games in their sophistication, and those sites were actually FUN to explore.

Then there is the obvious reason why this hysterical emphasis on speed and minimalism is pointless. In a few years, 5G will become ubiquitous, and downloading twenty megs of site content will take less than a second. Even if human attention spans have dropped to three seconds ten years from now, thereā€™s a limit to how fast people can absorb content. As it stands, people leaving a page that doesnā€™t load in three seconds isnā€™t about waiting four or five seconds, itā€™s about gambling on an investment of time. What if the site doesnā€™t load for twenty seconds, and then it turns out that every page is equally slow. Thatā€™s why people leave slow loading sites.

Nevertheless, I think a site should at least present a fully loaded page in no more than six or seven seconds. Thatā€™s not unreasonable. But the actual speed at which a site loads today is going to have virtually nothing to do with how fast it loads five or ten years from now (if we still have websites ten years from now.) Googles push for Accelerated Mobile Pages reminds me of the obsession we all had with optimizing storage back in the late 1980ā€™s. There were systems that compressed and decompressed every byte of data being written and read from a hard drive just to maximize the space since storage was so absurdly expensive. Then storage got super fast and super cheap, and now nobody really gives a damn about file compression. Sure, we still use compression on images and videos, but even this will eventually fall by the wayside. Compression is a compromise in quality, and the move will always be towards not compromising.

The same will come to pass for websites. Eventually, nobody will be obsessing over whether the HTML and CSS files are minified, because the few nanoseconds it will save will be imperceptible.

Oh, I didnā€™t go near the code. I threw that together in Photoshop in 10 seconds. As much as I enjoy finding novel coding solutions, most of the time I prefer the path of least resistance.

1 Like

Fantastico Printninja! Merry Xmast all of you!

1 Like

Hey all, hope everything is good.
Now, I just started working on this new project and of course i am using the css grid. So I created a 16x16 grid and bang! this is the main issue (let me call it like this pls) The grid editing panel becomes almost unusable, very heavy and slow. Still without creating anything yet but the grid itself the PG grid system setting feels like glued . Creating a column or deleting a row takes years after you have clicked and so like this. I am running PG on a fairly good machine. I7 5th with 16gb ram. Old but never this slow.
Could anyone out there create a 16x16 grid and tell me how it feelsā€¦
Many Thanks plp!

@red-rosefields Can you please send us your (full) project folder at https://pinegrow.com/contact-us/ ?

Thanks a lot.

Thanks you very much!
Email sent.
In the meantime i will try uninstalling/reinstalling PG.

Hi there,
My problems are my fault because of my external screen make confuseā€¦

evangelizing for css gridā€¦ well done.

iā€™m his kid in the back of the room reacting to divitis, " why would you EVER do that?!? "

pull yourselves up by your ā€œbootstrapsā€ and lets make a better web.

i think maybe itā€™s not so much a matter of ā€œneedā€ as it is a matter for survival.

like we all need to become vegan, kind of thing.