CSS styling of Buttons

[TheWebTech]

Our framework needs default buttons.

Get down and dirty - don't worry about bad code, don't worry about what others will think. If you take things in a direction and then others think there might be a better way to do what you're doing, they will improve upon what you're doing. But if no one ever starts, there wont be improvements, and there wont be buttons, and what site doesn't have buttons? ;)

I would say it's probably a good idea to look at frameworks like bootstrap or foundation and see how they do buttons, feel free to borrow some code(they're open source, it's cool).

https://foundation.zurb.com/sites/docs/button.html https://getbootstrap.com/docs/4.0/components/buttons/

If you don't have a HubSpot portal to build on first you could use codepen to create the buttons.

The basic minimum that could be done is to copy the code from another framework and call it a day, but it'd be more fun to see where you can improve upon something.

One thing to consider hubspot forms use the hs-button-primary class by default if I remember right, so it would be good to make it so the primary button style(no matter what you use as a class name, will also be used for that class)

example: 
<a class="btn-primary">button</a>
<button class="btn-primary">button</button>

.btn-primary, .hs-button-primary{
    //button styles
}

Inspiration:

• is there anything about buttons on frameworks like bootstrap or foundation that you don't like, or think you could do better?

• is there something you can do with HubL that might make creating buttons, their hoverstates or anything easier/faster?

• a common thing on websites is that they have multiple colors for buttons is there something that could be done to make it fast and easy to create variations of buttons?

[stefenphelps]

👍 added some. I like to style the button element and input[type="button"] the same way. Also added some commonly used classes to cover all bases.

[TheWebTech]

Nice, I'll look it over the PR today and probably merge today.

smart thinking on styling button and inputs that are buttons, I think people tend to forget that.

[stefenphelps]

Just throwing this out there: I typically prefer the simple simple-sassy-starter folder structure. It might be worth considering breaking down the single large stylesheet into multiple files to keep things a bit more organized.

[TheWebTech]

regarding the file structure and having multiple files. The multiple files idea IS something we're thinking about. HOWEVER one of the goals right now for this project is to work in HubSpot without requiring the user to use offline build tools. Thus any way we split the files has to be done via hubl or hubspot supported means.

We can include files but that has an annoying drawback, if you edit the child file you have to re-save the parent file. Included files also don't pass down their hubl vars and macros they only pass the rendered code. You can do an Import to pull hubl vars and macros in a file, but any css code in that file is not pulled into your new file.

One current thing we know we're doing is the grid itself will be separate from the visual elements and whatnot. One of the Pros to doing this is a custom module could then load the grid, on it's own. Making the module easier to build portable to other sites and sellable in the marketplace.

[TheWebTech]

Updating HS fixed the annoying drawbacks.

If you'd like to weigh in on the file/folder structure, see #22