What is the best way to build a static one-page website in 2021?

Question

Landing pages

Hello.

Let me want to make a website explaining how the new product works/works. Text, a couple of js-schemes with varying degrees of interactivity, and a contact. Extremely tricky task.

Why is this not a landing page and why am I asking the question here at all? Because the site does not have the task of being a seller. We don’t think about the funnel, conversion, SEO, and so on. The site should be informative first of all. Because I plan to give a link to it to clients directly.

Content is important (for example, the convenience of embedding animated SVGs or charts on d3 / amcharts), adaptability for devices, and the fact that I want to make a lot of such sites, reuse elements.

Keeping in mind such introductory - subject - what technologies are most rational to use?
Each individual site is small. Is it appropriate to use Uikit or Tailwind or is it an overkill? I like their out-of-the-box adaptability, but do you really need to remember class names like Neo to use these tools effectively? Or picking apart other people's projects for details? Unlike vanilla CSS, where there is a question on Stackoverflow for any layout - in the case of the framework, you need to go to the official docs (horror, isn't it?) And guess the class names if you need to take a step to the left or right of the example.

Are there any good WISYWIG editors that generate markup for UiKit or Tailwind? It's just that I'm watching with curiosity how it all started with writing sites in a notebook, and ended ... - writing sites in a notebook, but with autocopy. And in the yard is Figma.

Thank you!

Answer 1

Take some simple, not even framework, but the so-called. "boiler plate", for example:

• https://purecss.io/ (from Yahoo)
  
• getskeleton.com (from an indie developer)
  

Almost certainly there are already blanks for everything you need inside. Even the recently bloated Bootstrap won't be needed.
Pure.css even has ready-made templates already laid out: https://purecss.io/layouts/
By the way, from the bonuses, such a site will be highly appreciated in google pagespeed and similar services.

Answer 2

make a website in the constructor
or become a programmer and then you will understand how websites are made

Answer 3

It seems to me that the proposed options are not very far from Bootstrap, but none is ready to match the quality of adaptive debugging and component compatibility.
And if you build Bootstrap with your additional styles through webpack / gulp, then this will give you the opportunity not only to make your own components, but also to build thin Bootstrap without including unused parts in the assembly.
All that will be cloned between projects is a sass file with self-written components and a collector config.
It even lends itself to automation.
Another life hack:
Components can be written using combinations of the desired BT styles via @extend

.study-container
  @extend .container-fluid
  @extend .p-0
  background: linear-gradient(to right, white 40%, #e5e5e5 60%)

.study-container_menu
  @extend .col-lg-3
  @extend .bg-white
  @extend .p-3
  @extend .p-lg-4
  @extend .pt-sm-4
  @extend .pt-lg-5

  a
    color: $gray-800
    @extend .d-block
    @extend .mb-3

    .iconify
      @extend .mr-2
      color: $color-primary

    &.active
      font-weight: bold
      color: $color-primary

  &:first-child.study-container_menu-block
    @extend .mt-0
    @extend .mb-0

Answer 4

For simple sites, there are constructors. For more complex ones - layout by hand. For layout, there are tools that simplify the work and development of interfaces. Just all the UI kits and frameworks you mentioned. And so on incrementally, depending on the needs.

Answer 5

I am not a developer. But I created a couple of static sites simply in a text editor, Googled CSS and JS solutions without frameworks and without libraries.
The question is how quickly and how often you need to do it - if a static simple site is one-time, then it’s easier to sit down and make it in pure JS and CSS in a week or two or three.

Answer 6

In 2021, for a static site, your own DIY craft is best.
It captivates from the very beginning, because you have to choose a UI, which means that there will be several options for ready-made libraries, which means a lot of reading. First, the documentation, and preferably the source code, in order to understand: how is it more convenient for you to assemble the interface?
For starters, I can recommend one and two as one of the answers to the "what to choose" question.