After a flex container’s contents have finished their flexing
12 | and the dimensions of all flex items are finalized,
13 | they can then be aligned within the flex container.
14 |
15 |
The margin properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout. Flex items also respect the alignment properties from CSS Box Alignment,
16 | which allow easy keyword-based alignment of items in both the main axis and cross axis.
17 | These properties make many common types of alignment trivial,
18 | including some things that were very difficult in CSS 2.1,
19 | like horizontal and vertical centering.
20 |
21 |
Note: While the alignment properties are defined in CSS Box Alignment[CSS-ALIGN-3],
22 | Flexible Box Layout reproduces the definitions of the relevant ones here
23 | so as to not create a normative dependency that may slow down advancement of the spec.
24 | These properties apply only to flex layout
25 | until CSS Box Alignment Level 3 is finished
26 | and defines their effect for other layout modes.
27 | Additionally, any new values defined in the Box Alignment module
28 | will apply to Flexible Box Layout;
29 | in otherwords, the Box Alignment module, once completed,
30 | will supercede the definitions here.
The defining aspect of flex layout is the ability to make the flex items “flex”,
13 | altering their width/height to fill the available space in the main dimension.
14 | This is done with the flex property.
15 | A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container,
16 | or shrinks them (proportional to their flex shrink factor) to prevent overflow.
The contents of a flex container can be laid out in any direction and in any order.
13 | This allows an author to trivially achieve effects that would previously have required complex or fragile methods,
14 | such as hacks using the float and clear properties.
15 | This functionality is exposed through the flex-direction, flex-wrap, and order properties.
16 |
17 |
Note: The reordering capabilities of flex layout intentionally affect only the visual rendering,
18 | leaving speech order and navigation based on the source order.
19 | This allows authors to manipulate the visual presentation
20 | while leaving the source order intact for non-CSS UAs and for
21 | linear models such as speech and sequential navigation.
22 | See Reordering and Accessibility and the Flex Layout Overview for examples
23 | that use this dichotomy to improve accessibility.
24 |
25 |
Authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering,
26 | as that can ruin the accessibility of the document.
The align-content property aligns a flex container’s lines within the flex container
11 | when there is extra space in the cross-axis,
12 | similar to how justify-content aligns individual items within the main-axis.
13 | Note, this property has no effect on a single-lineflex container.
14 | Values have the following meanings:
15 |
16 |
Note: Only multi-lineflex containers ever have free space in the cross-axis for lines to be aligned in,
17 | because in a single-line flex container
18 | the sole line automatically stretches to fill the space.
`,
19 |
20 | values: [
21 | {
22 | name: 'flex-start',
23 | alias: 'valdef-align-content-flex-start',
24 | desc: `Lines are packed toward the start of the flex container.
25 | The cross-start edge of the first line in the flex container
26 | is placed flush with the cross-start edge of the flex container,
27 | and each subsequent line is placed flush with the preceding line.`,
28 | current: true
29 | },
30 |
31 | {
32 | name: 'flex-end',
33 | alias: 'valdef-align-content-flex-end',
34 | desc: `Lines are packed toward the end of the flex container.
35 | The cross-end edge of the last line
36 | is placed flush with the cross-end edge of the flex container,
37 | and each preceding line is placed flush with the subsequent line.`
38 | },
39 |
40 | {
41 | name: 'center',
42 | alias: 'valdef-align-content-center',
43 | desc: `Lines are packed toward the center of the flex container.
44 | The lines in the flex container are placed flush with each other
45 | and aligned in the center of the flex container,
46 | with equal amounts of space
47 | between the cross-start content edge of the flex container
48 | and the first line in the flex container,
49 | and between the cross-end content edge of the flex container
50 | and the last line in the flex container.
51 | (If the leftover free-space is negative,
52 | the lines will overflow equally in both directions.)`
53 | },
54 |
55 | {
56 | name: 'space-between',
57 | alias: 'valdef-align-content-space-between',
58 | desc: `Lines are evenly distributed in the flex container.
59 | If the leftover free-space is negative
60 | or there is only a single flex line in the flex container,
61 | this value is identical to flex-start.
62 | Otherwise,
63 | the cross-start edge of the first line in the flex container
64 | is placed flush with the cross-start content edge of the flex container,
65 | the cross-end edge of the last line in the flex container
66 | is placed flush with the cross-end content edge of the flex container,
67 | and the remaining lines in the flex container are distributed
68 | so that the spacing between any two adjacent lines is the same.`
69 | },
70 |
71 | {
72 | name: 'space-around',
73 | alias: 'valdef-align-content-space-around',
74 | desc: `Lines are evenly distributed in the flex container,
75 | with half-size spaces on either end.
76 | If the leftover free-space is negative
77 | this value is identical to center.
78 | Otherwise, the lines in the flex container are distributed
79 | such that the spacing between any two adjacent lines is the same,
80 | and the spacing between the first/last lines and the flex container edges
81 | is half the size of the spacing between flex lines.`
82 | },
83 |
84 | {
85 | name: 'stretch',
86 | alias: 'valdef-align-content-stretch',
87 | desc: `Lines stretch to take up the remaining space.
88 | If the leftover free-space is negative,
89 | this value is identical to flex-start.
90 | Otherwise,
91 | the free-space is split equally between all of the lines,
92 | increasing their cross size.`
93 | }
94 | ],
95 |
96 | cssRules: [
97 | {
98 | selector: '.parent',
99 | props: {
100 | display: 'flex',
101 | 'flex-wrap': 'wrap',
102 | 'align-content': 'stretch',
103 | height: '250px'
104 | }
105 | },
106 | {
107 | selector: '.child',
108 | props: {
109 | width: '40%'
110 | }
111 | }
112 | ]
113 | };
114 |
--------------------------------------------------------------------------------
/src/data/props/alignment/align-items-self.js:
--------------------------------------------------------------------------------
1 | import alignItems from './align-items';
2 | import alignSelf from './align-self';
3 |
4 | export default {
5 | name: 'align-items, align-self',
6 | alias: 'align-items-self',
7 |
8 | link: 'https://www.w3.org/TR/css-flexbox-1/#align-items-property',
9 |
10 | desc: `
Flex items can be aligned in the cross axis of the current line of the flex container,
11 | similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container’s items,
12 | including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items.
13 | (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)
`,
16 |
17 | values: [
18 | {
19 | name: 'auto',
20 | alias: 'valdef-align-items-auto',
21 | desc: `Defers cross-axis alignment control
22 | to the value of align-items on the parent box.
23 | (This is the initial value of align-self.)`,
24 | current: true
25 | },
26 |
27 | {
28 | name: 'flex-start',
29 | alias: 'valdef-align-items-flex-start',
30 | desc: 'The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line.'
31 | },
32 |
33 | {
34 | name: 'flex-end',
35 | alias: 'valdef-align-items-flex-end',
36 | desc: 'The cross-end margin edge of the flex item is placed flush with the cross-end edge of the line.'
37 | },
38 |
39 | {
40 | name: 'center',
41 | alias: 'valdef-align-items-center',
42 | desc: `The flex item’s margin box is centered in the cross axis within the line.
43 | (If the cross size of the flex line is less than that of the flex item,
44 | it will overflow equally in both directions.)`
45 | },
46 |
47 | {
48 | name: 'baseline',
49 | alias: 'valdef-align-items-baseline',
50 | desc: `The flex item participates in baseline alignment:
51 | all participating flex items on the line
52 | are aligned such that their baselines align,
53 | and the item with the largest distance between its baseline and its cross-start margin edge
54 | is placed flush against the cross-start edge of the line.
55 | If the item does not have a baseline in the necessary axis,
56 | then one is synthesized from the flex item’s border box.`
57 | },
58 |
59 | {
60 | name: 'stretch',
61 | alias: 'valdef-align-items-stretch',
62 | desc: `If the cross size property of the flex item computes to auto,
63 | and neither of the cross-axis margins are auto,
64 | the flex item is stretched.
65 | Its used value is the length necessary to make the cross size of the item’s margin box as close to the same size as the line as possible,
66 | while still respecting the constraints imposed by min-height/min-width/max-height/max-width.
67 |
Note: If the flex container’s height is constrained
68 | this value may cause the contents of the flex item to overflow the item.
The justify-content property aligns flex items along the main axis of the current line of the flex container.
11 | This is done after any flexible lengths and any auto margins have been resolved.
12 | Typically it helps distribute extra free space leftover when either
13 | all the flex items on a line are inflexible,
14 | or are flexible but have reached their maximum size.
15 | It also exerts some control over the alignment of items when they overflow the line.
`,
16 |
17 | values: [
18 | {
19 | name: 'flex-start',
20 | alias: 'valdef-justify-content-flex-start',
21 | desc: `Flex items are packed toward the start of the line.
22 | The main-start margin edge of the first flex item on the line
23 | is placed flush with the main-start edge of the line,
24 | and each subsequent flex item is placed flush with the preceding item.`,
25 | current: true
26 | },
27 |
28 | {
29 | name: 'flex-end',
30 | alias: 'valdef-justify-content-flex-end',
31 | desc: `Flex items are packed toward the end of the line.
32 | The main-end margin edge of the last flex item is placed flush with the main-end edge of the line,
33 | and each preceding flex item is placed flush with the subsequent item.`
34 | },
35 |
36 | {
37 | name: 'center',
38 | alias: 'valdef-justify-content-center',
39 | desc: `Flex items are packed toward the center of the line.
40 | The flex items on the line are placed flush with each other
41 | and aligned in the center of the line,
42 | with equal amounts of space between the main-start edge of the line and the first item on the line
43 | and between the main-end edge of the line and the last item on the line.
44 | (If the leftover free-space is negative,
45 | the flex items will overflow equally in both directions.)`
46 | },
47 |
48 | {
49 | name: 'space-between',
50 | alias: 'valdef-justify-content-space-between',
51 | desc: `Flex items are evenly distributed in the line.
52 | If the leftover free-space is negative
53 | or there is only a single flex item on the line,
54 | this value is identical to flex-start.
55 | Otherwise,
56 | the main-start margin edge of the first flex item on the line
57 | is placed flush with the main-start edge of the line,
58 | the main-end margin edge of the last flex item on the line
59 | is placed flush with the main-end edge of the line,
60 | and the remaining flex items on the line are distributed
61 | so that the spacing between any two adjacent items is the same.`
62 | },
63 |
64 | {
65 | name: 'space-around',
66 | alias: 'valdef-justify-content-space-around',
67 | desc: `Flex items are evenly distributed in the line,
68 | with half-size spaces on either end.
69 | If the leftover free-space is negative or
70 | there is only a single flex item on the line,
71 | this value is identical to center.
72 | Otherwise, the flex items on the line are distributed
73 | such that the spacing between any two adjacent flex items on the line is the same,
74 | and the spacing between the first/last flex items and the flex container edges
75 | is half the size of the spacing between flex items.`
76 | },
77 | {
78 | name: 'space-evenly',
79 | alias: 'valdef-justify-content-space-evenly',
80 | desc: `
The alignment subjects are evenly distributed in the alignment container,
81 | with a full-size space on either end.
82 | The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects,
83 | before the first alignment subject,
84 | and after the last alignment subject is the same.
85 |
86 |
A flex container establishes a new flex formatting context for its contents.
9 | This is the same as establishing a block formatting context,
10 | except that flex layout is used instead of block layout.
11 | For example, floats do not intrude into the flex container,
12 | and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS21] The overflow property applies to flex containers.
13 |
14 |
Flex containers are not block containers,
15 | and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout.
16 | In particular:
17 |
18 |
19 |
20 |
float and clear do not create floating or clearance of flex item,
21 | and do not take it out-of-flow.
If an element’s specified display is inline-flex,
34 | then its display property computes to flex in certain circumstances:
35 | the table in CSS 2.1 Section 9.7 is amended to contain an additional row,
36 | with inline-flex in the "Specified Value" column
37 | and flex in the "Computed Value" column.
`,
38 |
39 | values: [
40 | {
41 | name: 'flex',
42 | alias: 'valdef-display-flex',
43 | desc: `This value causes an element to generate a flex container box
44 | that is block-level when placed in flow layout.`,
45 | current: true
46 | },
47 | {
48 | name: 'inline-flex',
49 | alias: 'valdef-display-inline-flex',
50 | desc: `This value causes an element to generate a flex container box
51 | that is inline-level when placed in flow layout.`
52 | }
53 | ],
54 |
55 | cssRules: [
56 | {
57 | selector: '.parent',
58 | props: {
59 | display: 'flex'
60 | }
61 | }
62 | ],
63 |
64 | demoBefore: 'Some text'
65 | };
66 |
--------------------------------------------------------------------------------
/src/data/props/flexibility/flex-basis.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'flex-basis',
3 |
4 | link: 'http://www.w3.org/TR/css-flexbox-1/#flex-basis-property',
5 |
6 | initValue: 'auto',
7 |
8 | appliesTo: 'flex items',
9 |
10 | isFeaturedHighlighted: true,
11 |
12 | desc: `
For all values other than auto and content (defined above), flex-basis is resolved the same way as width in horizontal writing modes [CSS21],
16 | except that if a value would resolve to auto for width,
17 | it instead resolves to content for flex-basis.
18 | For example, percentage values of flex-basis are resolved against
19 | the flex item’s containing block (i.e. its flex container);
20 | and if that containing block’s size is indefinite,
21 | the used value for flex-basis is content.
22 | As another corollary, flex-basis determines the size of the content box,
23 | unless otherwise specified
24 | such as by box-sizing[CSS3UI].
This <number> component sets flex-growlonghand and specifies the flex grow factor,
14 | which determines how much the flex item will grow
15 | relative to the rest of the flex items in the flex container
16 | when positive free space is distributed.
17 | When omitted, it is set to 1.
18 |
19 |
20 | Flex values between 0 and 1 have a somewhat special behavior:
21 | when the sum of the flex values on the line is less than 1,
22 | they will take up less than 100% of the free space.
23 |
An item’s flex-grow value
24 | is effectively a request for some proportion of the free space,
25 | with 1 meaning “100% of the free space”;
26 | then if the items on the line are requesting more than 100% in total,
27 | the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
28 | However, if the items request less than the full amount
29 | (such as three items that are each flex-grow: .25)
30 | then they’ll each get exactly what they request
31 | (25% of the free space to each,
32 | with the final 25% left unfilled).
33 | See §9.7 Resolving Flexible Lengths for the exact details
34 | of how free space is distributed.
35 |
36 |
This pattern is required for continuous behavior as flex-grow approaches zero
37 | (which means the item wants none of the free space).
38 | Without this, a flex-grow: 1 item would take all of the free space;
39 | but so would a flex-grow: 0.1 item,
40 | and a flex-grow: 0.01 item,
41 | etc.,
42 | until finally the value is small enough to underflow to zero
43 | and the item suddenly takes up none of the free space.
44 | With this behavior,
45 | the item instead gradually takes less of the free space
46 | as flex-grow shrinks below 1,
47 | smoothly transitioning to taking none of the free space at zero.
48 |
49 |
Unless this “partial fill” behavior is specifically what’s desired,
50 | authors should stick to values ≥ 1;
51 | for example, using 1 and 2 is usually better
52 | than using .33 and .67,
53 | as they’re more likely to behave as intended
54 | if items are added, removed, or line-wrapped.
This <number> component sets flex-shrinklonghand and specifies the flex shrink factor,
62 | which determines how much the flex item will shrink
63 | relative to the rest of the flex items in the flex container
64 | when negative free space is distributed.
65 | When omitted, it is set to 1.
66 |
67 |
Note: The flex shrink factor is multiplied by the flex base size when distributing negative space.
68 | This distributes negative space in proportion to how much the item is able to shrink,
69 | so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.
This component sets the flex-basislonghand,
76 | which specifies the flex basis:
77 | the initial main size of the flex item,
78 | before free space is distributed according to the flex factors.
79 |
80 |
<flex-basis> accepts the same values as the width and height properties
81 | (except that auto is treated differently)
82 | plus the content keyword:
100 | Indicates an automatic size based on the flex item’s content.
101 | (It is typically equivalent to the max-content size,
102 | but with adjustments to handle aspect ratios,
103 | intrinsic sizing constraints,
104 | and orthogonal flows;
105 | see details in §9 Flex Layout Algorithm.)
106 |
Note: This value was not present in the initial release of Flexible Box Layout,
107 | and thus some older implementations will not support it.
108 | The equivalent effect can be achieved by using auto together with a main size (width or height) of auto.
The initial values of the flex components are equivalent to flex: 0 1 auto.
21 |
22 |
Note: The initial values of flex-grow and flex-basis are different from their defaults when omitted in the flex shorthand.
23 | This is so that the flex shorthand can better accommodate the most common cases.
24 |
25 |
A unitless zero that is not already preceded by two flex factors
26 | must be interpreted as a flex factor.
27 | To avoid misinterpretation or invalid declarations,
28 | authors must specify a zero <flex-basis> component
29 | with a unit or precede it by two flex factors.
The flex-direction property specifies how flex items are placed in the flex container,
11 | by setting the direction of the flex container’s main axis.
12 | This determines the direction in which flex items are laid out.
13 |
14 |
Note: The reverse values do not reverse box ordering:
15 | like writing-mode and direction[CSS3-WRITING-MODES],
16 | they only change the direction of flow.
17 | Painting order, speech order, and sequential navigation orders
18 | are not affected.
`,
19 |
20 | values: [
21 | {
22 | name: 'row',
23 | alias: 'valdef-flex-direction-row',
24 | desc: `The flex container’s main axis has the same orientation as the inline axis of the current writing mode.
25 | The main-start and main-end directions are equivalent to the inline-start and inline-end directions, respectively,
26 | of the current writing mode.`,
27 | current: true
28 | },
29 |
30 | {
31 | name: 'row-reverse',
32 | alias: 'valdef-flex-direction-row-reverse',
33 | desc: `Same as row,
34 | except the main-start and main-end directions are swapped.`
35 | },
36 |
37 | {
38 | name: 'column',
39 | alias: 'valdef-flex-direction-column',
40 | desc: `The flex container’s main axis has the same orientation as the block axis of the current writing mode.
41 | The main-start and main-end directions are equivalent to the block-start and block-end directions, respectively,
42 | of the current writing mode.`
43 | },
44 |
45 | {
46 | name: 'column-reverse',
47 | alias: 'valdef-flex-direction-column-reverse',
48 | desc: `Same as column,
49 | except the main-start and main-end directions are swapped.`
50 | }
51 | ],
52 |
53 | cssRules: [
54 | {
55 | selector: '.parent',
56 | props: {
57 | display: 'flex',
58 | 'flex-direction': 'row',
59 | height: '250px'
60 | }
61 | }
62 | ]
63 | };
64 |
--------------------------------------------------------------------------------
/src/data/props/ordering-orientation/flex-flow.js:
--------------------------------------------------------------------------------
1 | export default {
2 | name: 'flex-flow',
3 |
4 | link: 'http://www.w3.org/TR/css-flexbox-1/#flex-flow-property',
5 |
6 | appliesTo: 'flex containers',
7 |
8 | initValue: 'row nowrap',
9 |
10 | desc: `
The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties,
11 | which together define the flex container’s main and cross axes.
12 |
13 |
14 | Note that the flex-flow directions are writing mode sensitive.
15 | In vertical Japanese, for example,
16 | a row flex container lays out its contents from top to bottom.
17 |
The flex-wrap property controls whether the flex container is single-line or multi-line,
11 | and the direction of the cross-axis,
12 | which determines the direction new lines are stacked in.
Flex items are, by default, displayed and laid out in the same order as they appear in the source document.
13 | The order property can be used to change this ordering.
14 |
15 |
The order property controls the order in which
16 | flex items appear within the flex container,
17 | by assigning them to ordinal groups.
18 | It takes a single <integer> value,
19 | which specifies which ordinal group the flex item belongs to.
20 |
21 |
A flex container lays out its content in order-modified document order,
22 | starting from the lowest numbered ordinal group and going up.
23 | Items with the same ordinal group are laid out in the order they appear in the source document.
24 | This also affects the painting order[CSS21],
25 | exactly as if the flex items were reordered in the source document.
26 | Absolutely-positioned children of a flex container are treated as having order: 0 for the purpose of determining their painting order relative to flex items.
27 |
28 |
Unless otherwise specified by a future specification,
29 | this property has no effect on boxes that are not flex items.
`,
30 |
31 | values: [
32 | {
33 | name: '<integer>',
34 | alias: 'order-values',
35 | desc: ''
36 | }
37 | ],
38 |
39 | customValues: [
40 | {
41 | name: '-1',
42 | current: true
43 | },
44 | {
45 | name: '0'
46 | },
47 | {
48 | name: '1'
49 | }
50 | ],
51 |
52 | cssRules: [
53 | {
54 | selector: '.parent',
55 | props: {
56 | display: 'flex',
57 | height: '250px'
58 | }
59 | },
60 | {
61 | selector: '.child--featured',
62 | props: {
63 | order: '-1'
64 | }
65 | }
66 | ]
67 | };
68 |
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/LICENSE.txt:
--------------------------------------------------------------------------------
1 |
2 | Apache License
3 | Version 2.0, January 2004
4 | http://www.apache.org/licenses/
5 |
6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
7 |
8 | 1. Definitions.
9 |
10 | "License" shall mean the terms and conditions for use, reproduction,
11 | and distribution as defined by Sections 1 through 9 of this document.
12 |
13 | "Licensor" shall mean the copyright owner or entity authorized by
14 | the copyright owner that is granting the License.
15 |
16 | "Legal Entity" shall mean the union of the acting entity and all
17 | other entities that control, are controlled by, or are under common
18 | control with that entity. For the purposes of this definition,
19 | "control" means (i) the power, direct or indirect, to cause the
20 | direction or management of such entity, whether by contract or
21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
22 | outstanding shares, or (iii) beneficial ownership of such entity.
23 |
24 | "You" (or "Your") shall mean an individual or Legal Entity
25 | exercising permissions granted by this License.
26 |
27 | "Source" form shall mean the preferred form for making modifications,
28 | including but not limited to software source code, documentation
29 | source, and configuration files.
30 |
31 | "Object" form shall mean any form resulting from mechanical
32 | transformation or translation of a Source form, including but
33 | not limited to compiled object code, generated documentation,
34 | and conversions to other media types.
35 |
36 | "Work" shall mean the work of authorship, whether in Source or
37 | Object form, made available under the License, as indicated by a
38 | copyright notice that is included in or attached to the work
39 | (an example is provided in the Appendix below).
40 |
41 | "Derivative Works" shall mean any work, whether in Source or Object
42 | form, that is based on (or derived from) the Work and for which the
43 | editorial revisions, annotations, elaborations, or other modifications
44 | represent, as a whole, an original work of authorship. For the purposes
45 | of this License, Derivative Works shall not include works that remain
46 | separable from, or merely link (or bind by name) to the interfaces of,
47 | the Work and Derivative Works thereof.
48 |
49 | "Contribution" shall mean any work of authorship, including
50 | the original version of the Work and any modifications or additions
51 | to that Work or Derivative Works thereof, that is intentionally
52 | submitted to Licensor for inclusion in the Work by the copyright owner
53 | or by an individual or Legal Entity authorized to submit on behalf of
54 | the copyright owner. For the purposes of this definition, "submitted"
55 | means any form of electronic, verbal, or written communication sent
56 | to the Licensor or its representatives, including but not limited to
57 | communication on electronic mailing lists, source code control systems,
58 | and issue tracking systems that are managed by, or on behalf of, the
59 | Licensor for the purpose of discussing and improving the Work, but
60 | excluding communication that is conspicuously marked or otherwise
61 | designated in writing by the copyright owner as "Not a Contribution."
62 |
63 | "Contributor" shall mean Licensor and any individual or Legal Entity
64 | on behalf of whom a Contribution has been received by Licensor and
65 | subsequently incorporated within the Work.
66 |
67 | 2. Grant of Copyright License. Subject to the terms and conditions of
68 | this License, each Contributor hereby grants to You a perpetual,
69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
70 | copyright license to reproduce, prepare Derivative Works of,
71 | publicly display, publicly perform, sublicense, and distribute the
72 | Work and such Derivative Works in Source or Object form.
73 |
74 | 3. Grant of Patent License. Subject to the terms and conditions of
75 | this License, each Contributor hereby grants to You a perpetual,
76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77 | (except as stated in this section) patent license to make, have made,
78 | use, offer to sell, sell, import, and otherwise transfer the Work,
79 | where such license applies only to those patent claims licensable
80 | by such Contributor that are necessarily infringed by their
81 | Contribution(s) alone or by combination of their Contribution(s)
82 | with the Work to which such Contribution(s) was submitted. If You
83 | institute patent litigation against any entity (including a
84 | cross-claim or counterclaim in a lawsuit) alleging that the Work
85 | or a Contribution incorporated within the Work constitutes direct
86 | or contributory patent infringement, then any patent licenses
87 | granted to You under this License for that Work shall terminate
88 | as of the date such litigation is filed.
89 |
90 | 4. Redistribution. You may reproduce and distribute copies of the
91 | Work or Derivative Works thereof in any medium, with or without
92 | modifications, and in Source or Object form, provided that You
93 | meet the following conditions:
94 |
95 | (a) You must give any other recipients of the Work or
96 | Derivative Works a copy of this License; and
97 |
98 | (b) You must cause any modified files to carry prominent notices
99 | stating that You changed the files; and
100 |
101 | (c) You must retain, in the Source form of any Derivative Works
102 | that You distribute, all copyright, patent, trademark, and
103 | attribution notices from the Source form of the Work,
104 | excluding those notices that do not pertain to any part of
105 | the Derivative Works; and
106 |
107 | (d) If the Work includes a "NOTICE" text file as part of its
108 | distribution, then any Derivative Works that You distribute must
109 | include a readable copy of the attribution notices contained
110 | within such NOTICE file, excluding those notices that do not
111 | pertain to any part of the Derivative Works, in at least one
112 | of the following places: within a NOTICE text file distributed
113 | as part of the Derivative Works; within the Source form or
114 | documentation, if provided along with the Derivative Works; or,
115 | within a display generated by the Derivative Works, if and
116 | wherever such third-party notices normally appear. The contents
117 | of the NOTICE file are for informational purposes only and
118 | do not modify the License. You may add Your own attribution
119 | notices within Derivative Works that You distribute, alongside
120 | or as an addendum to the NOTICE text from the Work, provided
121 | that such additional attribution notices cannot be construed
122 | as modifying the License.
123 |
124 | You may add Your own copyright statement to Your modifications and
125 | may provide additional or different license terms and conditions
126 | for use, reproduction, or distribution of Your modifications, or
127 | for any such Derivative Works as a whole, provided Your use,
128 | reproduction, and distribution of the Work otherwise complies with
129 | the conditions stated in this License.
130 |
131 | 5. Submission of Contributions. Unless You explicitly state otherwise,
132 | any Contribution intentionally submitted for inclusion in the Work
133 | by You to the Licensor shall be under the terms and conditions of
134 | this License, without any additional terms or conditions.
135 | Notwithstanding the above, nothing herein shall supersede or modify
136 | the terms of any separate license agreement you may have executed
137 | with Licensor regarding such Contributions.
138 |
139 | 6. Trademarks. This License does not grant permission to use the trade
140 | names, trademarks, service marks, or product names of the Licensor,
141 | except as required for reasonable and customary use in describing the
142 | origin of the Work and reproducing the content of the NOTICE file.
143 |
144 | 7. Disclaimer of Warranty. Unless required by applicable law or
145 | agreed to in writing, Licensor provides the Work (and each
146 | Contributor provides its Contributions) on an "AS IS" BASIS,
147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 | implied, including, without limitation, any warranties or conditions
149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 | PARTICULAR PURPOSE. You are solely responsible for determining the
151 | appropriateness of using or redistributing the Work and assume any
152 | risks associated with Your exercise of permissions under this License.
153 |
154 | 8. Limitation of Liability. In no event and under no legal theory,
155 | whether in tort (including negligence), contract, or otherwise,
156 | unless required by applicable law (such as deliberate and grossly
157 | negligent acts) or agreed to in writing, shall any Contributor be
158 | liable to You for damages, including any direct, indirect, special,
159 | incidental, or consequential damages of any character arising as a
160 | result of this License or out of the use or inability to use the
161 | Work (including but not limited to damages for loss of goodwill,
162 | work stoppage, computer failure or malfunction, or any and all
163 | other commercial damages or losses), even if such Contributor
164 | has been advised of the possibility of such damages.
165 |
166 | 9. Accepting Warranty or Additional Liability. While redistributing
167 | the Work or Derivative Works thereof, You may choose to offer,
168 | and charge a fee for, acceptance of support, warranty, indemnity,
169 | or other liability obligations and/or rights consistent with this
170 | License. However, in accepting such obligations, You may act only
171 | on Your own behalf and on Your sole responsibility, not on behalf
172 | of any other Contributor, and only if You agree to indemnify,
173 | defend, and hold each Contributor harmless for any liability
174 | incurred by, or claims asserted against, such Contributor by reason
175 | of your accepting any such warranty or additional liability.
176 |
177 | END OF TERMS AND CONDITIONS
178 |
179 | APPENDIX: How to apply the Apache License to your work.
180 |
181 | To apply the Apache License to your work, attach the following
182 | boilerplate notice, with the fields enclosed by brackets "[]"
183 | replaced with your own identifying information. (Don't include
184 | the brackets!) The text should be enclosed in the appropriate
185 | comment syntax for the file format. We also recommend that a
186 | file or class name and description of purpose be included on the
187 | same "printed page" as the copyright notice for easier
188 | identification within third-party archives.
189 |
190 | Copyright [yyyy] [name of copyright owner]
191 |
192 | Licensed under the Apache License, Version 2.0 (the "License");
193 | you may not use this file except in compliance with the License.
194 | You may obtain a copy of the License at
195 |
196 | http://www.apache.org/licenses/LICENSE-2.0
197 |
198 | Unless required by applicable law or agreed to in writing, software
199 | distributed under the License is distributed on an "AS IS" BASIS,
200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 | See the License for the specific language governing permissions and
202 | limitations under the License.
203 |
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/README.txt:
--------------------------------------------------------------------------------
1 | Roboto Slab Variable Font
2 | =========================
3 |
4 | This download contains Roboto Slab as both a variable font and static fonts.
5 |
6 | Roboto Slab is a variable font with this axis:
7 | wght
8 |
9 | This means all the styles are contained in a single file:
10 | RobotoSlab-VariableFont_wght.ttf
11 |
12 | If your app fully supports variable fonts, you can now pick intermediate styles
13 | that aren’t available as static fonts. Not all apps support variable fonts, and
14 | in those cases you can use the static font files for Roboto Slab:
15 | static/RobotoSlab-Thin.ttf
16 | static/RobotoSlab-ExtraLight.ttf
17 | static/RobotoSlab-Light.ttf
18 | static/RobotoSlab-Regular.ttf
19 | static/RobotoSlab-Medium.ttf
20 | static/RobotoSlab-SemiBold.ttf
21 | static/RobotoSlab-Bold.ttf
22 | static/RobotoSlab-ExtraBold.ttf
23 | static/RobotoSlab-Black.ttf
24 |
25 | Get started
26 | -----------
27 |
28 | 1. Install the font files you want to use
29 |
30 | 2. Use your app's font picker to view the font family and all the
31 | available styles
32 |
33 | Learn more about variable fonts
34 | -------------------------------
35 |
36 | https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
37 | https://variablefonts.typenetwork.com
38 | https://medium.com/variable-fonts
39 |
40 | In desktop apps
41 |
42 | https://theblog.adobe.com/can-variable-fonts-illustrator-cc
43 | https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
44 |
45 | Online
46 |
47 | https://developers.google.com/fonts/docs/getting_started
48 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
49 | https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
50 |
51 | Installing fonts
52 |
53 | MacOS: https://support.apple.com/en-us/HT201749
54 | Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
55 | Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
56 |
57 | Android Apps
58 |
59 | https://developers.google.com/fonts/docs/android
60 | https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
61 |
62 | License
63 | -------
64 | Please read the full license text (LICENSE.txt) to understand the permissions,
65 | restrictions and requirements for usage, redistribution, and modification.
66 |
67 | Commercial usage is allowed for any purpose, in any medium, but some
68 | requirements apply in some situations. Always read your font licenses and
69 | understand what they mean.
70 |
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-Black.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-Black.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-Bold.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraBold.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraLight.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-ExtraLight.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-Light.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-Medium.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-Regular.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-SemiBold.ttf
--------------------------------------------------------------------------------
/src/fonts/Roboto_Slab/static/RobotoSlab-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yoksel/flex-cheatsheet/834c735907e706b3667de6b507069b39acf7cd24/src/fonts/Roboto_Slab/static/RobotoSlab-Thin.ttf
--------------------------------------------------------------------------------
/src/index-tmpl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= htmlWebpackPlugin.options.TITLE %>
5 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
15 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import { groups } from './data/groups';
2 | import { Nav } from './js/components/nav';
3 | import { ThemeSwitcher } from './js/components/theme-switcher';
4 | import { MainContainer } from './js/components/main-container';
5 |
6 | import './screenshot.png';
7 | import './scss/styles.scss';
8 |
9 | const main = document.querySelector('.page-main');
10 |
11 | const themeSwitcher = new ThemeSwitcher();
12 | themeSwitcher.setTheme();
13 | const mainContainer = new MainContainer({ container: main, groups });
14 | const asideElement = document.querySelector('.page-aside');
15 | const asideContentElement = document.querySelector('.page-aside__content');
16 | const asideTogglerElement = document.querySelector('.page-aside__toggler');
17 | const nav = new Nav({ groups, sectionsComponents: mainContainer.getSectionsComponents() });
18 |
19 | asideContentElement.prepend(nav.element);
20 | nav.moveMarker();
21 |
22 | asideTogglerElement.addEventListener('click', () => {
23 | asideElement.classList.toggle('page-aside--collapsed');
24 | });
25 |
26 | if (window.location.search.includes('debug')) {
27 | checkLinks();
28 | }
29 |
30 | function checkLinks () {
31 | const elemsWithId = Array.from(document.querySelectorAll('[id]'));
32 | const elemsById = elemsWithId.reduce((prev, item) => {
33 | prev[item.id] = item;
34 | return prev;
35 | }, {});
36 | const links = document.querySelectorAll('a[href*="#"]');
37 | let counter = 0;
38 |
39 | links.forEach((link) => {
40 | const href = link.getAttribute('href');
41 | const isExternal = href.includes('http');
42 | const hrefTail = link.getAttribute('href').split('#')[1];
43 |
44 | if (isExternal) {
45 | if (elemsById[hrefTail] &&
46 | (href.includes('css3-grid-layout') || href.includes('css-grid-1'))) {
47 | console.log('external, id exist in doc: ', hrefTail);
48 | link.classList.add('marked-link');
49 | }
50 | } else if (!elemsById[hrefTail]) {
51 | console.log(`id not exist ${hrefTail}`);
52 | link.classList.add('marked-link');
53 | counter++;
54 | } else if (!href) {
55 | link.classList.add('marked-link');
56 | counter++;
57 | }
58 | });
59 |
60 | console.log(`Wrong links total: ${counter}`);
61 | }
62 |
--------------------------------------------------------------------------------
/src/data/alignment.js:
--------------------------------------------------------------------------------
1 | import justifyContent from './props/alignment/justify-content';
2 | import alignContent from './props/alignment/align-content';
3 | import alignItemsSelf from './props/alignment/align-items-self';
4 |
5 | export default {
6 | title: 'Alignment',
7 | alias: 'alignment',
8 |
9 | link: 'https://www.w3.org/TR/css-flexbox-1/#alignment',
10 |
11 | desc: `