What techniques do you use for landing pages?

Hello! I'm interested in how to write landing pages quickly and efficiently? What libraries, frameworks and other helpers can use to their layout. For myself, until I discovered the following things:
  • Slick slider
  • Font awesome
  • scroll-reveal
  • parallax

What is more interesting and useful to offer?
Sell the garage ;) kapets ponabezhali you here.. thank you All for your answers!
July 2nd 19 at 13:48
12 answers
July 2nd 19 at 13:50
Solution
If no framework, just the layout on the layout, then:
  • Emmet - quick coding with html and CSS
  • less - variables for fonts, nesting selectors or BEM-naming.
  • flexbox for the grid, the location of the elements and responsive.
  • autoprefixer - adding css prefixes
  • Imagemin-pngquant to compress images
  • gulp to build the above
  • slick - carousel and sliders
  • remodal - modelki


If you use a framework, e.g. bootstrap, the faster will work with the bootstrap source and then to collect them:
  • to override variables
  • to connect necessary js-skipti out of the box
  • to connect need less styles
  • to put this galpon
share your reference on how cooking grid in flexbox? - Gaston.Litt commented on July 2nd 19 at 13:53
July 2nd 19 at 13:52
Uikit CSS Framework in terms of layout will be closed 99% of the whistles.
Twitter Bootstrap is a framework from the same area? Or is there any conceptual difference? - Gaston.Litt commented on July 2nd 19 at 13:55
: Bootstrap pop and completely empty when compared with Uikit - Natalie_Bailey2 commented on July 2nd 19 at 13:58
Went to https://getuikit.com/docs/form-advanced.html
What is that mongrel monstrosity? There's all these "beautiful" as these radio and checkboxes?
In addition, documentation boobed NO. I need to be telepathic to know how to use the Uikit CSS Framework? Or do I need to kill a few days, picking it? - Jaqueline.Parisian commented on July 2nd 19 at 14:01
: Don't like don't use. - Abbey commented on July 2nd 19 at 14:04
and read the description on the main - not destiny? mongrel monstrosity is the result in YOUR browser. Someone banned TSSS? Or is it, too, should itself work? So in Uikit is also possible. When you finish reading. Or normal for a human to ask those who have promosa to read and use. - Jaqueline.Parisian commented on July 2nd 19 at 14:07
: :
even opened to ask
s018.radikal.ru/i518/1611/0a/cf3b64ed9c37.png
I have not banned anything, but why in one of the most popular browsers, even the circles are not centered? - Rowena76 commented on July 2nd 19 at 14:10
: title: "UIkit''s very basic style can be extended with themes and is easy to customize to create your own look." I for example opposed to the framework by default given a certain visual style - so tumupasa sites will be identical, because the default style will not change - that You know - bootstrappy site is visible from afar. - Elmer.Upt commented on July 2nd 19 at 14:13
: so and I about the same, why they painted radio in pale blue but still so wonky. You see this and just not even try to be. Well, that is, I will not. - Rowena76 commented on July 2nd 19 at 14:16
:
I for example opposed to the framework by default gave a visual style


