Skip to content

docs: create first project page #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: develop
Choose a base branch
from
Open

docs: create first project page #22

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
726b6f5
docs: create first project page
ihsan-ofluoglu Jan 10, 2020
a8052ab
remove variable css space
ihsan-ofluoglu Jan 10, 2020
8551a33
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
902a198
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
cfe5181
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
42c9a83
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
16fdd36
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
0d4b9ef
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
19c3f22
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
b34f327
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
168d9d6
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
7d5bccf
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
cde5d56
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
92b1194
Update docs/getting-started/first-project.md
ihsan-ofluoglu Jan 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
327 changes: 327 additions & 0 deletions docs/getting-started/first-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,327 @@
---
id: first-project
title: Your First Project
---

Welcome to SCSS Starter.

This tutorial introduces you to essentials of SCSS Starter by walking you through building a simple card.

> New To Web Development?<br><br>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bence bu section gereksiz olmus ya. Belki seyden bahsedebiliriz. ITCSS ve BEM ile familiar degilseniz bu linklerden dokumantasyonlarina ulasabilirsiniz tarzi.

> There are many resources to complement the SCSS Starter docs. Mozilla's MDN docs includes [css](https://developer.mozilla.org/en-US/docs/Web/CSS) introductions. Get Bem docs includes [bem](http://getbem.com/introduction/) introductions.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Burada bem yerine BEMIT ye yönlendirmeliyiz.
https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/


## Setup

To get started with SCSS Starter please read the [download](download.md) documentation. In order to start, please copy the `scss` folder into your own development environment.

> The methods we mention in this documentation are based on Atölye15's own experiences over the years. These methods are rather obligations but more of suggestions. You may follow your own ways.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> The methods we mention in this documentation are based on Atölye15's own experiences over the years. These methods are rather obligations but more of suggestions. You may follow your own ways.
> The methods we mention in this documentation are based on Atölye15's own experiences over the years. These methods are not bonds but rather more of suggestions. You may follow your own ways.


## Setting Up Global Variables

You need to set your global variables prior to starting the project based on your design's needs.

### Colors

> Please refer to [colors](core/colors.md) page for further explanation.

In order to create your card component you should start with adding the colors to your `abstracts/_colors.scss` file.

1. Set the primary color variable.

```scss
$color-palette-primary: (
50: #e8eaf6,
100: #c5cae9,
200: #9fa8da,
300: #7986cb,
400: #5c6bc0,
500: #3f51b5,
600: #3949ab,
700: #303f9f,
800: #283593,
900: #1a237e,
);
```

2. To make the newly set color palette avaiable you need to use `color-palette` function. For that add `$color-palette-primary` map variable into `$g-color-palettes` map variable.

```scss
$g-color-palettes: (
'gray': $color-palette-gray,
'primary': $color-palette-primary,
);
```

3. You can now set the global color settings based on the project's needs.

```scss
$g-body-bg: color-palette('gray', 50) !default;
```

### Typography

#### Adding Fonts

To add a different font file to your project you should use `font-face` mixin in `base/_fonts.scss` file.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eger custom font kullaniyorsa fonts folder'ina nasil koyacak oraya koydugu sekli burada nasil kullanacak yazmakta fayda var bence. Iste ilk arguman adi, ikinci folder. ucunce dosya adinin extension'siz hali gibi.


```scss
@include font-face('Roboto', 'Roboto', 'Roboto-Medium', 500);
@include font-face('Roboto', 'Roboto', 'Roboto-MediumItalic', 500, italic);
```

#### Setting Variables

1. Set your font family variable by equaling your font name to `$g-font-family-primary` variable. Then add `$g-font-family-primary` variable to `$g-font-family-sans-serif` as the first value.

```scss
$g-font-family-primary: 'Roboto';
$g-font-family-sans-serif: $g-font-family-primary, 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
```

> The `$g-font-family-sans-serif` variable sets body's font family.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Burada $g-font-family-sans-serif body'nin font size'ını değiştirmiyor. Sadece sans-serif fontları tutan bir değişken


2. Font sizes are customizable but for the sake of example we are choosing not to.

