├── .gitignore
├── README.md
├── docs
├── designs
│ ├── event.jpg
│ └── event.psd
└── presentation
│ └── arayuz-atolye.pdf
├── index.html
├── styles-sass
├── auxiliary
│ ├── _auxiliary.scss
│ ├── _positions.scss
│ ├── _visibility.scss
│ └── _widths.scss
├── components
│ ├── _components.scss
│ ├── _media.scss
│ └── _widget.scss
├── elements
│ ├── _elements.scss
│ ├── _headings.scss
│ ├── _links.scss
│ └── _lists.scss
├── global
│ ├── _generic.scss
│ ├── _global.scss
│ └── _normalize.scss
├── layout
│ ├── _layout.scss
│ ├── _page.scss
│ └── _wrapper.scss
├── settings
│ ├── _colors.scss
│ ├── _fonts.scss
│ ├── _number-to-names.scss
│ ├── _settings.scss
│ └── _sizes.scss
├── styles.scss
└── tools
│ ├── _functions.scss
│ ├── _mixins.scss
│ └── _tools.scss
└── styles
├── styles.css
└── styles.css.map
/.gitignore:
--------------------------------------------------------------------------------
1 | .sass-cache
2 | .idea
3 | config.codekit
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Yönetilebilir Arayüz Mimarisi
2 | Günlük hayatın bir parçası olan karmaşık sistemleri, web ve mobil arayüzleri daha kolay yönetmek için planlı bir arayüz kurgusu önemli bir yere sahiptir. Bu atölye çalışmasında, bu kurguyu nasıl planlamak gerekir, geliştirirken nelere dikkat edilmeli konularının üzerinde duracağız.
3 |
4 |
5 | ### Kullanılabilecek Bazı Değişkenler
6 | #### Renkler
7 | * Temel Renk: `#c54846`
8 | * İkincil Renk: `#0072bc`
9 | * Açık Gri: `#f9f9f9`
10 | * Yazı Rengi: `#222`
11 |
12 | #### Fontlar
13 | * Font: `OpenSans`
14 | * Başlık Font: `RobotoSlab`
15 | * Ana Menü: `22px`
16 | * Metinler: `16px`
17 |
--------------------------------------------------------------------------------
/docs/designs/event.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bcinarli/scalable-frontend-architecture/0de8ea79fdd9f7daaf1b0522dc61930e86d7c568/docs/designs/event.jpg
--------------------------------------------------------------------------------
/docs/designs/event.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bcinarli/scalable-frontend-architecture/0de8ea79fdd9f7daaf1b0522dc61930e86d7c568/docs/designs/event.psd
--------------------------------------------------------------------------------
/docs/presentation/arayuz-atolye.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bcinarli/scalable-frontend-architecture/0de8ea79fdd9f7daaf1b0522dc61930e86d7c568/docs/presentation/arayuz-atolye.pdf
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Arayüz Mimarisi
8 |
9 |
10 |
11 |
12 |
13 |
Merhaba!
14 |
15 |
16 |
--------------------------------------------------------------------------------
/styles-sass/auxiliary/_auxiliary.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Auxiliary
5 | ------------------------------------------- **/
6 | //
7 | // Positions
8 | //
9 | @import "positions";
10 |
11 | //
12 | // Visibility
13 | //
14 | @import "visibility";
15 |
16 | //
17 | // Widths
18 | //
19 | @import "widths";
--------------------------------------------------------------------------------
/styles-sass/auxiliary/_positions.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 |
5 | ------------------------------------------- **/
6 | /**
7 | * Floats
8 | */
9 | .move-to-start,
10 | [dir="rtl"] .move-to-end {
11 | float: left;
12 | }
13 |
14 | .move-to-end,
15 | [dir="rtl"] .move-to-start {
16 | float: right;
17 | }
18 |
19 | /**
20 | * Aligns
21 | *
22 | * Yazı pozisyonu için `start` ve `end` tanımı yapmak `left` ve `right`
23 | * şeklinde tanım yapmaya göre daha sağlıklı ve kontrollüdür
24 | */
25 | .align-start {
26 | // ltr formatındaki diller için yazı sola yaslanır
27 | // rtl formatındaki diller için yazı sağa yaslanır
28 | text-align: start;
29 | }
30 |
31 | .align-end {
32 | // ltr formatındaki diller için yazı sağa yaslanır
33 | // rtl formatındaki diller için yazı sola yaslanır
34 | text-align: end;
35 | }
--------------------------------------------------------------------------------
/styles-sass/auxiliary/_visibility.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Visibility Related
5 | ------------------------------------------- **/
6 | /*
7 | * İçeriği gizleme
8 | */
9 | .is-hidden
10 | {
11 | display: none;
12 | }
13 |
14 |
15 | /*
16 | * Erişilebilirlik açısından sayfa görünmeyen elemanlar
17 | *
18 | */
19 | .for-screenreader-only {
20 | position: absolute;
21 | overflow: hidden;
22 | width: 1px;
23 | height: 1px;
24 | margin: -1px;
25 | padding: 0;
26 | clip: rect(0 0 0 0);
27 | clip: rect(0, 0, 0, 0);
28 | }
--------------------------------------------------------------------------------
/styles-sass/auxiliary/_widths.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Widths for General Usage
5 | ------------------------------------------- **/
6 | /**
7 | * Whole
8 | *
9 | * .one-whole { width: 100%; }
10 | */
11 | @include widths();
12 |
13 | /**
14 | * Half
15 | *
16 | * .one-half { width: 50%; }
17 | */
18 | @include widths(2);
19 |
20 | /**
21 | * Thirds
22 | *
23 | * .one-third { width: 33%; }
24 | * .two-thirds { width: 66%; }
25 | */
26 | @include widths(3);
27 |
28 | /**
29 | * Quarters
30 | *
31 | * .one-quarter { width: 25%; }
32 | * .two-quarters { width: 50%; }
33 | * .three-quarters { width: 75%; }
34 | */
35 | @include widths(4);
36 |
37 | /**
38 | * Fifths
39 | *
40 | * .one-fifth { width: 20%; }
41 | * .two-fifths { width: 40%; }
42 | * .three-fifths { width: 60%; }
43 | * .four-fifths { width: 80%; }
44 | */
45 | @include widths(5);
46 |
47 | /**
48 | * Tenths
49 | *
50 | * .one-tenth { width: 10%; }
51 | * .two-tenths { width: 20%; }
52 | * .three-tenths { width: 30%; }
53 | * ...
54 | * .nine-fifths { width: 90%; }
55 | */
56 | @include widths(10);
57 |
58 | /**
59 | * Twelfths
60 | *
61 | * .one-twelfth { width: 8.33%; }
62 | * .two-twelfths { width: 16.66%; }
63 | * .three-twelfths { width: 25%; }
64 | * ...
65 | * .ten-twelfths { width: 83.33%; }
66 | * .eleven-twelfths { width: 91.66%; }
67 | */
68 | @include widths(12);
--------------------------------------------------------------------------------
/styles-sass/components/_components.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Components
5 | ------------------------------------------- **/
6 | //
7 | // Widgets
8 | //
9 | @import "widget";
10 |
11 |
12 | //
13 | // Media
14 | //
15 | @import "media";
--------------------------------------------------------------------------------
/styles-sass/components/_media.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Media Component
5 | ------------------------------------------- **/
6 | /**
7 | * Media Item
8 | *
9 | * İçeriğinde bir media (resim, video vs.) ve metin şeklinde görünümü olan
10 | * objelerin daha rahat kontrolü için örnek benzeri bir yapı kurgulanabilir
11 | *
12 |
20 | * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
21 | */
22 | .media {
23 | @extend .group;
24 | }
25 |
26 | /**
27 | * Media bloğu içinde resmin/videonun tanımı
28 | */
29 | .media-visual {
30 | display: block;
31 | float: left;
32 | margin-right: $base-spacing;
33 | }
34 |
35 |
36 | /*
37 | *
38 | */
39 | .media-text {
40 | // metin ile alakalı genel tanımlar gelebilir
41 | padding: make-half($base-gutter);
42 |
43 | + .media-visual { // Block için önce "text" sonra "visual" tanımı olduysa
44 | float: right;
45 | margin-right: auto;
46 | margin-left: $base-spacing;
47 | }
48 | }
--------------------------------------------------------------------------------
/styles-sass/components/_widget.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Widget
5 | ------------------------------------------- **/
6 | /**
7 | * Sidebar ve içerik alanlarında kullanılan widgetlar için
8 | * temel tanımlar
9 | *
10 |
11 | İçerik kutusu/widget
12 |
13 | */
14 | .widget {
15 | position: relative;
16 | margin: $base-gutter 0;
17 | padding: $base-gutter;
18 |
19 | &:only-child {
20 | margin: 0;
21 | }
22 |
23 | &:first-child {
24 | margin-top: 0;
25 | }
26 |
27 | &:last-child {
28 | margin-bottom: 0;
29 | }
30 |
31 | // promo widget
32 | // Sass tanımları birleştirip, class çıktısını .widget-promo şeklinde veriyor
33 | &-promo {
34 | background: $color-primary;
35 | color: #fff;
36 | }
37 | }
38 |
39 |
--------------------------------------------------------------------------------
/styles-sass/elements/_elements.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Elements
5 | ------------------------------------------- **/
6 | //
7 | // Headings
8 | //
9 | @import "headings";
10 |
11 | //
12 | // Links
13 | //
14 | @import "links";
15 |
16 | //
17 | // Lists
18 | //
19 | @import "lists";
--------------------------------------------------------------------------------
/styles-sass/elements/_headings.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Headings
5 | ------------------------------------------- **/
--------------------------------------------------------------------------------
/styles-sass/elements/_links.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Linkler
5 | ------------------------------------------- **/
6 | /**
7 | * Links
8 | *
9 | * Temel link tanımları
10 | */
11 | a {
12 | display: inline-block;
13 | padding: 2px; // dokunmatik ekran için hit alanını biraz genişleiyoruz
14 | color: $base-anchor-color;
15 |
16 | nav & { // menü içindeki linklerden bazı tanımları kaldıralım
17 | color: inherit;
18 | text-decoration: none;
19 | }
20 | }
--------------------------------------------------------------------------------
/styles-sass/elements/_lists.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Lists
5 | ------------------------------------------- **/
6 | ol,
7 | ul {
8 | list-style-position: outside;
9 | padding-left: $base-gutter;
10 | }
11 |
12 | dl {
13 | padding-left: $base-gutter;
14 |
15 | dt {
16 | font-weight: bold;
17 | }
18 | }
--------------------------------------------------------------------------------
/styles-sass/global/_generic.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Generic Styles
5 | ------------------------------------------- **/
6 | /**
7 | * Grid ve benzeri kullanımlarda daha rahat genişlik hesaplamak için
8 | * bütün elemanların `box-sizing` tanımını `border-box` olarak ayarlayalım
9 | */
10 | html {
11 | box-sizing: border-box;
12 | }
13 |
14 | * {
15 | &,
16 | &:after,
17 | &:before {
18 | box-sizing: inherit;
19 | }
20 | }
21 |
22 | /**
23 | * normalize.css'den gelen bazı tanımları genel tanımlarımız ile eşitleyelim
24 | */
25 | hr,
26 | input[type="search"] {
27 | box-sizing: inherit;
28 | }
29 |
30 | /**
31 | * Sayfa boyutlarını daha rahat kullanmak için `html` ve `body`
32 | * genişlik tanımlarını 100% olarak veriyoruz.
33 | * Bütün görünür alanı kullanmak için `margin` ve `padding` tanımlarını
34 | * `html` ve `body` elemanlarından kaldırıyoruz.
35 | */
36 | html, body {
37 | width: 100%;
38 | height: 100%;
39 | margin: 0;
40 | padding: 0;
41 | }
42 |
43 |
44 | /**
45 | * Bu elemanlarda hemen hemen hiç bir zaman üst taraftaki ön tanımlı
46 | * `margin` kullanılmadığı için, bu değer kaldırıyoruz.
47 | */
48 |
49 | h1, h2, h3, h4, h5, h6,
50 | p,
51 | ul, ol, li,
52 | table, th, td {
53 | margin-top: 0;
54 | padding: 0;
55 | }
56 |
57 |
58 | /**
59 | * Clearfix
60 | * Daha anlamlı ve amacına uygun isimlendirmek için `group`
61 | * olarak tanımladık. Zaten burada yapılan iş de, elemanları
62 | * yan yan bir "grup" için de düzgün olarak göstermek :)
63 | */
64 | .group {
65 | &:after {
66 | content: "";
67 | display: table;
68 | clear: both;
69 | }
70 | }
--------------------------------------------------------------------------------
/styles-sass/global/_global.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Globals
5 | ------------------------------------------- **/
6 | //
7 | // Normalize.css
8 | //
9 | @import "normalize";
10 |
11 |
12 | //
13 | // Generic
14 | //
15 | @import "generic";
--------------------------------------------------------------------------------
/styles-sass/global/_normalize.scss:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
29 | * Correct `block` display not defined for `main` in IE 11.
30 | */
31 |
32 | article,
33 | aside,
34 | details,
35 | figcaption,
36 | figure,
37 | footer,
38 | header,
39 | hgroup,
40 | main,
41 | nav,
42 | section,
43 | summary {
44 | display: block;
45 | }
46 |
47 | /**
48 | * 1. Correct `inline-block` display not defined in IE 8/9.
49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
50 | */
51 |
52 | audio,
53 | canvas,
54 | progress,
55 | video {
56 | display: inline-block; /* 1 */
57 | vertical-align: baseline; /* 2 */
58 | }
59 |
60 | /**
61 | * Prevent modern browsers from displaying `audio` without controls.
62 | * Remove excess height in iOS 5 devices.
63 | */
64 |
65 | audio:not([controls]) {
66 | display: none;
67 | height: 0;
68 | }
69 |
70 | /**
71 | * Address `[hidden]` styling not present in IE 8/9/10.
72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
73 | */
74 |
75 | [hidden],
76 | template {
77 | display: none;
78 | }
79 |
80 | /* Links
81 | ========================================================================== */
82 |
83 | /**
84 | * Remove the gray background color from active links in IE 10.
85 | */
86 |
87 | a {
88 | background: transparent;
89 | }
90 |
91 | /**
92 | * Improve readability when focused and also mouse hovered in all browsers.
93 | */
94 |
95 | a:active,
96 | a:hover {
97 | outline: 0;
98 | }
99 |
100 | /* Text-level semantics
101 | ========================================================================== */
102 |
103 | /**
104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105 | */
106 |
107 | abbr[title] {
108 | border-bottom: 1px dotted;
109 | }
110 |
111 | /**
112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113 | */
114 |
115 | b,
116 | strong {
117 | font-weight: bold;
118 | }
119 |
120 | /**
121 | * Address styling not present in Safari and Chrome.
122 | */
123 |
124 | dfn {
125 | font-style: italic;
126 | }
127 |
128 | /**
129 | * Address variable `h1` font-size and margin within `section` and `article`
130 | * contexts in Firefox 4+, Safari, and Chrome.
131 | */
132 |
133 | h1 {
134 | font-size: 2em;
135 | margin: 0.67em 0;
136 | }
137 |
138 | /**
139 | * Address styling not present in IE 8/9.
140 | */
141 |
142 | mark {
143 | background: #ff0;
144 | color: #000;
145 | }
146 |
147 | /**
148 | * Address inconsistent and variable font size in all browsers.
149 | */
150 |
151 | small {
152 | font-size: 80%;
153 | }
154 |
155 | /**
156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
157 | */
158 |
159 | sub,
160 | sup {
161 | font-size: 75%;
162 | line-height: 0;
163 | position: relative;
164 | vertical-align: baseline;
165 | }
166 |
167 | sup {
168 | top: -0.5em;
169 | }
170 |
171 | sub {
172 | bottom: -0.25em;
173 | }
174 |
175 | /* Embedded content
176 | ========================================================================== */
177 |
178 | /**
179 | * Remove border when inside `a` element in IE 8/9/10.
180 | */
181 |
182 | img {
183 | border: 0;
184 | }
185 |
186 | /**
187 | * Correct overflow not hidden in IE 9/10/11.
188 | */
189 |
190 | svg:not(:root) {
191 | overflow: hidden;
192 | }
193 |
194 | /* Grouping content
195 | ========================================================================== */
196 |
197 | /**
198 | * Address margin not present in IE 8/9 and Safari.
199 | */
200 |
201 | figure {
202 | margin: 1em 40px;
203 | }
204 |
205 | /**
206 | * Address differences between Firefox and other browsers.
207 | */
208 |
209 | hr {
210 | -moz-box-sizing: content-box;
211 | box-sizing: content-box;
212 | height: 0;
213 | }
214 |
215 | /**
216 | * Contain overflow in all browsers.
217 | */
218 |
219 | pre {
220 | overflow: auto;
221 | }
222 |
223 | /**
224 | * Address odd `em`-unit font size rendering in all browsers.
225 | */
226 |
227 | code,
228 | kbd,
229 | pre,
230 | samp {
231 | font-family: monospace, monospace;
232 | font-size: 1em;
233 | }
234 |
235 | /* Forms
236 | ========================================================================== */
237 |
238 | /**
239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
240 | * styling of `select`, unless a `border` property is set.
241 | */
242 |
243 | /**
244 | * 1. Correct color not being inherited.
245 | * Known issue: affects color of disabled elements.
246 | * 2. Correct font properties not being inherited.
247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248 | */
249 |
250 | button,
251 | input,
252 | optgroup,
253 | select,
254 | textarea {
255 | color: inherit; /* 1 */
256 | font: inherit; /* 2 */
257 | margin: 0; /* 3 */
258 | }
259 |
260 | /**
261 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
262 | */
263 |
264 | button {
265 | overflow: visible;
266 | }
267 |
268 | /**
269 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
270 | * All other form control elements do not inherit `text-transform` values.
271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272 | * Correct `select` style inheritance in Firefox.
273 | */
274 |
275 | button,
276 | select {
277 | text-transform: none;
278 | }
279 |
280 | /**
281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282 | * and `video` controls.
283 | * 2. Correct inability to style clickable `input` types in iOS.
284 | * 3. Improve usability and consistency of cursor style between image-type
285 | * `input` and others.
286 | */
287 |
288 | button,
289 | html input[type="button"], /* 1 */
290 | input[type="reset"],
291 | input[type="submit"] {
292 | -webkit-appearance: button; /* 2 */
293 | cursor: pointer; /* 3 */
294 | }
295 |
296 | /**
297 | * Re-set default cursor for disabled elements.
298 | */
299 |
300 | button[disabled],
301 | html input[disabled] {
302 | cursor: default;
303 | }
304 |
305 | /**
306 | * Remove inner padding and border in Firefox 4+.
307 | */
308 |
309 | button::-moz-focus-inner,
310 | input::-moz-focus-inner {
311 | border: 0;
312 | padding: 0;
313 | }
314 |
315 | /**
316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
317 | * the UA stylesheet.
318 | */
319 |
320 | input {
321 | line-height: normal;
322 | }
323 |
324 | /**
325 | * It's recommended that you don't attempt to style these elements.
326 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
327 | *
328 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
329 | * 2. Remove excess padding in IE 8/9/10.
330 | */
331 |
332 | input[type="checkbox"],
333 | input[type="radio"] {
334 | box-sizing: border-box; /* 1 */
335 | padding: 0; /* 2 */
336 | }
337 |
338 | /**
339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
340 | * `font-size` values of the `input`, it causes the cursor style of the
341 | * decrement button to change from `default` to `text`.
342 | */
343 |
344 | input[type="number"]::-webkit-inner-spin-button,
345 | input[type="number"]::-webkit-outer-spin-button {
346 | height: auto;
347 | }
348 |
349 | /**
350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352 | * (include `-moz` to future-proof).
353 | */
354 |
355 | input[type="search"] {
356 | -webkit-appearance: textfield; /* 1 */
357 | -moz-box-sizing: content-box;
358 | -webkit-box-sizing: content-box; /* 2 */
359 | box-sizing: content-box;
360 | }
361 |
362 | /**
363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364 | * Safari (but not Chrome) clips the cancel button when the search input has
365 | * padding (and `textfield` appearance).
366 | */
367 |
368 | input[type="search"]::-webkit-search-cancel-button,
369 | input[type="search"]::-webkit-search-decoration {
370 | -webkit-appearance: none;
371 | }
372 |
373 | /**
374 | * Define consistent border, margin, and padding.
375 | */
376 |
377 | fieldset {
378 | border: 1px solid #c0c0c0;
379 | margin: 0 2px;
380 | padding: 0.35em 0.625em 0.75em;
381 | }
382 |
383 | /**
384 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386 | */
387 |
388 | legend {
389 | border: 0; /* 1 */
390 | padding: 0; /* 2 */
391 | }
392 |
393 | /**
394 | * Remove default vertical scrollbar in IE 8/9/10/11.
395 | */
396 |
397 | textarea {
398 | overflow: auto;
399 | }
400 |
401 | /**
402 | * Don't inherit the `font-weight` (applied by a rule above).
403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404 | */
405 |
406 | optgroup {
407 | font-weight: bold;
408 | }
409 |
410 | /* Tables
411 | ========================================================================== */
412 |
413 | /**
414 | * Remove most spacing between table cells.
415 | */
416 |
417 | table {
418 | border-collapse: collapse;
419 | border-spacing: 0;
420 | }
421 |
422 | td,
423 | th {
424 | padding: 0;
425 | }
--------------------------------------------------------------------------------
/styles-sass/layout/_layout.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Layout
5 | ------------------------------------------- **/
6 | //
7 | // Page
8 | //
9 | @import "page";
10 |
11 | //
12 | // Wrapper
13 | //
14 | @import "wrapper";
--------------------------------------------------------------------------------
/styles-sass/layout/_page.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Sayfa Temel Değerleri
5 | ------------------------------------------- **/
6 | html,
7 | body {
8 | font: $base-font-size $base-font-family;
9 | line-height: $base-line-height;
10 | color: $base-color;
11 | }
--------------------------------------------------------------------------------
/styles-sass/layout/_wrapper.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Page Wrap
5 | ------------------------------------------- **/
6 | .page-wrap {
7 | position: relative;
8 | max-width: $base-max-width;
9 | margin: 0 auto;
10 | }
--------------------------------------------------------------------------------
/styles-sass/settings/_colors.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Colors
5 | ------------------------------------------- **/
6 | /**
7 | * Named Colors
8 | *
9 | * Diğer renk tanımlarında tekrar kullanmak için
10 | * temel sayfa renk kodları
11 | */
12 | $color-primary : #c54846;
13 | $color-secondary : #0072bc;
14 | $color-text : #222;
15 |
16 |
17 | /**
18 | * Text renkleri
19 | */
20 | $base-color: $color-text;
21 | $base-anchor-color: $color-primary;
--------------------------------------------------------------------------------
/styles-sass/settings/_fonts.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Font Vars
5 | ------------------------------------------- **/
6 | /**
7 | * Default font definitions
8 | */
9 | $base-font-size : 16px;
10 | $base-font-family : "OpenSans", Helvetica, Arial, sans-serif;
11 | $base-line-height : 1.5;
--------------------------------------------------------------------------------
/styles-sass/settings/_number-to-names.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Number to Name Conversions
5 | ------------------------------------------- **/
6 | $numbers: one two three four five six seven eight nine ten eleven twelve;
7 |
8 | $ordinals: whole half third quarter fifth sixth seventh eighth ninth tenth eleventh twelfth;
9 | $ordinals-plural: whole half thirds quarters fifths sixths sevenths eighths ninths tenths elevenths twelfths;
--------------------------------------------------------------------------------
/styles-sass/settings/_settings.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Settings
5 | ------------------------------------------- **/
6 | //
7 | // Number to names
8 | //
9 | @import "number-to-names";
10 |
11 | //
12 | // Fonts
13 | //
14 | @import "fonts";
15 |
16 |
17 | //
18 | // Colors
19 | //
20 | @import "colors";
21 |
22 |
23 | //
24 | // Sizes
25 | //
26 | @import "sizes";
--------------------------------------------------------------------------------
/styles-sass/settings/_sizes.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Genel boyut tanımları
5 | ------------------------------------------- **/
6 | /**
7 | * Eleman içerik boşlukları
8 | */
9 | $base-spacing: 1em;
10 | $base-input-spacing: 5px;
11 |
12 |
13 | /**
14 | * Grid aralıkları ve grid sayısı
15 | */
16 |
17 | $base-gutter: 20px;
18 | $base-grid-columns: 12;
19 |
20 |
21 | /**
22 | * Border Widths
23 | *
24 | * Input vs. elemanları için default border genişliği
25 | */
26 | $base-border-width: 1px;
27 |
28 |
29 | /**
30 | * Page Widths
31 | *
32 | * Elemanların genel genişlikleri
33 | */
34 | $base-max-width: 1180px;
--------------------------------------------------------------------------------
/styles-sass/styles.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Styles
5 | ------------------------------------------- **/
6 | /*
7 | * Sayfalarda kullanılan ortak stiller
8 | *
9 | * Tekrar kullanlabilirliği artırmak ve overwriteları azaltmak için
10 | * genelden özele doğru bir kurgu ile kodlar birleştirilmelidir.
11 | */
12 |
13 |
14 | /*
15 | * AYARLAR - DEĞİŞKENLER
16 | *
17 | * Stil tanımlarını yaparken sistem boyunca ortak kullanılacak değişkenler
18 | * Boyutlar, renkler vs.
19 | */
20 | @import "settings/settings";
21 |
22 |
23 | /*
24 | * ARAÇLAR
25 | *
26 | * Benzer çıktıları verecek kod blokları için sass mixin ve fonksiyonları
27 | */
28 | @import "tools/tools";
29 |
30 |
31 | /*
32 | * GLOBAL
33 | *
34 | * Bütün sayfa ögelerini kapsayan genel tanımlar
35 | * normalize.css vs.
36 | */
37 | @import "global/global";
38 |
39 |
40 | /*
41 | * LAYOUT
42 | *
43 | * Sayfanın layout ve içerik yerleşimi olarak bütün ele alınıp tanımlanması
44 | * page, wrapper, main, sidebar vs.
45 | */
46 | @import "layout/layout";
47 |
48 |
49 | /*
50 | * Elements
51 | *
52 | * Herhangi bir class eklenmeden html elemanlarının temel görünüm/davranışları
53 | * `h1`, `ol`, `blockquote` vs.
54 | */
55 | @import "elements/elements";
56 |
57 |
58 | /*
59 | * Components
60 | *
61 | * Sayfanın kurgusunu oluşturan componentlerin tanımları
62 | * menu, box, search-field vs
63 | */
64 | @import "components/components";
65 |
66 |
67 | /*
68 | * Auxiliary
69 | *
70 | * Eklendiğinde duruma göre diğer bütün tanımları iptal edecek, görünürlük, boyutu
71 | * düzenleyecek yardımcı tanımlar
72 | * `.is-hidden`, `.move-to-start` vs.
73 | */
74 | @import "auxiliary/auxiliary";
--------------------------------------------------------------------------------
/styles-sass/tools/_functions.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Fonksiyonlar
5 | ------------------------------------------- **/
6 | /**
7 | * Matematiksel işlemler
8 | */
9 | @function make-half($number){
10 | @return round($number / 2);
11 | }
12 |
13 | @function do-double($number) {
14 | @return $number * 2;
15 | }
--------------------------------------------------------------------------------
/styles-sass/tools/_mixins.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Mixins
5 | ------------------------------------------- **/
6 | /**
7 | * Genişlik ile alakalı tanımlar
8 | *
9 | * @param $column: ilgili tanımda bir satırda olan maximum eleman sayısı
10 | *
11 | * @depends $numbers: anlaşılabilir/anlamlı class isimlendirme için number-to-class değişkenleri
12 | * @depends $ordinals: anlaşılabilir/anlamlı class isimlendirme
13 | */
14 | @mixin widths($column: 1){
15 | $chunk-size: 100/$column;
16 | $end: $column - 1; // last size always 100% so no need to define it every time
17 |
18 | @if $end == 0 {
19 | $end: 1;
20 | }
21 |
22 | @for $i from 1 through $end {
23 | $ord: nth($ordinals-plural, $column);
24 |
25 | .#{nth($numbers, $i)}-#{$ord} {
26 | width: ($chunk-size * $i) * 1%;
27 | }
28 |
29 | @if $column > 2 and $i == 1 {
30 | // also add singular version
31 | .#{nth($numbers, $i)}-#{nth($ordinals, $column)} {
32 | @extend .#{nth($numbers, $i)}-#{$ord};
33 | }
34 | }
35 | }
36 | }
--------------------------------------------------------------------------------
/styles-sass/tools/_tools.scss:
--------------------------------------------------------------------------------
1 | /* @author Bilal Cinarli */
2 |
3 | /** -------------------------------------------
4 | Araçlar
5 | ------------------------------------------- **/
6 | //
7 | // Functions
8 | //
9 | @import "functions";
10 |
11 | //
12 | // Mixins
13 | //
14 | @import "mixins";
--------------------------------------------------------------------------------
/styles/styles.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | /* @author Bilal Cinarli */
3 | /** -------------------------------------------
4 | Styles
5 | ------------------------------------------- **/
6 | /*
7 | * Sayfalarda kullanılan ortak stiller
8 | *
9 | * Tekrar kullanlabilirliği artırmak ve overwriteları azaltmak için
10 | * genelden özele doğru bir kurgu ile kodlar birleştirilmelidir.
11 | */
12 | /*
13 | * AYARLAR - DEĞİŞKENLER
14 | *
15 | * Stil tanımlarını yaparken sistem boyunca ortak kullanılacak değişkenler
16 | * Boyutlar, renkler vs.
17 | */
18 | /* @author Bilal Cinarli */
19 | /** -------------------------------------------
20 | Settings
21 | ------------------------------------------- **/
22 | /* @author Bilal Cinarli */
23 | /** -------------------------------------------
24 | Number to Name Conversions
25 | ------------------------------------------- **/
26 | /* @author Bilal Cinarli */
27 | /** -------------------------------------------
28 | Font Vars
29 | ------------------------------------------- **/
30 | /**
31 | * Default font definitions
32 | */
33 | /* @author Bilal Cinarli */
34 | /** -------------------------------------------
35 | Colors
36 | ------------------------------------------- **/
37 | /**
38 | * Named Colors
39 | *
40 | * Diğer renk tanımlarında tekrar kullanmak için
41 | * temel sayfa renk kodları
42 | */
43 | /**
44 | * Text renkleri
45 | */
46 | /* @author Bilal Cinarli */
47 | /** -------------------------------------------
48 | Genel boyut tanımları
49 | ------------------------------------------- **/
50 | /**
51 | * Eleman içerik boşlukları
52 | */
53 | /**
54 | * Grid aralıkları ve grid sayısı
55 | */
56 | /**
57 | * Border Widths
58 | *
59 | * Input vs. elemanları için default border genişliği
60 | */
61 | /**
62 | * Page Widths
63 | *
64 | * Elemanların genel genişlikleri
65 | */
66 | /*
67 | * ARAÇLAR
68 | *
69 | * Benzer çıktıları verecek kod blokları için sass mixin ve fonksiyonları
70 | */
71 | /* @author Bilal Cinarli */
72 | /** -------------------------------------------
73 | Araçlar
74 | ------------------------------------------- **/
75 | /* @author Bilal Cinarli */
76 | /** -------------------------------------------
77 | Fonksiyonlar
78 | ------------------------------------------- **/
79 | /**
80 | * Matematiksel işlemler
81 | */
82 | /* @author Bilal Cinarli */
83 | /** -------------------------------------------
84 | Mixins
85 | ------------------------------------------- **/
86 | /**
87 | * Genişlik ile alakalı tanımlar
88 | *
89 | * @param $column: ilgili tanımda bir satırda olan maximum eleman sayısı
90 | *
91 | * @depends $numbers: anlaşılabilir/anlamlı class isimlendirme için number-to-class değişkenleri
92 | * @depends $ordinals: anlaşılabilir/anlamlı class isimlendirme
93 | */
94 | /*
95 | * GLOBAL
96 | *
97 | * Bütün sayfa ögelerini kapsayan genel tanımlar
98 | * normalize.css vs.
99 | */
100 | /* @author Bilal Cinarli */
101 | /** -------------------------------------------
102 | Globals
103 | ------------------------------------------- **/
104 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
105 | /**
106 | * 1. Set default font family to sans-serif.
107 | * 2. Prevent iOS text size adjust after orientation change, without disabling
108 | * user zoom.
109 | */
110 | html {
111 | font-family: sans-serif;
112 | /* 1 */
113 | -ms-text-size-adjust: 100%;
114 | /* 2 */
115 | -webkit-text-size-adjust: 100%;
116 | /* 2 */
117 | }
118 |
119 | /**
120 | * Remove default margin.
121 | */
122 | body {
123 | margin: 0;
124 | }
125 |
126 | /* HTML5 display definitions
127 | ========================================================================== */
128 | /**
129 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
130 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
131 | * Correct `block` display not defined for `main` in IE 11.
132 | */
133 | article,
134 | aside,
135 | details,
136 | figcaption,
137 | figure,
138 | footer,
139 | header,
140 | hgroup,
141 | main,
142 | nav,
143 | section,
144 | summary {
145 | display: block;
146 | }
147 |
148 | /**
149 | * 1. Correct `inline-block` display not defined in IE 8/9.
150 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
151 | */
152 | audio,
153 | canvas,
154 | progress,
155 | video {
156 | display: inline-block;
157 | /* 1 */
158 | vertical-align: baseline;
159 | /* 2 */
160 | }
161 |
162 | /**
163 | * Prevent modern browsers from displaying `audio` without controls.
164 | * Remove excess height in iOS 5 devices.
165 | */
166 | audio:not([controls]) {
167 | display: none;
168 | height: 0;
169 | }
170 |
171 | /**
172 | * Address `[hidden]` styling not present in IE 8/9/10.
173 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
174 | */
175 | [hidden],
176 | template {
177 | display: none;
178 | }
179 |
180 | /* Links
181 | ========================================================================== */
182 | /**
183 | * Remove the gray background color from active links in IE 10.
184 | */
185 | a {
186 | background: transparent;
187 | }
188 |
189 | /**
190 | * Improve readability when focused and also mouse hovered in all browsers.
191 | */
192 | a:active,
193 | a:hover {
194 | outline: 0;
195 | }
196 |
197 | /* Text-level semantics
198 | ========================================================================== */
199 | /**
200 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
201 | */
202 | abbr[title] {
203 | border-bottom: 1px dotted;
204 | }
205 |
206 | /**
207 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
208 | */
209 | b,
210 | strong {
211 | font-weight: bold;
212 | }
213 |
214 | /**
215 | * Address styling not present in Safari and Chrome.
216 | */
217 | dfn {
218 | font-style: italic;
219 | }
220 |
221 | /**
222 | * Address variable `h1` font-size and margin within `section` and `article`
223 | * contexts in Firefox 4+, Safari, and Chrome.
224 | */
225 | h1 {
226 | font-size: 2em;
227 | margin: 0.67em 0;
228 | }
229 |
230 | /**
231 | * Address styling not present in IE 8/9.
232 | */
233 | mark {
234 | background: #ff0;
235 | color: #000;
236 | }
237 |
238 | /**
239 | * Address inconsistent and variable font size in all browsers.
240 | */
241 | small {
242 | font-size: 80%;
243 | }
244 |
245 | /**
246 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
247 | */
248 | sub,
249 | sup {
250 | font-size: 75%;
251 | line-height: 0;
252 | position: relative;
253 | vertical-align: baseline;
254 | }
255 |
256 | sup {
257 | top: -0.5em;
258 | }
259 |
260 | sub {
261 | bottom: -0.25em;
262 | }
263 |
264 | /* Embedded content
265 | ========================================================================== */
266 | /**
267 | * Remove border when inside `a` element in IE 8/9/10.
268 | */
269 | img {
270 | border: 0;
271 | }
272 |
273 | /**
274 | * Correct overflow not hidden in IE 9/10/11.
275 | */
276 | svg:not(:root) {
277 | overflow: hidden;
278 | }
279 |
280 | /* Grouping content
281 | ========================================================================== */
282 | /**
283 | * Address margin not present in IE 8/9 and Safari.
284 | */
285 | figure {
286 | margin: 1em 40px;
287 | }
288 |
289 | /**
290 | * Address differences between Firefox and other browsers.
291 | */
292 | hr {
293 | -moz-box-sizing: content-box;
294 | box-sizing: content-box;
295 | height: 0;
296 | }
297 |
298 | /**
299 | * Contain overflow in all browsers.
300 | */
301 | pre {
302 | overflow: auto;
303 | }
304 |
305 | /**
306 | * Address odd `em`-unit font size rendering in all browsers.
307 | */
308 | code,
309 | kbd,
310 | pre,
311 | samp {
312 | font-family: monospace, monospace;
313 | font-size: 1em;
314 | }
315 |
316 | /* Forms
317 | ========================================================================== */
318 | /**
319 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
320 | * styling of `select`, unless a `border` property is set.
321 | */
322 | /**
323 | * 1. Correct color not being inherited.
324 | * Known issue: affects color of disabled elements.
325 | * 2. Correct font properties not being inherited.
326 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
327 | */
328 | button,
329 | input,
330 | optgroup,
331 | select,
332 | textarea {
333 | color: inherit;
334 | /* 1 */
335 | font: inherit;
336 | /* 2 */
337 | margin: 0;
338 | /* 3 */
339 | }
340 |
341 | /**
342 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
343 | */
344 | button {
345 | overflow: visible;
346 | }
347 |
348 | /**
349 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
350 | * All other form control elements do not inherit `text-transform` values.
351 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
352 | * Correct `select` style inheritance in Firefox.
353 | */
354 | button,
355 | select {
356 | text-transform: none;
357 | }
358 |
359 | /**
360 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
361 | * and `video` controls.
362 | * 2. Correct inability to style clickable `input` types in iOS.
363 | * 3. Improve usability and consistency of cursor style between image-type
364 | * `input` and others.
365 | */
366 | button,
367 | html input[type="button"],
368 | input[type="reset"],
369 | input[type="submit"] {
370 | -webkit-appearance: button;
371 | /* 2 */
372 | cursor: pointer;
373 | /* 3 */
374 | }
375 |
376 | /**
377 | * Re-set default cursor for disabled elements.
378 | */
379 | button[disabled],
380 | html input[disabled] {
381 | cursor: default;
382 | }
383 |
384 | /**
385 | * Remove inner padding and border in Firefox 4+.
386 | */
387 | button::-moz-focus-inner,
388 | input::-moz-focus-inner {
389 | border: 0;
390 | padding: 0;
391 | }
392 |
393 | /**
394 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
395 | * the UA stylesheet.
396 | */
397 | input {
398 | line-height: normal;
399 | }
400 |
401 | /**
402 | * It's recommended that you don't attempt to style these elements.
403 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
404 | *
405 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
406 | * 2. Remove excess padding in IE 8/9/10.
407 | */
408 | input[type="checkbox"],
409 | input[type="radio"] {
410 | box-sizing: border-box;
411 | /* 1 */
412 | padding: 0;
413 | /* 2 */
414 | }
415 |
416 | /**
417 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
418 | * `font-size` values of the `input`, it causes the cursor style of the
419 | * decrement button to change from `default` to `text`.
420 | */
421 | input[type="number"]::-webkit-inner-spin-button,
422 | input[type="number"]::-webkit-outer-spin-button {
423 | height: auto;
424 | }
425 |
426 | /**
427 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
428 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
429 | * (include `-moz` to future-proof).
430 | */
431 | input[type="search"] {
432 | -webkit-appearance: textfield;
433 | /* 1 */
434 | -moz-box-sizing: content-box;
435 | -webkit-box-sizing: content-box;
436 | /* 2 */
437 | box-sizing: content-box;
438 | }
439 |
440 | /**
441 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
442 | * Safari (but not Chrome) clips the cancel button when the search input has
443 | * padding (and `textfield` appearance).
444 | */
445 | input[type="search"]::-webkit-search-cancel-button,
446 | input[type="search"]::-webkit-search-decoration {
447 | -webkit-appearance: none;
448 | }
449 |
450 | /**
451 | * Define consistent border, margin, and padding.
452 | */
453 | fieldset {
454 | border: 1px solid #c0c0c0;
455 | margin: 0 2px;
456 | padding: 0.35em 0.625em 0.75em;
457 | }
458 |
459 | /**
460 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
461 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
462 | */
463 | legend {
464 | border: 0;
465 | /* 1 */
466 | padding: 0;
467 | /* 2 */
468 | }
469 |
470 | /**
471 | * Remove default vertical scrollbar in IE 8/9/10/11.
472 | */
473 | textarea {
474 | overflow: auto;
475 | }
476 |
477 | /**
478 | * Don't inherit the `font-weight` (applied by a rule above).
479 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
480 | */
481 | optgroup {
482 | font-weight: bold;
483 | }
484 |
485 | /* Tables
486 | ========================================================================== */
487 | /**
488 | * Remove most spacing between table cells.
489 | */
490 | table {
491 | border-collapse: collapse;
492 | border-spacing: 0;
493 | }
494 |
495 | td,
496 | th {
497 | padding: 0;
498 | }
499 |
500 | /* @author Bilal Cinarli */
501 | /** -------------------------------------------
502 | Generic Styles
503 | ------------------------------------------- **/
504 | /**
505 | * Grid ve benzeri kullanımlarda daha rahat genişlik hesaplamak için
506 | * bütün elemanların `box-sizing` tanımını `border-box` olarak ayarlayalım
507 | */
508 | html {
509 | box-sizing: border-box;
510 | }
511 |
512 | *, *:after, *:before {
513 | box-sizing: inherit;
514 | }
515 |
516 | /**
517 | * normalize.css'den gelen bazı tanımları genel tanımlarımız ile eşitleyelim
518 | */
519 | hr,
520 | input[type="search"] {
521 | box-sizing: inherit;
522 | }
523 |
524 | /**
525 | * Sayfa boyutlarını daha rahat kullanmak için `html` ve `body`
526 | * genişlik tanımlarını 100% olarak veriyoruz.
527 | * Bütün görünür alanı kullanmak için `margin` ve `padding` tanımlarını
528 | * `html` ve `body` elemanlarından kaldırıyoruz.
529 | */
530 | html, body {
531 | width: 100%;
532 | height: 100%;
533 | margin: 0;
534 | padding: 0;
535 | }
536 |
537 | /**
538 | * Bu elemanlarda hemen hemen hiç bir zaman üst taraftaki ön tanımlı
539 | * `margin` kullanılmadığı için, bu değer kaldırıyoruz.
540 | */
541 | h1, h2, h3, h4, h5, h6,
542 | p,
543 | ul, ol, li,
544 | table, th, td {
545 | margin-top: 0;
546 | padding: 0;
547 | }
548 |
549 | /**
550 | * Clearfix
551 | * Daha anlamlı ve amacına uygun isimlendirmek için `group`
552 | * olarak tanımladık. Zaten burada yapılan iş de, elemanları
553 | * yan yan bir "grup" için de düzgün olarak göstermek :)
554 | */
555 | .group:after, .media:after {
556 | content: "";
557 | display: table;
558 | clear: both;
559 | }
560 |
561 | /*
562 | * LAYOUT
563 | *
564 | * Sayfanın layout ve içerik yerleşimi olarak bütün ele alınıp tanımlanması
565 | * page, wrapper, main, sidebar vs.
566 | */
567 | /* @author Bilal Cinarli */
568 | /** -------------------------------------------
569 | Layout
570 | ------------------------------------------- **/
571 | /* @author Bilal Cinarli */
572 | /** -------------------------------------------
573 | Sayfa Temel Değerleri
574 | ------------------------------------------- **/
575 | html,
576 | body {
577 | font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
578 | line-height: 1.5;
579 | color: #222;
580 | }
581 |
582 | /* @author Bilal Cinarli */
583 | /** -------------------------------------------
584 | Page Wrap
585 | ------------------------------------------- **/
586 | .page-wrap {
587 | position: relative;
588 | max-width: 1180px;
589 | margin: 0 auto;
590 | }
591 |
592 | /*
593 | * Elements
594 | *
595 | * Herhangi bir class eklenmeden html elemanlarının temel görünüm/davranışları
596 | * `h1`, `ol`, `blockquote` vs.
597 | */
598 | /* @author Bilal Cinarli */
599 | /** -------------------------------------------
600 | Elements
601 | ------------------------------------------- **/
602 | /* @author Bilal Cinarli */
603 | /** -------------------------------------------
604 | Headings
605 | ------------------------------------------- **/
606 | /* @author Bilal Cinarli */
607 | /** -------------------------------------------
608 | Linkler
609 | ------------------------------------------- **/
610 | /**
611 | * Links
612 | *
613 | * Temel link tanımları
614 | */
615 | a {
616 | display: inline-block;
617 | padding: 2px;
618 | color: #c54846;
619 | }
620 | nav a {
621 | color: inherit;
622 | text-decoration: none;
623 | }
624 |
625 | /* @author Bilal Cinarli */
626 | /** -------------------------------------------
627 | Lists
628 | ------------------------------------------- **/
629 | ol,
630 | ul {
631 | list-style-position: outside;
632 | padding-left: 20px;
633 | }
634 |
635 | dl {
636 | padding-left: 20px;
637 | }
638 | dl dt {
639 | font-weight: bold;
640 | }
641 |
642 | /*
643 | * Components
644 | *
645 | * Sayfanın kurgusunu oluşturan componentlerin tanımları
646 | * menu, box, search-field vs
647 | */
648 | /* @author Bilal Cinarli */
649 | /** -------------------------------------------
650 | Components
651 | ------------------------------------------- **/
652 | /* @author Bilal Cinarli */
653 | /** -------------------------------------------
654 | Widget
655 | ------------------------------------------- **/
656 | /**
657 | * Sidebar ve içerik alanlarında kullanılan widgetlar için
658 | * temel tanımlar
659 | *
660 |
661 | İçerik kutusu/widget
662 |
663 | */
664 | .widget {
665 | position: relative;
666 | margin: 20px 0;
667 | padding: 20px;
668 | }
669 | .widget:only-child {
670 | margin: 0;
671 | }
672 | .widget:first-child {
673 | margin-top: 0;
674 | }
675 | .widget:last-child {
676 | margin-bottom: 0;
677 | }
678 | .widget-promo {
679 | background: #c54846;
680 | color: #fff;
681 | }
682 |
683 | /* @author Bilal Cinarli */
684 | /** -------------------------------------------
685 | Media Component
686 | ------------------------------------------- **/
687 | /**
688 | * Media Item
689 | *
690 | * İçeriğinde bir media (resim, video vs.) ve metin şeklinde görünümü olan
691 | * objelerin daha rahat kontrolü için örnek benzeri bir yapı kurgulanabilir
692 | *
693 |
701 | * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
702 | */
703 | /**
704 | * Media bloğu içinde resmin/videonun tanımı
705 | */
706 | .media-visual {
707 | display: block;
708 | float: left;
709 | margin-right: 1em;
710 | }
711 |
712 | /*
713 | *
714 | */
715 | .media-text {
716 | padding: 10px;
717 | }
718 | .media-text + .media-visual {
719 | float: right;
720 | margin-right: auto;
721 | margin-left: 1em;
722 | }
723 |
724 | /*
725 | * Auxiliary
726 | *
727 | * Eklendiğinde duruma göre diğer bütün tanımları iptal edecek, görünürlük, boyutu
728 | * düzenleyecek yardımcı tanımlar
729 | * `.is-hidden`, `.move-to-start` vs.
730 | */
731 | /* @author Bilal Cinarli */
732 | /** -------------------------------------------
733 | Auxiliary
734 | ------------------------------------------- **/
735 | /* @author Bilal Cinarli */
736 | /** -------------------------------------------
737 |
738 | ------------------------------------------- **/
739 | /**
740 | * Floats
741 | */
742 | .move-to-start,
743 | [dir="rtl"] .move-to-end {
744 | float: left;
745 | }
746 |
747 | .move-to-end,
748 | [dir="rtl"] .move-to-start {
749 | float: right;
750 | }
751 |
752 | /**
753 | * Aligns
754 | *
755 | * Yazı pozisyonu için `start` ve `end` tanımı yapmak `left` ve `right`
756 | * şeklinde tanım yapmaya göre daha sağlıklı ve kontrollüdür
757 | */
758 | .align-start {
759 | text-align: start;
760 | }
761 |
762 | .align-end {
763 | text-align: end;
764 | }
765 |
766 | /* @author Bilal Cinarli */
767 | /** -------------------------------------------
768 | Visibility Related
769 | ------------------------------------------- **/
770 | /*
771 | * İçeriği gizleme
772 | */
773 | .is-hidden {
774 | display: none;
775 | }
776 |
777 | /*
778 | * Erişilebilirlik açısından sayfa görünmeyen elemanlar
779 | *
780 | */
781 | .for-screenreader-only {
782 | position: absolute;
783 | overflow: hidden;
784 | width: 1px;
785 | height: 1px;
786 | margin: -1px;
787 | padding: 0;
788 | clip: rect(0 0 0 0);
789 | clip: rect(0, 0, 0, 0);
790 | }
791 |
792 | /* @author Bilal Cinarli */
793 | /** -------------------------------------------
794 | Widths for General Usage
795 | ------------------------------------------- **/
796 | /**
797 | * Whole
798 | *
799 | * .one-whole { width: 100%; }
800 | */
801 | .one-whole {
802 | width: 100%;
803 | }
804 |
805 | /**
806 | * Half
807 | *
808 | * .one-half { width: 50%; }
809 | */
810 | .one-half {
811 | width: 50%;
812 | }
813 |
814 | /**
815 | * Thirds
816 | *
817 | * .one-third { width: 33%; }
818 | * .two-thirds { width: 66%; }
819 | */
820 | .one-thirds, .one-third {
821 | width: 33.3333333333%;
822 | }
823 |
824 | .two-thirds {
825 | width: 66.6666666667%;
826 | }
827 |
828 | /**
829 | * Quarters
830 | *
831 | * .one-quarter { width: 25%; }
832 | * .two-quarters { width: 50%; }
833 | * .three-quarters { width: 75%; }
834 | */
835 | .one-quarters, .one-quarter {
836 | width: 25%;
837 | }
838 |
839 | .two-quarters {
840 | width: 50%;
841 | }
842 |
843 | .three-quarters {
844 | width: 75%;
845 | }
846 |
847 | /**
848 | * Fifths
849 | *
850 | * .one-fifth { width: 20%; }
851 | * .two-fifths { width: 40%; }
852 | * .three-fifths { width: 60%; }
853 | * .four-fifths { width: 80%; }
854 | */
855 | .one-fifths, .one-fifth {
856 | width: 20%;
857 | }
858 |
859 | .two-fifths {
860 | width: 40%;
861 | }
862 |
863 | .three-fifths {
864 | width: 60%;
865 | }
866 |
867 | .four-fifths {
868 | width: 80%;
869 | }
870 |
871 | /**
872 | * Tenths
873 | *
874 | * .one-tenth { width: 10%; }
875 | * .two-tenths { width: 20%; }
876 | * .three-tenths { width: 30%; }
877 | * ...
878 | * .nine-fifths { width: 90%; }
879 | */
880 | .one-tenths, .one-tenth {
881 | width: 10%;
882 | }
883 |
884 | .two-tenths {
885 | width: 20%;
886 | }
887 |
888 | .three-tenths {
889 | width: 30%;
890 | }
891 |
892 | .four-tenths {
893 | width: 40%;
894 | }
895 |
896 | .five-tenths {
897 | width: 50%;
898 | }
899 |
900 | .six-tenths {
901 | width: 60%;
902 | }
903 |
904 | .seven-tenths {
905 | width: 70%;
906 | }
907 |
908 | .eight-tenths {
909 | width: 80%;
910 | }
911 |
912 | .nine-tenths {
913 | width: 90%;
914 | }
915 |
916 | /**
917 | * Twelfths
918 | *
919 | * .one-twelfth { width: 8.33%; }
920 | * .two-twelfths { width: 16.66%; }
921 | * .three-twelfths { width: 25%; }
922 | * ...
923 | * .ten-twelfths { width: 83.33%; }
924 | * .eleven-twelfths { width: 91.66%; }
925 | */
926 | .one-twelfths, .one-twelfth {
927 | width: 8.3333333333%;
928 | }
929 |
930 | .two-twelfths {
931 | width: 16.6666666667%;
932 | }
933 |
934 | .three-twelfths {
935 | width: 25%;
936 | }
937 |
938 | .four-twelfths {
939 | width: 33.3333333333%;
940 | }
941 |
942 | .five-twelfths {
943 | width: 41.6666666667%;
944 | }
945 |
946 | .six-twelfths {
947 | width: 50%;
948 | }
949 |
950 | .seven-twelfths {
951 | width: 58.3333333333%;
952 | }
953 |
954 | .eight-twelfths {
955 | width: 66.6666666667%;
956 | }
957 |
958 | .nine-twelfths {
959 | width: 75%;
960 | }
961 |
962 | .ten-twelfths {
963 | width: 83.3333333333%;
964 | }
965 |
966 | .eleven-twelfths {
967 | width: 91.6666666667%;
968 | }
969 |
970 | /*# sourceMappingURL=styles.css.map */
971 |
--------------------------------------------------------------------------------
/styles/styles.css.map:
--------------------------------------------------------------------------------
1 | {
2 | "version": 3,
3 | "mappings": "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",
4 | "sources": ["../styles-sass/global/_normalize.scss","../styles-sass/global/_generic.scss","../styles-sass/layout/_page.scss","../styles-sass/settings/_fonts.scss","../styles-sass/settings/_colors.scss","../styles-sass/layout/_wrapper.scss","../styles-sass/settings/_sizes.scss","../styles-sass/elements/_links.scss","../styles-sass/elements/_lists.scss","../styles-sass/components/_widget.scss","../styles-sass/components/_media.scss","../styles-sass/auxiliary/_positions.scss","../styles-sass/auxiliary/_visibility.scss","../styles-sass/tools/_mixins.scss"],
5 | "names": [],
6 | "file": "styles.css"
7 | }
8 |
--------------------------------------------------------------------------------
15 |