So he gives him. - Elmer.Upt commented on July 2nd 19 at 14:19
: opposed to you "gave visual style"? So then why do you need framework??? Use resetam their some. The task reinforce to give the developer components are ready to use. And its something I can do with your CSS - fuck me then that UIkit? - cortney.Kuhic commented on July 2nd 19 at 14:22
: : Have you ever understood at all the purpose of this component? - Abbey commented on July 2nd 19 at 14:25
: well, I understood about the logic of assertion. The framework should give cross-browser layout, adaptability, and already composes the appearance(color, shape, curvature, etc.) the author's approval to customize offers at home. I somewhat agree, to roll out the website on bootstrap without customization is possible only at the prototype stage, the production will still be all change at layout. But reinforce give confidence that its developers have ensured that the website didn't fall apart when you resize the browser or device that everything will be on the ground, and what size and color be kind to fit the layout. - Jaqueline.Parisian commented on July 2nd 19 at 14:28
: a competent design and mobile first will not give you the adaptability? Cross-browser compatibility, again, solve their resetari. Or you volbeko mean?
PS: I do not deny that, sends the wrong message approach the creators of Uikit. Really work have not tried it. But all the other frameworks is a big pain. - Natalie_Bailey2 commented on July 2nd 19 at 14:31
: Have a budget of 3 pennies and 2 days on the launch landing page. Suffer bikes or doing more important things? - Abbey commented on July 2nd 19 at 14:34
: that's the fact of the matter is that I'm in my layout, not sure, but I sometimes have to deal with it, I more or less mastered the bootstrap and me above his head enough, but I want to consider for yourself all the possible tools, can I something important overlooked. I think these frameworks just for those not confident in the layout. It is clear that professional frontend faster and better he will make up for its functionality. - Jaqueline.Parisian commented on July 2nd 19 at 14:37
: Just look at the set of components and helper in Uikit. Basic margin and lightbox in TB are missing. Work a little and realize how much time it will save. - Natalie_Bailey2 commented on July 2nd 19 at 14:40
: thank you, live on Monday to try one small project to catch up on UIkit, though I do not like it, but it is necessary to develop for the memories.. - Jaqueline.Parisian commented on July 2nd 19 at 14:43
: I would not say that frameworks for neuveren in its layout. You have in hearing someone else's code, and constantly thinking how to push your design to make sure nothing was broken. I was once on shift fucking here calls a dropdown menu a few pixels down in Zurb Foundaton stayed 3 hours. Or put up with someone else's design. - Natalie_Bailey2 commented on July 2nd 19 at 14:46
I don't know what imbecile wrote this framework, but these radio buttons are terrible. Blue point set using ::before to input, although the substituted elements (input, img, object, video, etc.) in accordance with the specifications do not support them. So in chrome visible blue dots, but in Firefox they are not, only the standard radio buttons.

Moreover, the size of buttons 13x13 pixels, and 8x8 point, that is, the margins should be 2.5 pixels, making it impossible to align in the middle.

With this approach, it is better to use a framework to do. - Abbey commented on July 2nd 19 at 14:49
: Well tell me how radio buttons made in TB? - Trace63 commented on July 2nd 19 at 14:52
Well not Nuka outsiders. Why do you shy away when talking about the curved display even in the most popular browsers? Or do you think it is normal that Chrome and Opera point is not centered and in IE and Firefox, these styles do not apply, because the specification does not define the behavior of the pseudo-elements for the replaceable items (i.e. they cannot be applied in the case, especially in the framework)?

Since suggest similar, explain how you "don't invent a Bicycle", overwriting the components of the framework that they work in all browsers? - Jaqueline.Parisian commented on July 2nd 19 at 14:55
and it is true, radio on go chrome. Only problem is Uikit? - Trace63 commented on July 2nd 19 at 14:58
: where did you go, people are waiting for an answer) - gustave_Kertzmann52 commented on July 2nd 19 at 15:01
: Did you miss me? Do, brother. - Trace63 commented on July 2nd 19 at 15:04
: watch the drain. you are not my brother) - Jaqueline.Parisian commented on July 2nd 19 at 15:07
: So, sleep well. - Trace63 commented on July 2nd 19 at 15:10
: : : go right here: https://getuikit.com/docs/customizer.html
it was in the uikit appearance - Jaqueline.Parisian commented on July 2nd 19 at 15:13
: not only is he there - Rowena76 commented on July 2nd 19 at 15:16
: for uikit appearance will be done there. - cortney.Kuhic commented on July 2nd 19 at 15:19
: Yes, without a difference. Do not and never had the desire to use bootstrape or something like that. - Rowena76 commented on July 2nd 19 at 15:22
: but the author of question asks about something else, and you should not break off it to those that don't fully understand how it's done. - Elmer.Upt commented on July 2nd 19 at 15:25
more like bootstrap? - Rowena76 commented on July 2nd 19 at 15:28
July 2nd 19 at 13:54
A normal designer.
Oh, God, how informative. I want to become a normal designer, please tell me what tools you use to accelerate its work and to raise the quality?
Or there will be too "stupid" response? - Gaston.Litt commented on July 2nd 19 at 13:57
: You know, I envy You, if You don't feel the difference in speed and quality of work in cooperation with a normal designer, and "poor". - Natalie_Bailey2 commented on July 2nd 19 at 14:00
July 2nd 19 at 13:56
As from project to project a lot of repeats, I decided to make a small start-templatethat includes everything necessary for easy and quick start a new project, and what you want.