```scss
$g-font-size-h1: px-to-rem(36px) !default;
$g-font-size-h2: px-to-rem(30px) !default;
$g-font-size-h3: px-to-rem(24px) !default;
$g-font-size-h4: px-to-rem(18px) !default;
$g-font-size-h5: 1rem !default;
$g-font-size-h6: px-to-rem(14px) !default;
```

3. Other heading variables are also customizable.

```scss
$g-headings-font-family: inherit !default;
$g-headings-font-weight: 500 !default;
$g-headings-line-height: 1.1 !default;
$g-headings-margin-bottom: 1rem !default;
```

> Headings and other html elements can be customized on `base/_base.scss` file. (For example: You can use a customization as shown here to set different line-height values for each heading tags. )

4. Global margin(`$g-gaps`) and padding(`$g-pads`) variables can be customized or increased based on the design's needs. (2xlarge value is added to the map.)

```scss
$g-gaps: (
normal: $g-base-gap,
small: (
$g-base-gap / 1.5,
),
xsmall: (
$g-base-gap / 3,
),
2xsmall: (
$g-base-gap / 6,
),
medium: (
$g-base-gap * (4 / 3),
),
large: (
$g-base-gap * (5 / 3),
),
xlarge: (
$g-base-gap * 2,
),
2xlarge: (
$g-base-gap * 4,
),
);
```

> When adding a new margin or padding value, please ensure that it's a children of `$g-base-gap` variable.

## Creating A Component

Start developing components after setting the global variables.

> The following steps use predefined card component from the `c-card.scss` file.

1. Create a folder `c-card` in the components folder and open the scss file `c-card.scss`.
2. Develop the card component as shown below.

```html
<div class="c-card">
<div class="c-card__header">
This is a header
</div>
<img src="https://via.placeholder.com/150" alt="Placeholder" class="c-card__image" />
<div class="c-card__content">
<h4 class="u-margin-top-0 u-margin-bottom-xsmall">This is a card.</h4>
<p class="u-margin-bottom-0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum eveniet illum aut harum ullam
dolore repudiandae pariatur optio exercitationem.
</p>
</div>
</div>
```

> Since we don't want the tags on **card content** element to be dependent to **the card component**, we have zeroed default margins of h4 and p tags by using utility classes. On the case of not using utility classes; we would need to add `c-card__title` class to h4 element and `c-card__text` class to p element.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Burada zeroed yerine reset fiilini kullanmak daha iyi olacak gibi


> By using utility classes there would be no need of creating new class names and it helps the construction to be more flexible.

```scss
.c-card {
background-color: $color-white;
border-radius: px-to-rem(4px);
box-shadow: px-to-rem(2px) px-to-rem(2px) px-to-rem(16px) rgba($color-black, 0.4);

&__header {
padding: pad(xsmall);
border-bottom: 1px solid color-palette('gray', 100);
}

&__image {
width: 100%;
height: auto;
}

&__content {
padding: pad(xsmall);
}
}
```

Result:

<div class="layout">
<div class="c-example-card">
<div class="c-example-card__header">
This is a header
</div>
<img src="https://via.placeholder.com/150" alt="" class="c-example-card__image">
<div class="c-example-card__content">
<h4 class="u-margin-top-0 u-margin-bottom-xsmall">This is a card.</h4>
<p class="u-margin-bottom-0">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum eveniet illum aut harum ullam dolore repudiandae pariatur optio exercitationem.</p>
</div>
</div>
</div>

## Grid Layout In Action

The developed component can be used in the page along with grid layout.

```html
<div class="u-padding-bottom-small">
<div class="container">
<div class="row">
<div class="col col--lg-4 u-margin-top@md-up u-margin-top-xsmall@sm-down">
<div class="c-card">...</div>
</div>
<div class="col col--lg-4 u-margin-top@md-up u-margin-top-xsmall@sm-down">
<div class="c-card">...</div>
</div>
<div class="col col--lg-4 u-margin-top@md-up u-margin-top-xsmall@sm-down">
<div class="c-card">...</div>
</div>
</div>
</div>
</div>
```

