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?

The grid, while it's column count, should be 12 by default, it's easy to make it support any number, we should enable that in-case someone say wants a 16 col grid.

I would add the variable definition for how many columns, within the theme-variables.css file.

The file to update is cs-grid.css (there's code generating the column css, we need to change it to use the variable.

Create module or include that automatically handles generating the social profiles structured data.
https://developers.google.com/search/docs/data-types/social-profile

This would be possible to generate all in HubL using the linked accounts in HubSpot.

May have to loop through follow_me() but atleast some of the data can be pulled to generate this making it automatic and easier to do.

This feature however should be optional, toggled by a boolean in theme-settings.css

This feature depends on a lot of other things to be in place, not least of which is a default template.

In an effort to make the variables universally useful we need someone to add a hubl import for the theme-variables.css and theme-macros.css to all css, js and .html files.

This will enable developers to reference any of the variables.
This will also enable developers to use the macros in their code.

In the end this page should exist on the documentation site(#21), but I think building it on the wiki in the mean-time is okay.

Ideas for best practices.

All custom modules should have an outer wrapper element.
Outer wrapper element should have a class name that ends with -module. Example:

<div class="cool-interactive-module">
<!-- module contents -->
  <div class="page-center">
    <!-- cool interactive stuffs -->
  </div>
<!--/module contents-->
</div>

This keeps a consistent structure to modules which makes it easier to theme modules to a site. (site agnostic module approach)

Perhaps having a class for denoting a crankshaft compatible module is a good idea.
(that way people could create say a module that would interact with other modules by selecting modules with that class for example.)

Consider making it optional via a boolean.
https://github.com/TheWebTech/CrankShaft/blob/master/CrankShaft/code/cs/cs-grid.css

Part of #8 basically. The gist is let's update the css to use HubL to loop through generating the classes. Otherwise this is going to be tedious to update/maintain.

https://github.com/TheWebTech/CrankShaft/blob/master/CrankShaft/code/cs/cs-grid.css#L441-L2532

What is required to get CrankShaft to 1.0 stable status?
Progress is being tracked using the 1.0 Milestone

Throw out your wildest ideas for how Custom Modules could be encorporated into the framework.

My thoughts - the framework should have atleast a few base custom modules that come with it, the sort of things every site has, and kind of have a best practice structure that would make it easy to build modules that are compatible with the framework or build off of it.

Line 350 of the cs-grid.css file.

In order for people to be able to use CrankShaft there needs to be documentation explaining how to use it.

Let's talk about what the best way to implement this is.

If we were to do a GitHub pages site, all of our code would have to be precompiled since HubSpot can't process it there.

We may be able to use a Developer sandbox site for Demos of compiled code. Chad Pierce and I discovered you can share access to a developer sandbox site. So a possible idea is use a github pages site for the actual documentation site, and the sandbox site to show the output of code examples. (sandbox sites can't have domains without being upgraded.)

One of the goals of the documentation site should be that it should be able to be open sourced, so people can contribute. It can also be simple. I'd be fine with using a github pages theme and someone can design something cool later.

Thoughts?

Any reason to keep recommended.css still?

I can honestly say I never use this.

Do you guys? if a significant amount of people use it we can leave it in. I just think it's probably not well used.

Every big project needs a banner to fly. If you have great design skills or atleast want to be apart of the process of picking a Logo. Chime in here.

If someone has replied that they want to contribute their design skills, that does not mean you cannot. If we get multiple submissions that makes things easier and we can choose from the best.

Things to keep in mind - This is not an official HubSpot Repo, we do not own any of their copyrights or trademarks. That does not mean we cannot keep a visual theme.

If you want to design a logo for CrankShaft you can do so either by submitting a pull request with your logo files OR by posting the logo to this issue.

Once #33 and #32 are done we can add a markdown file to /docs called layout, to explain how to use the grid. Anyone feel free to hop on this.

The grid is based on bootstrap so we should be able to use similar language. Just please don't copy their wordings verbatim. It is fine to give credit and state that the grid in CrankShaft is inspired/based on Bootstrap 4's grid for familiarity and easy of use sake.

implementation issue is #36

We need to add documentation for adding lazyloading to a site.
We're using native browser lazyloading with a fallback.

https://addyosmani.com/blog/lazy-loading/

<img data-src="dogs.jpg" loading="lazy" alt=".." class="lazyload"/>

<script>
  if ('loading' in HTMLImageElement.prototype) {
      const images = document.querySelectorAll("img.lazyload");
      images.forEach(img => {
          img.src = img.dataset.src;
      });
  } else {
      // Dynamically import the LazySizes library
    let script = document.createElement("script");
    script.async = true;
    script.src =
      "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js";
    document.body.appendChild(script);
  }
</script>

Working to narrow down the scope of the project to make it easier to maintain, easier for people to wrap their head around. Easier to build sites without feeling too much like someone forced a way of working onto you.
https://github.com/TheWebTech/CrankShaft/blob/master/MISSION.md

Upvoting this idea will dramatically help CrankShaft's development, please upvote to show HS devs we want this.

Idea Forum: https://community.hubspot.com/t5/HubSpot-Ideas/Allow-for-Design-Manager-Design-Tools-to-be-connect-to-a-GitHub/idc-p/269045

Slack: https://hubspotdev.slack.com/archives/C26E7JT8V/p1557326074074000

Creating this as an issue to make this easier to track and collaborate on.
We want to take just the grid part of Bootstrap, and pull it into a css file that can be used on hubspot, ultimate goal being that we could use HubL to change some of the things that currently have sass variables in normal bootstrap.

minimum viable thing would be to just have the straight outputted CSS for the grid in this repo. Super awesome bonus would be having some hubl vars - not required though.

Even more awesome- if any of the css that's repetitive used hubl to generate it, making it easier to maintain. not required at all though.

Mark Ryba and AJ feel free to assign to yourselves too when you join. We can all collab on this.

Unfortunately HubSpot doesn't currently allow us to create or modify Drag n Drop templates via FTP. That means we can't store DnD templates in the repo.

We need to document a process for creating a DnD template so people can have one if they want to use it.

Basically this should just be linking up the assets. Not dictating the actual layout blocks.

So I was thinking about - how can we build this framework in a way that takes advantage of HubSpot's platform and the way Design Manager 2 works.

One idea I had was - what if we separate the grid css from the rest of the styles completely, so it would be it's own css file.

Here's the thought behind it. Say someone wants to build a custom module, and they want to take advantage of the grid within the custom module. If they take advantage of it for the module, then the module is no longer self contained, it requires anyone installing it to use this theme. If it's done as it's own file it can be set as a dependency for both the template AND the modules.

That way the grid is only loaded once - the module is re-usable across sites(great for the marketplace).

Then it also allows people to easily grab just the parts of this framework they want. Some people might not want default styling for elements or even the HS default modules, but they want the grid. This way they can do that very easily.

Add CSS to the buttons for a disabled state. This indicates the button is disabled/will not do anything when clicked.

CSS pointer-events:none; can be used to make an anchor link not clickable

Not a requirement to implement as most people would probably use JS or HubL to add remove the href that but that's kinda cool

Basic jist, create a super bare bones custom module, based on any ideas from #40 it can be updated later as we come up with more best practices or ideas.

It can be as stupid simple as just having the html pane have content, with just a div wrapper and that's it.

We'll expand on it as we go.

To do this someone could create the custom module in the design manager and use FTP to download it into the /modules folder of crankshaft.

Think Minimum Viable Product here. What UI components should be included in the framework. These things should not be heavily styled, just adjusted enough to visually look good.

Before someone goes "oh gosh bloat incoming" remember these can be made optional very easily.

https://foundation.zurb.com/sites/docs/kitchen-sink.html
Think components like accordions etc.

OR can you think of a way that it'd be possible to use components of an existing framework INSIDE CrankShaft in a flexible way.

Create simple but visually decent table element styling. I suggest making a codepen and trying to build out a table there so you can see what you think. (if you do make a codepen, please share it here so we can see it)

This task is for specifically base table styling.

Mobile, modifiers and any other special functionality can come later, don't worry about that right now. We just need base table tr td thead type styling set up. If you WANT to do more go for it, it's just not expected.

All of the styling for the table element can go in cs-defaults.

If you want an example of what this could look like
https://getbootstrap.com/docs/4.0/content/tables/
https://foundation.zurb.com/sites/docs/table.html

Let's envision the file structure for CrankShaft from the ground up, completely disregard any existing boilerplate files, those can be restructured. This is my initial thought for how the files could be structured.

• theme-settings.css - contains all variables and macros. imported into theme.css and other files

• Theme.css - master CSS file that uses includes to optionally include grid or defaults, and be the main place a dev works in when building out a site

• Theme-module-customizations.css - modules are made site agnostic by default, any site specific styling to those modules could go here. this would be the second primary place a dev will edit during build out of site.

• /CS/ - crankshaft specific files go here. These files would be ones devs wouldn't want to touch directly

  • /cs-grid.css - Grid CSS isn't directly modified by user, can be referenced by Modules & company theme
  • /cs-defaults.css - minimal base css for handling HubSpot injected html/classes.

• /Modules/ -folder for placing Custom Modules into

  • /Dependencies/ - folder for placing Custom Module Dependencies into

• /globals/

  • /global modules/ - if we create any
  • /global groups/ - contains Header and footer group, which is used in all of default templates.

• /templates/ - holds all template files - files added here are minimal starters, and can optionally be used by devs during build out to make things fast

  • /system/ - system templates(error, subscription, password)
  • /page/ - page templates (1 column, 2 column, contact us)
  • /blog/ - blog templates

Please give any feedback you may have, this is a community project not a ************ I don't want to dictate everything here, because I don't know everything, and others may have interesting ideas I would never consider.

Lazyloading is popular, let's build in native lazyloading support into the framework. This means it will be light weight, un-opinionated.
https://addyosmani.com/blog/lazy-loading/

https://cdn2.hubspot.net/hubfs/327485/Events/Developer%20AMA%20-%20July%2025th%202018/macros.css

I might take this one on because I want to implement this in two ways. A javascript class based accordion AND a summary details element based accordion.

If you have any thoughts on what our documentation site's domain name should be throw out your ideas. I or my company will pay for the domain name.

Anything is fair game for a name. Just beware if the price of the domain name ends up being really expensive, for some odd reason we may avoid that one for one that is cheaper but still great.

Things to get your noodle turnin'

• Bootstraps site is getbootstrap.com

• There are a lot of TLDS now to choose from

I'm just throwing this one out there:

crankshaft.dev

I want to use GitHub Pages so we can demo the framework, and have documentation.

https://pages.github.com/

I haven't read through a ton on how to set this up. If someone wants to take the lead that'd be awesome!

Instructions will walk through uploading via FTP.

In Transmit I recommend using synchronize, and excluding .md files.
HubSpot doesn't support markdown, which is why those files were done that way. makes it easy to prevent them from showing in the actual built site. If others think it makes sense for those files to be accessible in your HubL portal we can change to readme.html

These instructions will go on the documentation site.

This todo can be started here, documented in a markdown file or wiki page until the documentation site is ready.

We need documentation for the grid.

The grid is largely the same as bootstrap, with some minor differences.

This issue depends on #21

Move all variables out of /theme/theme_base.css and into /hubl/theme-variables

https://github.com/TheWebTech/HubSpot-Developer-Extension
I can build into the chrome extension useful utilities for developers building using this framework, if you have any ideas let em fly.

One idea I have is that I can add a button in the extension which makes your site's grid get outlined so you can visualize it easier while scaffolding out a site.

Any other ideas welcome.

Add to /docs/layout.md that explains how to turn on/off the grid. This depends on #52 and #51

This todo depends on #61
Basically we need to write up how to use the table styling.

The documentation site says

CrankShaft is maintained by TheWebTech.
This page was generated by GitHub Pages.

I don't know how to customize that. I also don't know necessarily what it should show instead.

Open to anything, might be nice to link to the contributor page or something.

Completely just floating this idea. Not saying this is going to happen. I was thinking it might be good to have a way for companies to donate towards the project aside from just hours of development time.

example: Marketing Company A might be super excited about CrankShaft, but feel their team can’t contribute code-wise due to current workload. They, however, do have money they could contribute if they knew that the money would be spent directly to further the project. A possible contributor in this fashion could even be HubSpot itself if they see the value in the project.

CrankShaft’s money would be used to reimburse individuals or companies that spend a significant amount of time contributing. The intent not being that companies or individuals are to profit, but offset their costs. A business that has a full-time employee, if they dedicate say 6 hours in a week, that’s almost a full business day, that the employee was not doing billable work. The company still has to pay that employee. This also incentivizes development to some degree. If a company had a slow month, or an individual wanted to make side cash, they could by furthering the project.

Actual logistics of how donations would work, how sponsorships would work, how disbursements of money are approved, the fairness of the system, etc. all of those details can be figured out(There are tools like Open Collective for this). We could do "bounties" on issues, or something. But I don't want to discuss that stuff until hearing peoples views on the idea itself. At this time I'd just want to figure out what people think to see if it's worth researching and investing time into.

My inkling is that a sponsorships system could put real fire behind the project accelerating it more rapidly because time spent on it would not be viewed as “lost business time”.

An example of an open source project this has been hugely successful for is VueJS. Evan You quit his Job because donations for the project were enough to live off - he’s not rich but he’s living about the same life as he had with a real job(no I’m not planning to do that). Because of his ability to increase time spent on the project, there are now tons of spin-off projects he’s helping, and he’s also more able to project manage the whole thing. Now the real benefit is that third party devs have actually gone and spent full work days, and in one case a dev took a vacation from work, and dedicated days to working on Vue, and the Vue project was able to reimburse that time spent. Making it less of a risk or financial burden on the companies and individual contributors.

Then sponsors also benefit from having their name associated with the projects, example VueMastery has donated the most money to Vuejs, and are now the top place to learn VueJS.

If everyone hates the idea, that's totally okay It was just a thought I had after listening to some podcasts.

again lets focus this discussion on IF we should have something like this, not the specifics of how it would work, we'd settle that later.

Write out the mission of CrankShaft to guide how we build everything - readme has most of it but lets condense/distill it.

We want HubSpot to support editing/creating drag n drop templates via code. (yes I realize that sounds contradictory, but without it there's no way to put drag n drop templates in our framework, and ideally we want to support both coded and drag n drop.

Please upvote the idea on the idea forum and the slack channel to show HubSpot we want this!

All linked assets, the placement of modules, etc.


This is the same idea as how Custom Module meta and fields data works.

If it's too complex to have as 1 json file it would be fine to have a `.template` folder similar to how `.module` works.

The advantage being developers can then do the following things:

include DnD templates in version controlled repositories like GitHub. (this is something we want to do with https://github.com/TheWebTech/CrankShaft)
These templates will finally be editable locally or atleast over FTP.
This would enable developers to more easily programmatically update these templates.

Idea Forum:
https://community.hubspot.com/t5/HubSpot-Ideas/Make-Drag-n-Drop-Templates-show-as-json-via-FTP/idi-p/268700#M34171

In Slack:
https://hubspotdev.slack.com/archives/C26E7JT8V/p1557175380066000

Idea is - a macro that you pass a variable into. When you do that it pretty prints the variable, but only if hsDebug=true. This is a utility that can be used to debug your code without risking that code being seen live.

This would go in theme-macros.css

If you have additional ideas for this go for it!

I have a better method for this, I think it's based on Bootstrap 4. Anyhow I'll get this implemented.

Something I personally do is create a custom module, that acts to store all of my site-wide requires. Things like fonts, stuff I know will be needed for every template.

The reason for this is because if you need to change it site wide, it's easier to do it in 1 module that's used everywhere.

The alternative is HubSpot's domain based settings, but for anyone who's been around long enough to do a redesign - basically setting anything there that isn't invisible(like a tracking code) is a huge slap in the face to whomever does a redesign down the road.

If it's possible though doing an include of an html partial file in the is probably better. modules add html markup even if they have nothing to display.

Our classes should probably be prefixed to ensure we don't conflict with commonly used class names.

Example:
All class names in crankshaft could be prefixed with.cs-

I think that feels long and would get tedious, but would be less likely to conflict. Anyone else got suggestions?

I've never personally truly standardized color variable names.

I tend to name them things like:
dark-blue
blue
light-blue

I think that practice is fine, but I think having Primary Secondary etc. is good and more site agnostic.

Maybe it makes sense to kinda combine the best of both worlds.
Users would create their own color variable names, then assign primary, secondary etc. colors to reference the named colors?

Example of the concept:
https://getbootstrap.com/docs/4.0/utilities/colors/

This is kind of a perpetual thing that's almost always going to have room for improvement.

If you're feeling like organizing the theme-variables, and theme-macros files, go for it!

Create a table of contents and heading comments too so others can understand your logic and follow it.

Make sure not to re-order variables that depend on each-other though or you could break something.

Add a boolean which toggles on/off the crankshaft grid css to theme-variables.css.

All important parts of the HS boilerplate are to move into the CrankShaft structure.
This is really an amalgamation of several smaller tasks.

The goal is to eventually be able to delete this file completely. Keep it around until all important parts have been moved, that way we can easily access it for reference.

Related issues:
#34
#29
#28

Because this framework will likely get big and have a lot of parts i think it would be really awesome if we could include a way to test that the framework's features are working. I thought about trying Travis CI with it but it doesn't support jinjava. I think we likely will have to create a .html file we include in a tests folder which we add little tests to. Those of us who want to test on their portal would upload the full crankshaft repo to their portal and open a preview for said tests html template and we would have a JavaScript file evaluate if the tests pass and output the results. Users of the framework would not use this, only contributors.

If anyone has experience unit testing please share some wisdom. This is not my area of expertise but i figure even if my method isn't the best, something is better than nothing.