My template for the layout - https://github.com/verbart/start-site
My template for AngularJS projects https://github.com/verbart/ng-boilerplate

Was the experience of using things like TARS, but I like to control every detail, and with them it not out. Too much excess, not enough flexible structure.
but as your pattern to use? - Gaston.Litt commented on July 2nd 19 at 13:59
: and what exactly causes difficulties? - Natalie_Bailey2 commented on July 2nd 19 at 14:02
July 2nd 19 at 13:58
tin, but if JavaScript is disabled js? + extra queries. Lends this 1 page, it was all shoved into 1 file as all the styles, scripts and pictures will be current on 1 page. - Gaston.Litt commented on July 2nd 19 at 14:01
: so, my solution is not suitable in this case. - Natalie_Bailey2 commented on July 2nd 19 at 14:04
the argument about disabled js is outdated by 10 years, frankly. So that's a problem for the users themselves, IMHO - the same as to sit with IE4. - Jaqueline.Parisian commented on July 2nd 19 at 14:07
: There is such a thing as Thor, and generally likely that may suddenly come the era of forced anonymity when js is disabled is the key to your safety. I'm not saying that js don't need to use, but you need to the user at least said that it won't work, and even better to have the version with 1% functionality but still working without js. - Abbey commented on July 2nd 19 at 14:10
your truth, I agree. Also love all sorts of things like: "what if the Internet speed drops to 5-10KB/s all at once, and nobody will wait 10 minutes until the heavy scripts weight in the amount of megabytes downloaded" (no kidding). - Jaqueline.Parisian commented on July 2nd 19 at 14:13
: : if I understand correctly (I can modify), then you need to all at once, it is possible to obtain in a single request response from the server, including images/sounds etc.
So, in fact, it's just a need to virtualize the paths to the resources in the inline base64 encoded resources.
But because of the volume of all content SPA it may take 10-15Mb depending on the total volume of media: image/audio/video.
Which can still be viewed (not squandered the user down) :(
In General, an interesting topic and how best to do - write: I will try to implement. - Rowena76 commented on July 2nd 19 at 14:16
perhaps my knowledge is lacking (which is possible), but have no idea how one query to cram the requested image and the script in base64. If it is possible (if correctly understood your thought, idea), in some cases, it would be very helpful! Audio and video to base64 to transfer it is unnecessary, and in General... Better (if, again, perhaps) to make it optional, roughly speaking, like this:
var options = { /* ... */ base64: ["img", "link", "audio", "video"] }
(example for clarity, let and so everything is clear).
Often (when loading certain pages, for example) no matter squandered if the user down, and sometimes it will be enough (in the case of landing) in base64 to push LazyLoad, and images to load them as you scroll... - Elmer.Upt commented on July 2nd 19 at 14:19
: it's not better on the blocks to make LazyLoad?! - Rowena76 commented on July 2nd 19 at 14:22
only tried to develop the idea of obtaining all elements are mirrored via miracast ™ with one request.
LazyLoad is a feature, not related to your wonderful includeHTML.
Yes, a tie is possible, but it's not about that: you are asked to write how to do outlined above, your opinion. - Elmer.Upt commented on July 2nd 19 at 14:25
about LazyLoad and about the attitude to includeHTML - don't understand.
I say that the blocks (not the image, and of the page: DIV-blocks) can be loaded only when the user almost squandered to him.
LazyLoad is not a library, but the principle of "lazy" (delayed) data loading!
And about base64, so for js: data:text/javascript;base64,XXXXXXXXXXXX
so for image: data:image/jpeg;base64XXXXXXXXXXXXX - cortney.Kuhic commented on July 2nd 19 at 14:28
and who said that the LazyLoad library? Judging by my previous words, it is a feature, not a library. About the attitude is a response to your previous comment where you mentioned LazyLoad, whom in your library.
About base64: know what and how, sorry if not very clear in the comments - I was hoping that writing in accessible language.
Apparently, at the beginning of any discussion, misunderstood your words about base64. Touched on the subject of extra queries for each "chunk" of html that is downloaded to your library. Next, you write about base64 as a solution (so I thought). Mistakenly thought that there is some magical way to get html+"pieces" (loadable includeHTML) using js in one request, "remake" them in base64 format...and you want to apply, ask for suggestions on this subject... my apologies.

LazyLoad in includeHTML to use, of course, possible, if you mean that it is a good decision. Importantly - how it will work: for example, if you insert a footer, to which you want to scroll a relatively long time, LazyLoad is a good solution, IMHO. It was not to the detriment of the core functionality of your library.
(probably now play the role of Captain Obvious) - Abbey commented on July 2nd 19 at 14:31
in General, about the large number of queries is unlikely to be inconvenient because:
1. the browser caching - all is loaded only 1 time
2. pieces - take a few bytes
3. they are loaded only once and as necessary (for events)
4. for images - lazyload connects

Otherwise - to make the compiler into a single HTML with base64 through rendering through the same includeHTML and save all resources as a SINGLE html-ku with all images, scripts and html pieces.
And after upload to the server a single html-ku (1 file: index.html).

Also, you can make the download of all blocks from the body of the main page and any additional loadable file that contains all the necessary blocks for SPA-applications (for subsequent display at the right time without recourse to the network).
This option is can see is the top priority. - Jaqueline.Parisian commented on July 2nd 19 at 14:34
July 2nd 19 at 14:00
webflow
Well that it is not Ukoz. - Gaston.Litt commented on July 2nd 19 at 14:03
or Viks) - Natalie_Bailey2 commented on July 2nd 19 at 14:06
: : in fact, even Velykosnitynske as bragging that they finally moved on to prototyping before the Foundation of the project. So Webflow just allows you to make a working prototype! - Jaqueline.Parisian commented on July 2nd 19 at 14:09
July 2nd 19 at 14:02
lilanding.js for navigation.
Animate.css + wow.js
July 2nd 19 at 14:04
If you focus on your list, those. various js scripts ( animations, parallax and slider) + fonts, the list will be very long. Need is used as needed and minimizing zapilivanija.
Is that permanent:
Fancybox is a modal window for more complex options
Owl - adaptive ride
+your work for ajax requests and simple modal