<div class="u-padding-bottom-small">
<div class="container">
<div class="row">
<div class="col col--lg-4">
<div class="c-example-card">
<div class="c-example-card__header">
This is a header
</div>
<img src="https://via.placeholder.com/150" alt="" class="c-example-card__image" />
<div class="c-example-card__content">
<h4 class="u-margin-top-0 u-margin-bottom-xsmall">This is a card.</h4>
<p class="u-margin-bottom-0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum eveniet illum aut
harum ullam dolore repudiandae pariatur optio exercitationem.
</p>
</div>
</div>
</div>
<div class="col col--lg-4">
<div class="c-example-card">
<div class="c-example-card__header">
This is a header
</div>
<img src="https://via.placeholder.com/150" alt="" class="c-example-card__image" />
<div class="c-example-card__content">
<h4 class="u-margin-top-0 u-margin-bottom-xsmall">This is a card.</h4>
<p class="u-margin-bottom-0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum eveniet illum aut
harum ullam dolore repudiandae pariatur optio exercitationem.
</p>
</div>
</div>
</div>
<div class="col col--lg-4">
<div class="c-example-card">
<div class="c-example-card__header">
This is a header
</div>
<img src="https://via.placeholder.com/150" alt="" class="c-example-card__image" />
<div class="c-example-card__content">
<h4 class="u-margin-top-0 u-margin-bottom-xsmall">This is a card.</h4>
<p class="u-margin-bottom-0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum eveniet illum aut
harum ullam dolore repudiandae pariatur optio exercitationem.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

> Please refer to [responsive utilities](utilities/responsive.md) page for learning more about responsive utilities. And refer to [grid](layout/grid.md) page for grid system usage.

## Making A Component Responsive

The component has been made responsive by adding responsive functions to the component layer.

```scss
.c-card {
background-color: $color-white;
border-radius: px-to-rem(4px);
box-shadow: px-to-rem(2px) px-to-rem(2px) px-to-rem(16px) rgba($color-black, 0.4);

@include media-brekpoint-down(md) {
display: flex;
flex-direction: row;
}

&__header {
padding: pad(xsmall);
border-bottom: 1px solid color-palette('gray', 100);

@include media-breakpoint-down(md) {
display: none;
}
}

&__image {
width: 100%;
height: auto;
}

&__content {
padding: pad(xsmall);
}
}
```

<div class="c-example-card c-example-card--mobile">
<div class="c-example-card__header">
This is a header
</div>
<img src="https://via.placeholder.com/150" alt="" class="c-example-card__image" />
<div class="c-example-card__content">
<h4 class="u-margin-top-0 u-margin-bottom-xsmall">This is a card.</h4>
<p class="u-margin-bottom-0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum eveniet illum aut
harum ullam dolore repudiandae pariatur optio exercitationem.
</p>
</div>
</div>

> Please refer to [breakpoint](core/mixins.md#breakpoint) section on the mixins page for learning more about responsive mixins.
4 changes: 2 additions & 2 deletions docs/getting-started/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ Because;
- It has well designed [architecture](getting-started/architecture.md).
- It has supportive mixins & functions.
- Every part of SCSS Starter can be customized based on your project's needs including variables, utilities, a grid system, etc.
- It is extremely easy to build responsive interfaces without extra effort. All utility classes and a grid system can be extended with responsive variants.
-SCSS Starter doesn't conflict with your own styles, because it doesn't have any styles other than the basics.
- It is extremely easy to build responsive interfaces without extra effort. All utility classes and the grid system can be extended with responsive variants.
- SCSS Starter doesn't conflict with your own styles, because it doesn't have any styles other than the basics.
- Utilities, mixins and functions can be extended if needed.

## Browser Support
Expand Down
3 changes: 3 additions & 0 deletions website/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
"getting-started/download": {
"title": "Download"
},
"getting-started/first-project": {
"title": "Your First Project"
},
"getting-started/introduction": {
"title": "Introduction"
},
Expand Down
5 changes: 3 additions & 2 deletions website/sidebars.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
{
"docs": {
"Core": ["core/colors", "core/variables", "core/mixins", "core/functions"],
"Getting Started": [
"getting-started/introduction",
"getting-started/architecture",
"getting-started/download",
"getting-started/architecture"
"getting-started/first-project"
],
"Core": ["core/colors", "core/variables", "core/mixins", "core/functions"],
"Layout": ["layout/grid"],
"Utilities": ["utilities/predefined-classes", "utilities/responsive", "utilities/customizing"]
}
Expand Down
Loading