A
A
Arman2018-03-07 11:12:59
Sass
Arman, 2018-03-07 11:12:59

How to layout bootstrap + SASS?

Somehow I didn’t do much layout, but then I got carried away, a few questions appeared:
1. As I understand it, you can connect twbs / bootstrap-sass (for b3), assign some default bootstrap things, use its mixins, inherit, etc. d. minus that a new big css file will be built that contains everything? Now we are connecting bootstrap.min.css to their CDN and we think that there is a big chance that the user already has this file (s), and then he will need to download everything again? Or is it saving on matches? Attempts to connect some mixins separately did not work, because. they still need variables with colors etc.
When is it generally necessary to connect a frame in this way? Maybe rename everything in the old fashioned way and not bathe?
2. The layout that I'm typing has its own buttons with their own styles. Now I need to: 1. remap the bootstrap buttons (primary, success, default); 2. extend them with a new class, something like class="btn btn-default btn-site" class="btn btn-primary btn-site"; 3. collect separately and do not touch the bootstrap buttons.
The problem is that after they can be asked to put a button from the bootstrap, but they have already been reassigned and you need to cancel what was reassigned? The same goes for pagination, breadcrumbs, etc.
those. when to use what (Reassign styles, extend styles, use custom styles)?
3. When should you use bootstrap helper classes? For example, I want to make a menu in the footer, I do it through<ul class="list-unstyled list-inline">...</ul>, but if after that I want to change the appearance of this menu to a vertical one or something else, then I will have to change the layout, is it better to style such elements myself? Those. layout will be:

<footer><nav><ul class="footer-menu">...</ul></nav></footer>
, and further styles most?
In general, they will be happy with any links-articles on the topic

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey delphinpro, 2018-03-07
@Arik

CDN vs own build - saving on matches.
Especially if you don't need the whole package.
I'll start with the worst, wrong and wretched use case:
This is when people include bootstrap.min.css, and then they start redefining styles in their file. It turns out a complete unsupported fucked up (I'm just now pulling such a template I bought (!) On the site, my nerves are at the limit).
People who do this make a rotten argument: what if we want to update the bootstrap? Seriously, fuck? How often did you do it? I bet a hundred bucks that never.
To begin with, of course, use preprocessor sources (we will not choose a specific port, there is less, sсss, and stylus, whatever you like).
Next up are the mixins. No need to connect separate. Include valiables.scss and mixins.scss. Mixins don't go into a build on their own, so make sure they're all available.
Components. Disable unnecessary ones by commenting out the imports of the relevant files.
Buttons. If you don't need bootstrap, disable them. Write your own using mixins and even copy-paste parts of the bootstrap code. This is fine.
A great option is to write your own mixin for the button (which bootstrap mixins can also use). For in bootstrap, unfortunately, there is no make-button () mixin.
If you need to change a component or style (often you have to modify navbars, tables, navigation, tabs), feel free to fix the source. But it’s better to disable, copy-paste and connect your own version of the source (perhaps even changing classes, but this will not always work, because the connection is terrible). You need to edit, understanding what you are doing. Because the bootstrap inside is arranged through the ass. Take at least the .nav class - fierce fucked up, wild connectedness.
Pagination, babes. You will never be asked to supply the original styles. If these elements have a certain style in their layout, that style will be preserved. Feel free to change. Or make a duplicate.
Helpers should be used as little as possible. They are needed for quick sketches or edits "here and now". Better describe the new class.
Again, if you need the list-inline class in a single place, why not write it?
Links and articles like "how to type for bootstrap" are extremely sucky stuff, most often written by the same beginners as those who are looking for a similar topic. Although you will certainly get basic information.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question