Header question and a two wishes (so far)

Question
1

Hey Duncan, hey all,

I tried Sparkle some time ago and for my needs it wasn’t sufficient. Wow, Sparkle has developed a lot since then. Well done. Right now I’m trying to redo my wife’s website (which I did in Rapidweaver) with Sparkle and I absolutely love the freedom in design, moving things around and creating a look that I want. That’s where other programs are quite restricted.

That said, I wonder how sparkle handles header tags (H1, H2 …). How do I know which titles or heading I use in Sparkle are transformed into certain headers tags. I might want to make sure that a title or a heading really reads as a H1 or H2 tag in html. Not that I’m html or css savy, but I know the basics.

Two things I’m actually missing or would love to see are:

Divider - a simple divider instead of using boxes and fiddle with them to get them look like a divider, which is a bit annyoing. It works, but wouldn’t a simple divider be easier? Or did I just miss that one?

While a lot of text properties are set per device, text alignment (left, center, right…) isn’t. That would be a great addition. I don’t always use the same alignment on all devices or screen sizes. Mostly left/center. Any chance you’ll add that?

And of course… even it it takes a while, a simple blog feature would be awesome :slight_smile:

Thanks a lot for your work, and if I find myself switching to Sparkle completely, I’m all up for a subscription to support you.

Cheers,
Darian

2

@pumpkin, If I understand you correctly…

  • Sparkle has a good grasp on header tags h1, h2, h3, etc… When you click on a text box that you have your header sitting in you will see you can also assign it a “HTML tag”
  • Although Sparkle doesn’t have a “divider” element you can try this neat hack… drag an “Embedded” element onto your canvas and stretch it out to the length of your imagined divider and then place <hr> (the html element for horizontal rule) and wallah, your divider line, plus you can style it
  • You can achieve your differing text alignments per breakpoint via your font style… you can have a left aligned p style set for your 960 and 768 breakpoints, and then for your 320 create a p style with centre align

And I’m also hanging out for the blog feature which I’m sure is on its way! :slight_smile:

Ok, good luck with it all…

1 Like
3

Hey Greenskin,

thanks for the reply. I‘ll check the html tag in textboxes when I’m home from work. That’ll help a lot.

The <hr> in an embedded element… gosh, why didn’t I think of that :grin:

Text alignment via font styles, sure. Will work. Easier though if it just worked automatically like all other text properties.

Maybe Duncan adds that in an update? One can hope :sunglasses:

Cheers,
Darian

1 Like
4

@pumpkin, my pleasure! :slight_smile: I’m happy to read that you are going all the way and not just launching a site in a desktop breakpoint only! Mobile now on average (55-70%) has it all over desktop.

So far I’m really happy and excited what I have been able to achieve with Sparkle so far and I love how we can now import a Sketch artboard! :slight_smile:

5

My html knowledge is very limited,

how do you style it? Thanks.
6

@lode.rosel, Well you can place the following in the window…

<style>
hr {border-top: 5px solid rgba(171, 60, 79, 0.5);}
</style>

<hr>

<hr> is the html, and what is in the brackets is your CSS styling, in this case the line thickness, the line appearance, and the RGB colour with A (opacity of “0.5”).

Ok, I hope it is of help! :slight_smile:

2 Likes
7

Yep, I got it! Thanks…:+1:

8

Is there an advantage with using “hr” over a “regular box”? Maybe advanced styling, but then you need knowledge of html, css… Or am I wrong?

9

@lode.rosel, no there isn’t any advantage only that @pumpkin was asking for another way.

I’m totally AOK in using “box” to create the dividing line, but I also think it highlights how versatile Sparkle is with its features at present! :slight_smile: