Nimbly Lite theme
License: MIT License
Create a HubSpot development sandbox for testing and development purposes. Link
Create a personal CMS access key to enable authenticated access to your account. Link
npm install - install all development dependencies.env file your portal name and PERSONAL_ACCESS_KEY Read morenpm run upload - upload all local changes to remote HubSpot portal check more commands
Describe the bug
Sticky header functionality does not work. After the Sticky header toggle was switched ON, asset changes were published and saved, but still, nothing has happened to the site header.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
After the Sticky header toggle was changed to ON site header menu should be sticky.
Additional context
Tested on 2 accounts with Nimbly v.2 (one sandbox account with Nimbly Light v.2 and one demo account after updating Nimbly Light from v.1 to v.2)
Using Google Lighthouse, a theme must score higher than the following thresholds:
Submitting assets with different variations of the following is not permitted:
Having color variants, layout placement options and customizable content are core features of HubSpot’s Platform offering.
Your theme.json file must include the following parameters:
JSON
// theme.json
{
"label": "Your Theme Name",
"preview_path": "./path/to/preview-page.html",
"screenshot_path":"./path/to/screenshot.jpg",
"enable_domain_stylesheets": false,
"version":"1.0",
"author":{
"name":"Your Marketplace Provider Name",
"email":"[email protected]",
"url":"https://theme-provider-url.com/"
},
"documentation_url":"https://theme-provider-url.com/your-theme/documentation",
"example_url":"https://theme-provider-url.com/your-theme/demo"
}
Default content must match what is advertised on the asset listing page and demo site. All verbiage, images, and other media used on the asset listing page should match what is used in the demo site and asset.
For example, if your asset listing is about a landing page that is geared towards real estate with a working demo and upon purchase of this asset, the end user is delivered a landing page about fitness, this would be considered a bait-and-switch which is unacceptable.
Your theme settings must use descriptive labels for each setting so the end-user knows what they are changing.
A theme, along withes its templates and modules, must not display any errors in either the Design Tools or the browser console. An example of errors inside of the Design Tools are shown below:
Describe the bug
Accessible navigation via the Tab key works incorrectly on the Safari and Firefox browsers.
To Reproduce
Steps to reproduce the behavior:
Actual result
While navigating via the Tab key on the website page navigation works only for the Search icon/field. No possibility to navigate buttons/ links on the rest of the website page (including the main menu)
Expected behavior
Navigation via the Tab key works for the whole site's accessible elements (buttons, links, linked images/icons, form fields, etc.)
Screenshots
Desktop:
Desktop:
Form fields:
?? Page Templates
10 System Templates
?? Modules
Sections
depend on design
In your theme, all of HubSpot’s Default Modules must be styled and must display properly on all templates submitted.
6 Page Templates
7 System Templates
24 Modules
Sections
depend on design
Keep in mind the following limits per theme:
Themes cannot contain more than:
Themes must not contain:
Email templates (at this time, themes do not support email templates).
Describe the bug
Links have incorrect alignment:
<p> in the Rich Text module;Expected behavior
The linked text (link) should be aligned vertically along with other text
Screenshots
Additional context
:where(a:not(.btn-link)) {
vertical-align: unset;
}
Simple Company site
6 Page Templates
7 System Templates
Needs:
"Real" default content (not lorem ipsum)
With free-to-use default images
With logo (two color variants?)
Your asset must not include any code or items that are not necessary for the asset to function. This includes, but is not limited to, items such as:
Note: There is a difference between commented out code and comments in code. If you are providing context in your code for clarification purposes, we recommend using the comment delimiter as this will let you comment on your code while also not having these comments show in the “View Source” or “Inspect” views of a page. See below for an example.
You must use descriptive naming conventions when labeling your assets. For example, if you are creating a module that allows users to show images in a gallery listing format with filters:
When creating templates, we recommend looking at our developer documentation around template annotations and use of the label annotation which controls the label individuals see when choosing a page template in the page creation flow.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.