├── position.css
└── README.md
/position.css:
--------------------------------------------------------------------------------
1 | /**
2 | * position.css
3 | *
4 | * @file position.css
5 | * @author Oyedele Hammed (@devhammed)
6 | * @date October 20, 2018
7 | * @description A simple CSS layout & positioning library.
8 | * @see https://github.com/devhammed/position.css
9 | */
10 |
11 | .position {
12 | position: relative;
13 | }
14 |
15 | .position-left {
16 | position: absolute;
17 | top: 50%;
18 | left: 0;
19 | transform: translate(0, -50%);
20 | }
21 |
22 | .position-right {
23 | position: absolute;
24 | top: 50%;
25 | right: 0;
26 | transform: translate(0, 50%);
27 | }
28 |
29 | .position-center {
30 | position: absolute;
31 | top: 50%;
32 | left: 50%;
33 | transform: translate(-50%, -50%);
34 | }
35 |
36 | .position-top-left {
37 | position: absolute;
38 | top: 0;
39 | left: 0;
40 | }
41 |
42 | .position-top-right {
43 | position: absolute;
44 | top: 0;
45 | right: 0;
46 | }
47 |
48 | .position-top-center {
49 | position: absolute;
50 | top: 0;
51 | left: 50%;
52 | transform: translate(-50%, 0%);
53 | }
54 |
55 | .position-bottom-left {
56 | position: absolute;
57 | bottom: 0;
58 | left: 0;
59 | }
60 |
61 | .position-bottom-right {
62 | position: absolute;
63 | bottom: 0;
64 | right: 0;
65 | }
66 |
67 | .position-bottom-center {
68 | position: absolute;
69 | bottom: 0;
70 | left: 50%;
71 | transform: translate(-50%, 0%);
72 | }
73 |
74 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # position.css
2 |
3 | A simple CSS layout & positioning library created to ease CSS position absolute & relative steep curves.
4 |
5 | It is not easy to put things in desired position so I created this minimal utility to make positioning as easy as ABC.
6 |
7 | ## Classes
8 |
9 | Below is the usage and documentation of classes provided by this library.
10 |
11 | ### .position
12 | > This is a base class for container parent elements, it is required if you don't want the positioned elements to be positioned in relative to the viewport.
13 |
14 | ```html
15 |
16 | ...
17 |
18 | ```
19 |
20 | ### .position-left
21 | > Position element to the vertical left of the containing `.position` element or viewport.
22 |
23 | ```html
24 |
29 | ```
30 |
31 | ### .position-right
32 | > Position element to the vertical right of the containing `.position` element or viewport.
33 |
34 | ```html
35 |
40 | ```
41 |
42 | ### .position-center
43 | > Position element to the vertical center of the containing `.position` element or viewport.
44 |
45 | ```html
46 |
51 | ```
52 |
53 | ### .position-top-left
54 | > Position element to the top-left of the containing `.position` element or viewport.
55 |
56 | ```html
57 |
62 | ```
63 |
64 | ### .position-top-right
65 | > Position element to the top-right of the containing `.position` element or viewport.
66 |
67 | ```html
68 |
73 | ```
74 |
75 | ### .position-top-center
76 | > Position element to the top-center of the containing `.position` element or viewport.
77 |
78 | ```html
79 |
84 | ```
85 |
86 | ### .position-bottom-left
87 | > Position element to the bottom-left of the containing `.position` element or viewport.
88 |
89 | ```html
90 |
95 | ```
96 |
97 | ### .position-right
98 | > Position element to the bottom-right of the containing `.position` element or viewport.
99 |
100 | ```html
101 |
102 |
103 | ...
104 |
105 |
113 |
114 | ...
115 |
116 |