Flexbox First. Layout tables and text flexboxes
Flexbox confidently walks around the planet - the era of comfortable web development is coming. In this article I will talk about an unusual way of layout of the whole flexboxes, and share ready-made code for the layout of tables and text flexboxes.
1) Flexbox by default. Instead of the usual classic stream, you can use flexbox formatting. The result will be similar, except for the possibility of float-wrap, which can be completely dispensed with.
')
2) Absolute or fixed location relative to the parent container or window. So that in any container it is possible to position elements in this way - for each element, the default position: relative.
3) Offset relative to its position, and transformation. Offset through position: relative is not animated, therefore it is better to use translate.
Graphic composition is a combination of these three methods + effects, transparency and z-index.
That's all positioning! This is a very simple framework, but it greatly simplifies the layout.
Flexbox is a way to position elements within a block. Tables can also be folded with flexboxes because their structure is the elements inside the blocks.
Layout of traditional html-tables is much more complicated than layout of flexboxes.
For flexbox tables such as OS, LLC, UN, OCO, only five control buttons can be sufficient:
→ Table editor code, 700 lines
Plain text is also elements inside the block, so the text is quite possible to impose flexboxes. To do this, each word must be placed in its own span - the paragraph is a div in which the span-words. Each span word can have its own id, class and data. When editing a span-word, each of its letters is temporarily placed in its own span.
It is more convenient to work with text on the touch screen.
→ Text editor code, 600 lines
I am a software engineer, I came to programming from linguistics. Having studied the JS CSS HTML languages, I selected a simple core-subset in each. This is my "super strict mode" - the maximum minimalism.
Web programming is great in that it is ten times simpler than the usual classic, for example in C ++ Qt. Highlighting the main thing and discarding the excess, I reduced the complexity by another ten times.
For example, ten HTML tags inside body are enough for me:
- these are semantic primitives of HTML10, additional semantics through WAI-ARIA.
My framework reduces complexity, but does not increase it like normal frameworks. My understanding of the KISS principle - programming should be simple and understandable even for children 12+. My task is to minimize the threshold for entering programming.
Three positioning methods:
1) Flexbox by default. Instead of the usual classic stream, you can use flexbox formatting. The result will be similar, except for the possibility of float-wrap, which can be completely dispensed with.
')
2) Absolute or fixed location relative to the parent container or window. So that in any container it is possible to position elements in this way - for each element, the default position: relative.
3) Offset relative to its position, and transformation. Offset through position: relative is not animated, therefore it is better to use translate.
Graphic composition is a combination of these three methods + effects, transparency and z-index.
* { position:relative; display:flex; } title,script,style { display:none; // display — flex } That's all positioning! This is a very simple framework, but it greatly simplifies the layout.
Flexbox table layout
Flexbox is a way to position elements within a block. Tables can also be folded with flexboxes because their structure is the elements inside the blocks.
Layout of traditional html-tables is much more complicated than layout of flexboxes.
For flexbox tables such as OS, LLC, UN, OCO, only five control buttons can be sufficient:
→ Table editor code, 700 lines
Flexbox text layout
Plain text is also elements inside the block, so the text is quite possible to impose flexboxes. To do this, each word must be placed in its own span - the paragraph is a div in which the span-words. Each span word can have its own id, class and data. When editing a span-word, each of its letters is temporarily placed in its own span.
It is more convenient to work with text on the touch screen.
→ Text editor code, 600 lines
My nano-framework
I am a software engineer, I came to programming from linguistics. Having studied the JS CSS HTML languages, I selected a simple core-subset in each. This is my "super strict mode" - the maximum minimalism.
Web programming is great in that it is ten times simpler than the usual classic, for example in C ++ Qt. Highlighting the main thing and discarding the excess, I reduced the complexity by another ten times.
For example, ten HTML tags inside body are enough for me:
- span
- div
- img
- audio
- video
- svg
- canvas
- iframe
- form
- input
- these are semantic primitives of HTML10, additional semantics through WAI-ARIA.
My framework reduces complexity, but does not increase it like normal frameworks. My understanding of the KISS principle - programming should be simple and understandable even for children 12+. My task is to minimize the threshold for entering programming.
Source: https://habr.com/ru/post/320022/
All Articles