But I can see, it's not something that seriously affects the speed of work is to make a site and not putting any js script it's now a rarity.

Take the above, for accelerating some js scripts is not enough.
This kit is your editor right plugins (Emmet in the first place)
This study keyboard shortcuts (seriously so speeds up)
It's npm, the collector projects (gulp, grunt) + appropriate kit
It is a framework (bootstrap)
This preprocessor
Here's the initial list, and then - depending on what to find and learn useful online.
July 2nd 19 at 14:06
Technology to optimize the layout:
  • bootstrap
  • Font awesome
  • the practices (patterns of whole blocks) based on bootstrap
  • Sass


From "chips" was popular among the BM and other clubs:
July 2nd 19 at 14:08
Not strange enough Bootstrap, and backend Yii framework for example, in case the customers want to grow from landing a full website that often is
offtopic
Not too from a gun on sparrows landing on Yii2? :) IMHO, if the client wants the landing page to a full site is a separate task with all the consequences. - Gaston.Litt commented on July 2nd 19 at 14:11
Well, Yes, but it's easier for me ))) roughly speaking, the main design is ready and it remains only to impose blocks ) - Natalie_Bailey2 commented on July 2nd 19 at 14:14
July 2nd 19 at 14:10
Polymer
July 2nd 19 at 14:12
generally they are done 1 time in the code is usually longer look.... if you are constantly doing adobe muse then it will be faster...

Find more questions by tags JavaScriptWeb DevelopmentCSSHTML