├── LICENSE
├── README.md
├── logo.svg
├── sass
├── buttons.scss
├── cards.scss
├── colors.scss
├── default.scss
├── fonts.scss
├── forms.scss
├── gradient.scss
├── grid.scss
├── main.scss
├── media.scss
├── mixins.scss
└── variables.scss
├── source
├── .babelrc
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .yo-rc.json
├── LICENSE
├── README.md
├── app
│ ├── apple-touch-icon.png
│ ├── favicon.ico
│ ├── images
│ │ ├── drone2.jpg
│ │ └── logo.svg
│ ├── index.html
│ ├── robots.txt
│ ├── scripts
│ │ └── main.js
│ └── styles
│ │ ├── buttons.scss
│ │ ├── cards.scss
│ │ ├── colors.scss
│ │ ├── default.scss
│ │ ├── fonts.scss
│ │ ├── forms.scss
│ │ ├── gradient.scss
│ │ ├── grid.scss
│ │ ├── main.scss
│ │ ├── media.scss
│ │ ├── mixins.scss
│ │ └── variables.scss
├── bower.json
├── gulpfile.js
├── package.json
├── test
│ ├── index.html
│ └── spec
│ │ └── test.js
└── yarn.lock
├── unnamed.css
└── unnamed.min.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 ismail ghallou
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Unnamed](https://unnamed.smakosh.com)
2 |
3 | 
4 |
5 | Unnamed is a simple colorful css framework that is recommended to be used while learning something and you're too lazy to style your components or for building prototypes, created by [Ismail Ghallou (Smakosh)](https://twitter.com/smakosh).
6 |
7 | [](https://www.npmjs.com/package/unnamed)
8 | [](https://www.npmjs.com/package/unnamed)
9 |
10 | [](https://www.patreon.com/smakosh)
11 |
12 | Npm
13 |
14 | npm install --save unnamed
15 |
16 | Yarn
17 |
18 | yarn add unnamed
19 |
20 | CDN
21 |
22 |
23 |
24 | ## Documentation
25 |
26 | https://unnamed.smakosh.com
27 |
28 | ## Development
29 |
30 | ### For web apps
31 |
32 | Npm
33 |
34 | $ npm install --save unnamed
35 |
36 | Yarn
37 |
38 | $ yarn add unnamed
39 |
40 | Usage with webpack:
41 |
42 | import 'unnamed'
43 |
44 | ### For landing pages
45 |
46 | #### Clone & start dev server
47 |
48 | $ git clone https://github.com/smakosh/Unnamed-getting-started.git
49 |
50 | $ cd Unnamed-getting-started && yarn install && bower install
51 |
52 | $ gulp serve
53 |
54 | #### To Build
55 |
56 | $ gulp build
57 |
58 | #### Or include CDN
59 |
60 | # License
61 |
62 | MIT © Unnamed
63 |
--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 |
21 |
--------------------------------------------------------------------------------
/sass/buttons.scss:
--------------------------------------------------------------------------------
1 | @import "colors";
2 |
3 | .btn {
4 | padding: 1rem 1.5rem;
5 | color: #fff;
6 | cursor: pointer;
7 | text-transform: uppercase;
8 | font-weight: bold;
9 | }
10 |
11 | .btn-primary {
12 | border-radius: 5px;
13 | }
14 |
15 | .btn-rounded {
16 | border-radius: 30px;
17 | }
18 |
19 | .btn-outlined {
20 | border-width: 3px;
21 | border-style: solid;
22 | transition: all 0.5s;
23 |
24 | &:hover {
25 | color: #fff;
26 | transition: all 0.5s;
27 | }
28 | }
29 |
30 | .gradient-black {
31 | background: $black !important;
32 | }
33 |
34 | .black-btn {
35 | border-color: $black;
36 | color: $black;
37 |
38 | &:hover {
39 | background-color: $black;
40 | }
41 | }
42 |
43 | .green-btn {
44 | border-color: $green;
45 | color: $green;
46 |
47 | &:hover {
48 | background-color: $green;
49 | }
50 | }
51 |
52 | .orange-btn {
53 | border-color: $orange-btn;
54 | color: $orange-btn;
55 |
56 | &:hover {
57 | background-color: $orange-btn;
58 | }
59 | }
60 |
61 | .purple-btn {
62 | border-color: $purple-btn;
63 | color: $purple-btn;
64 |
65 | &:hover {
66 | background-color: $purple-btn;
67 | }
68 | }
69 |
70 | button:disabled {
71 | box-shadow: unset;
72 | opacity: .8;
73 | background: $disabled;
74 | color: #fff;
75 | border: unset;
76 |
77 | &:hover {
78 | box-shadow: unset;
79 | background: $disabled;
80 | }
81 | }
--------------------------------------------------------------------------------
/sass/cards.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | border-radius: 5px;
3 | box-shadow: 0px 1px 10px 0px rgba(5, 5, 5, 0.13);
4 |
5 | .card-header {
6 | padding: 1.5rem;
7 |
8 | h4 {
9 | font-weight: bold;
10 | margin: 0;
11 | }
12 | }
13 |
14 | .card-img {
15 | overflow: hidden;
16 |
17 | img {
18 | position: relative;
19 | left: 0;
20 | right: 0;
21 | top: 0;
22 | bottom: 0;
23 | width: 100%;
24 | display: block;
25 | }
26 | }
27 |
28 | .card-footer {
29 | padding: 1.5rem 0 1.5rem 1.5rem;
30 |
31 | h4 {
32 | font-weight: bold;
33 | margin: 0;
34 | }
35 | }
36 | }
37 |
38 | .card-no-footer {
39 | .card-img {
40 |
41 | img {
42 | border-bottom-left-radius: 5px;
43 | border-bottom-right-radius: 5px;
44 | }
45 | }
46 | }
47 |
48 | .card-no-header {
49 | .card-img {
50 | img {
51 | border-top-left-radius: 5px;
52 | border-top-right-radius: 5px;
53 | }
54 | }
55 | }
56 |
57 | .card-hover {
58 | transition: all .3s;
59 | &:hover {
60 | box-shadow: 0px 11px 16px 0px rgba(5, 5, 5, 0.23);
61 | transition: all .3s;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/sass/colors.scss:
--------------------------------------------------------------------------------
1 | // colors
2 | $green: #1fdeb3;
3 | $blue: #12c3d2;
4 | $yellow: #FFE53B;
5 | $orange: #FF2525;
6 | $orange-btn: #ff9f33;
7 | $dark-blue: #21D4FD;
8 | $purple: #B721FF;
9 | $purple-btn: #7274ff;
10 | $red: #f44336;
11 | $black: #212121;
12 | $disabled: #c1c1c1;
13 |
--------------------------------------------------------------------------------
/sass/default.scss:
--------------------------------------------------------------------------------
1 | a {
2 | text-decoration: none;
3 | }
4 |
5 | select, input, textarea, button {
6 | -webkit-appearance: none;
7 |
8 | &:focus {
9 | outline: none;
10 | }
11 | }
12 |
13 | button {
14 | background-color: unset;
15 | border: none;
16 | -webkit-appearance: none;
17 | -webkit-touch-callout: none;
18 | -webkit-user-select: none;
19 | -khtml-user-select: none;
20 | -moz-user-select: none;
21 | -ms-user-select: none;
22 | user-select: none;
23 | }
24 |
--------------------------------------------------------------------------------
/sass/fonts.scss:
--------------------------------------------------------------------------------
1 | @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
--------------------------------------------------------------------------------
/sass/forms.scss:
--------------------------------------------------------------------------------
1 | @import "colors";
2 |
3 | form {
4 | width: 100%;
5 | }
6 |
7 | input[type="text"],
8 | input[type="password"],
9 | input[type="email"],
10 | input[type="search"],
11 | input[type="number"],
12 | input[type="file"],
13 | input[type="tel"],
14 | input[type="url"],
15 | select,
16 | textarea,
17 | textarea[type=text] {
18 | width: 100%;
19 | margin-top: 1rem;
20 | margin-bottom: 1rem;
21 | box-sizing: border-box;
22 | transition: all .2s ease;
23 | border-width: 1px;
24 | border-color: $black;
25 | border-style: solid;
26 | border-radius: 2px;
27 |
28 | &:focus {
29 | border-color: $black;
30 | transition: all .2s ease;
31 | }
32 | }
33 |
34 | input, textarea {
35 | padding: .9rem 1rem .9rem 2rem;
36 | }
37 |
38 | select {
39 | background: #fff;
40 | padding: .9rem .5rem .9rem .5rem;
41 | margin: 1.2rem 0;
42 | }
43 |
44 | textarea {
45 | resize: vertical;
46 | min-height: 12rem;
47 | margin: 0;
48 | }
49 |
50 | .input-field {
51 | span:before {
52 | cursor: pointer;
53 | position: relative;
54 | font-family: 'fontawesome';
55 | top: 3rem;
56 | left: .6rem;
57 | color: $black;
58 | }
59 | }
60 |
61 | .text-area-field {
62 | span:before {
63 | top: 1.8rem;
64 | }
65 | }
66 |
67 | .user-icon:before {
68 | content: '';
69 | }
70 |
71 | .email-icon:before {
72 | content: '';
73 | }
74 |
75 | .edit-icon:before {
76 | content: '';
77 | }
78 |
79 | .caret-icon:before {
80 | content: '▼';
81 | }
82 |
83 | label {
84 | cursor: pointer;
85 |
86 | input[type="checkbox"] {
87 | display: none;
88 |
89 | + span:before {
90 | content: '';
91 | font-family: 'fontawesome';
92 | border: 1px solid $black;
93 | padding: .4rem .4rem;
94 | border-radius: 2px;
95 | transition: .2s;
96 | color: rgba(255, 255, 255, 0);
97 | font-size: 16px;
98 | }
99 | }
100 |
101 | input[type="checkbox"]:checked + span:before {
102 | content: '';
103 | font-family: 'fontawesome';
104 | border: 1px solid $black;
105 | padding: .4rem .4rem;
106 | border-radius: 2px;
107 | transition: .2s;
108 | color: $black;
109 | font-size: 16px;
110 | }
111 |
112 | input[type="radio"] {
113 | display: none;
114 |
115 | + span:before {
116 | content: '';
117 | font-family: 'fontawesome';
118 | border: 1px solid $black;
119 | padding: .3rem .4rem;
120 | border-radius: 100%;
121 | transition: .2s;
122 | color: rgba(255, 255, 255, 0);
123 | font-size: 14px;
124 | }
125 | }
126 |
127 | input[type="radio"]:checked + span:before {
128 | content: '';
129 | font-family: 'fontawesome';
130 | border: 1px solid $black;
131 | padding: .3rem .4rem;
132 | border-radius: 100%;
133 | transition: .2s;
134 | color: $black;
135 | font-size: 14px;
136 | }
137 | }
138 |
139 | .green-input {
140 | input[type="text"],
141 | input[type="password"],
142 | input[type="email"],
143 | input[type="search"],
144 | input[type="number"],
145 | input[type="file"],
146 | input[type="tel"],
147 | input[type="url"],
148 | select,
149 | textarea,
150 | textarea[type="text"] {
151 | border-color: $green;
152 |
153 | &:focus {
154 | border-color: $blue;
155 | }
156 | }
157 |
158 | span:before {
159 | color: $green;
160 | }
161 | }
162 |
163 | .black-input {
164 | input[type="text"],
165 | input[type="password"],
166 | input[type="email"],
167 | input[type="search"],
168 | input[type="number"],
169 | input[type="file"],
170 | input[type="tel"],
171 | input[type="url"],
172 | select,
173 | textarea,
174 | textarea[type="text"] {
175 | border-color: $black;
176 |
177 | &:focus {
178 | border-color: lighten($black, 10);
179 | }
180 | }
181 |
182 | span:before {
183 | color: $black;
184 | }
185 | }
186 |
187 | .orange-input {
188 | input[type="text"],
189 | input[type="password"],
190 | input[type="email"],
191 | input[type="search"],
192 | input[type="number"],
193 | input[type="file"],
194 | input[type="tel"],
195 | input[type="url"],
196 | select,
197 | textarea,
198 | textarea[type="text"] {
199 | border-color: $orange-btn;
200 |
201 | &:focus {
202 | border-color: $yellow;
203 | }
204 | }
205 |
206 | span:before {
207 | color: $orange-btn;
208 | }
209 | }
210 |
211 | .purple-input {
212 | input[type="text"],
213 | input[type="password"],
214 | input[type="email"],
215 | input[type="search"],
216 | input[type="number"],
217 | input[type="file"],
218 | input[type="tel"],
219 | input[type="url"],
220 | select,
221 | textarea,
222 | textarea[type="text"] {
223 | border-color: $purple-btn;
224 |
225 | &:focus {
226 | border-color: $dark-blue;
227 | }
228 | }
229 |
230 | span:before {
231 | color: $purple-btn;
232 | }
233 | }
234 |
235 | .green-checkbox {
236 | + span:before {
237 | border-color: $green !important;
238 | color: rgba(255, 255, 255, 0) !important;
239 | }
240 | }
241 |
242 | .green-checkbox:checked + span:before {
243 | color: $green !important;
244 | }
245 |
246 | .black-checkbox {
247 | + span:before {
248 | border-color: $black !important;
249 | color: rgba(255, 255, 255, 0) !important;
250 | }
251 | }
252 |
253 | .black-checkbox:checked + span:before {
254 | color: $black !important;
255 | }
256 |
257 | .orange-checkbox {
258 | + span:before {
259 | border-color: $orange-btn !important;
260 | color: rgba(255, 255, 255, 0) !important;
261 | }
262 | }
263 |
264 | .orange-checkbox:checked + span:before {
265 | color: $orange-btn !important;
266 | }
267 |
268 | .purple-checkbox {
269 | + span:before {
270 |
271 | border-color: $purple-btn !important;
272 | color: rgba(255, 255, 255, 0) !important;
273 | }
274 | }
275 |
276 | .purple-checkbox:checked + span:before {
277 | color: $purple-btn !important;
278 | }
--------------------------------------------------------------------------------
/sass/gradient.scss:
--------------------------------------------------------------------------------
1 | @import "colors";
2 | @import "mixins";
3 |
4 | .gradient-green {
5 | @include linear-gradient($green, $blue);
6 | }
7 |
8 | .gradient-orange {
9 | @include linear-gradient($yellow, $orange);
10 | }
11 |
12 | .gradient-purple {
13 | @include linear-gradient($dark-blue, $purple);
14 | }
15 |
--------------------------------------------------------------------------------
/sass/grid.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .full-container {
4 | margin: 0 auto;
5 | width: 100%;
6 | }
7 |
8 | .flex-container {
9 | display: flex;
10 | align-items: center;
11 | justify-content: space-between;
12 | }
13 |
14 | .small-container {
15 | margin: 0 auto;
16 | max-width: 960px;
17 | width: 90%;
18 |
19 | @media #{$medium-and-up} {
20 | width: 90%;
21 | }
22 | @media #{$large-and-up} {
23 | width: 100%;
24 | }
25 | }
26 |
27 | .container {
28 | margin: 0 auto;
29 | max-width: 1280px;
30 | width: 90%;
31 |
32 | @media #{$medium-and-up} {
33 | width: 85%;
34 | }
35 | @media #{$large-and-up} {
36 | width: 70%;
37 | }
38 | }
39 |
40 | .row {
41 | margin-left: (-1 * $gutter-width / 2);
42 | margin-right: (-1 * $gutter-width / 2);
43 | }
44 |
45 | @mixin reset-offset {
46 | margin-left: auto;
47 | left: auto;
48 | right: auto;
49 | }
50 |
51 | @mixin grid-classes($size, $i, $perc) {
52 | &.offset-#{$size}#{$i} {
53 | margin-left: $perc;
54 | }
55 | &.pull-#{$size}#{$i} {
56 | right: $perc;
57 | }
58 | &.push-#{$size}#{$i} {
59 | left: $perc;
60 | }
61 | }
62 |
63 | .center-text {
64 | text-align: center;
65 | }
66 |
67 | .left-text {
68 | text-align: left;
69 | }
70 |
71 | .right-text {
72 | text-align: right;
73 | }
74 |
75 | .row {
76 | margin-bottom: .5rem;
77 | margin-left: auto;
78 | margin-right: auto;
79 |
80 | &:after {
81 | content: "";
82 | display: table;
83 | clear: both;
84 | }
85 |
86 | .column {
87 | box-sizing: border-box;
88 | padding: 0 $gutter-width / 2;
89 | min-height: 1px;
90 | float: left;
91 |
92 | $i: 1;
93 | @while $i <= $number-columns {
94 | $perc: unquote((100 / ($number-columns / $i)) + "%");
95 |
96 | &.small-#{$i} {
97 | width: $perc;
98 | @include reset-offset;
99 | }
100 |
101 | $i: $i + 1;
102 | }
103 |
104 | @media #{$medium-and-up} {
105 | $i: 1;
106 |
107 | @while $i <= $number-columns {
108 | $perc: unquote((100 / ($number-columns / $i)) + "%");
109 |
110 | &.medium-#{$i} {
111 | width: $perc;
112 | @include reset-offset;
113 | }
114 |
115 | $i: $i + 1;
116 | }
117 | }
118 |
119 | @media #{$large-and-up} {
120 | $i: 1;
121 |
122 | @while $i <= $number-columns {
123 | $perc: unquote((100 / ($number-columns / $i)) + "%");
124 |
125 | &.large-#{$i} {
126 | width: $perc;
127 | @include reset-offset;
128 | }
129 |
130 | $i: $i + 1;
131 | }
132 | }
133 |
134 | @media #{$extra-large-and-up} {
135 | $i: 1;
136 |
137 | @while $i <= $number-columns {
138 | $perc: unquote((100 / ($number-columns / $i)) + "%");
139 |
140 | &.xlarge-#{$i} {
141 | width: $perc;
142 | @include reset-offset;
143 | }
144 |
145 | $i: $i + 1;
146 | }
147 | }
148 | }
149 | }
150 |
151 | .hide-tablet-down {
152 | @media #{$medium-and-down} {
153 | display: none;
154 | }
155 | }
156 |
157 | .hide-mobile {
158 | @media #{$small-and-down} {
159 | display: none;
160 | }
161 | }
162 |
163 | .hide {
164 | display: none;
165 | }
166 |
--------------------------------------------------------------------------------
/sass/main.scss:
--------------------------------------------------------------------------------
1 | @import "colors";
2 | @import "fonts";
3 | @import "gradient";
4 | @import "default";
5 | @import "grid";
6 | @import "forms";
7 | @import "cards";
8 | @import "buttons";
9 | @import "media";
10 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i');
11 |
12 | body {
13 | font-family: 'Roboto', sans-serif;
14 | padding: 0;
15 | margin: 0;
16 | }
17 |
--------------------------------------------------------------------------------
/sass/media.scss:
--------------------------------------------------------------------------------
1 | .responsive-image {
2 | overflow: hidden;
3 |
4 | img {
5 | width: 100%;
6 | }
7 | }
8 |
9 | .responsive-video {
10 | position: relative;
11 | padding-bottom: 56.25%;
12 | height: 0;
13 | overflow: hidden;
14 |
15 | iframe,
16 | object,
17 | embed {
18 | position: absolute;
19 | top: 0;
20 | left: 0;
21 | width: 100%;
22 | height: 100%;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/sass/mixins.scss:
--------------------------------------------------------------------------------
1 | @function is-direction($value) {
2 | $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
3 | $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
4 |
5 | @return $is-keyword or $is-angle;
6 | }
7 |
8 | @function legacy-direction($value) {
9 | @if is-direction($value) == false {
10 | @error "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be a direction.";
11 | }
12 |
13 | $conversion-map: (
14 | to top : bottom,
15 | to top right : bottom left,
16 | to right top : left bottom,
17 | to right : left,
18 | to bottom right : top left,
19 | to right bottom : left top,
20 | to bottom : top,
21 | to bottom left : top right,
22 | to left bottom : right top,
23 | to left : right,
24 | to left top : right bottom,
25 | to top left : bottom right
26 | );
27 |
28 | @if map-has-key($conversion-map, $value) {
29 | @return map-get($conversion-map, $value);
30 | }
31 |
32 | @return 90deg - $value;
33 | }
34 |
35 | @mixin linear-gradient($direction, $color-stops...) {
36 | // Direction has been omitted and happens to be a color-stop
37 | @if is-direction($direction) == false {
38 | $color-stops: $direction, $color-stops;
39 | $direction: 80deg;
40 | }
41 |
42 | background: nth(nth($color-stops, 1), 1);
43 | background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
44 | background: linear-gradient($direction, $color-stops);
45 | }
--------------------------------------------------------------------------------
/sass/variables.scss:
--------------------------------------------------------------------------------
1 | $mobile-up: 601px !default;
2 | $tablet-up: 993px !default;
3 | $desk-up: 1201px !default;
4 | $mobile: 600px !default;
5 | $tablet: 992px !default;
6 | $desk: 1200px !default;
7 |
8 | $medium-and-up: "only screen and (min-width : #{$mobile-up})" !default;
9 | $large-and-up: "only screen and (min-width : #{$tablet-up})" !default;
10 | $extra-large-and-up: "only screen and (min-width : #{$desk-up})" !default;
11 | $small-and-down: "only screen and (max-width : #{$mobile})" !default;
12 | $medium-and-down: "only screen and (max-width : #{$tablet})" !default;
13 | $medium-only: "only screen and (min-width : #{$mobile-up}) and (max-width : #{$tablet})" !default;
14 |
15 | $number-columns: 12 !default;
16 | $gutter-width: 1.5rem !default;
--------------------------------------------------------------------------------
/source/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/source/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 | "directory": "bower_components"
3 | }
4 |
--------------------------------------------------------------------------------
/source/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # editorconfig.org
4 |
5 | root = true
6 |
7 |
8 | [*]
9 |
10 | # change these settings to your own preference
11 | indent_style = space
12 | indent_size = 2
13 |
14 | # we recommend you to keep these unchanged
15 | end_of_line = lf
16 | charset = utf-8
17 | trim_trailing_whitespace = true
18 | insert_final_newline = true
19 |
20 | [*.md]
21 | trim_trailing_whitespace = false
22 |
23 | [{package,bower}.json]
24 | indent_style = space
25 | indent_size = 2
26 |
--------------------------------------------------------------------------------
/source/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
--------------------------------------------------------------------------------
/source/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .tmp
4 | bower_components
5 | test/bower_components
6 |
--------------------------------------------------------------------------------
/source/.yo-rc.json:
--------------------------------------------------------------------------------
1 | {
2 | "generator-mocha": {
3 | "ui": "bdd",
4 | "rjs": false
5 | }
6 | }
--------------------------------------------------------------------------------
/source/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 ismail ghallou
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/source/README.md:
--------------------------------------------------------------------------------
1 | # unnamed-css-framework
2 | A simple css framework
3 |
--------------------------------------------------------------------------------
/source/app/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smakosh/unnamed-css-framework/6d4f694fafedfd8296ef0ce3da2a467d8f32dabc/source/app/apple-touch-icon.png
--------------------------------------------------------------------------------
/source/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smakosh/unnamed-css-framework/6d4f694fafedfd8296ef0ce3da2a467d8f32dabc/source/app/favicon.ico
--------------------------------------------------------------------------------
/source/app/images/drone2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/smakosh/unnamed-css-framework/6d4f694fafedfd8296ef0ce3da2a467d8f32dabc/source/app/images/drone2.jpg
--------------------------------------------------------------------------------
/source/app/images/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
234 |
--------------------------------------------------------------------------------
/source/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Unnamed css framework
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
29 |
30 |
37 |
38 |
75 |
76 |
Forms
77 |
78 |
79 |
104 |
105 |
129 |
130 |
154 |
155 |
179 |
182 |
Checkboxes & radio buttons
183 |
184 |
185 |
199 |
200 |
214 |
215 |
229 |
230 |
244 |
247 |
Cards
248 |
249 |
250 |
251 |
252 |
253 |
256 |
257 |
258 |
259 |
262 |
263 |
264 |
265 |
266 |
274 |
275 |
276 |
277 |
285 |
286 |
287 |
290 |
Responsive media
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
302 |
Grid
303 |
304 |
305 |
306 |
311 |
316 |
321 |
326 |
331 |
336 |
337 |
342 |
347 |
352 |
357 |
362 |
367 |
368 |
371 |
372 |
377 |
378 |
383 |
384 |
389 |
390 |
395 |
396 |
401 |
402 |
407 |
408 |
411 |
412 |
417 |
418 |
423 |
424 |
429 |
430 |
435 |
436 |
439 |
440 |
445 |
446 |
451 |
452 |
457 |
458 |
583 |
Useful classes
584 |
585 |
586 |
To center, left or right align text use these classes:
587 |
To center it
.center-text
588 |
To left align it
.left-text
589 |
To right align it use
.right-text
590 |
591 |
To hide elements:
592 |
To hide on tablet and down
.hide-tablet-down
593 |
To hide on mobile
.hide-mobile
594 |
To hide on any screen size
.hide
595 |
596 |