sass otomatik class oluşturma mixin ve for loop

@mixin margin($direction) {
  @if $direction == top{
    .mt-#{$i*10}{ margin-top: $i * 10;}
  } @else if $direction == bottom{
    .mb-#{$i*10}{ margin-bottom: $i * 10;}
  }
}

@for $i from 1 through 10{
   @include margin(top)
}
@for $i from 1 through 10{
   @include margin(bottom)
}

Gruntjs file 2.version

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

gruntfile.js dosyam

module.exports = function(grunt) {

grunt.initConfig({
      
        pkg: grunt.file.readJSON('package.json'),
      

            watch: {
              options:{
                  livereload: true
              },
              css: {
                files: 'sass/style.scss',
                tasks: ['sass','uglify']
              },
            },

              sass: {                       
                dist: {                         
                  options: {                  
                    style: 'compressed'
                  },
                  files: {                      
                    'css/style.css': 'sass/style.scss',     
                  }
                }
              },

            cssmin: {
              target: {
                files: [{
                  expand: true,
                  cwd: 'css',
                  src: ['*.css', '!*.min.css'],
                  dest: 'css',
                  ext: '.min.css'
                }]
              }
            },

          uglify: {
            options: {
              mangle: false
            },
            my_target: {
              files: {
                'js/custom.min.js': ['js/custom.js']
              }
            }
          },

          express: {
            all: {
              options: {
                port: 9000,
                hostname: 'localhost',
                bases: ['.'],
                livereload: true
              }
            }
          },

        concat: {
          jquery: {
            files: {
              'js/jquery.js': ['bower_components/jquery/dist/jquery.js']
            }
          }
         }
    });



    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-express');




    grunt.registerTask('server', ['express','watch']);

  
}

Sass ile Sayfa Yenilemeden Değişiklikleri Görmek

    <script src="https://raw.githubusercontent.com/yukulele/CSSrefresh/master/cssrefresh.js"></script>

    <script>

    window.onload = function(){

        var script = document.createElement('script');

        script.src = "js/cssrefresh.js";

        document.querySelector('head').appendChild(script);

    };

    </script>

Jquery ToggleClick Fonksiyonu

  $(function() {

    $(" #sMenu ").selectmenu();

jQuery Ui Modal Kullanımı

HTML

<a href="#" class="btnc">Tıkla</a>

<div id="tmpExample" title="deneme">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus quam maxime nostrum voluptatem eveniet! Dolor repellat tenetur esse harum suscipit culpa sint ducimus assumenda eum perferendis, illo at molestiae ipsa, odio ea impedit sit. Dolorum in, laudantium tenetur fugiat atque repellat enim, sequi adipisci libero provident aliquid non ullam quidem.</p>

</div>

Jquery Ajax Load Content

HTML
    <a href="#" onclick="return false" onmousedown="getir('link1')">Anasayfa</a>&nbsp;&nbsp;&nbsp;
    <a href="#" onclick="return false" onmousedown="getir('link2')">Hakkımızda</a>&nbsp;&nbsp;&nbsp;
    <a href="#" onclick="return false" onmousedown="getir('link3')">İletişim</a>
    <div class="icerik"></div>

PHP
$phpVal = $_POST['phpVal'];

if ($phpVal == "link1") {
    echo "bu link 1 in içeriğidir";
}elseif ($phpVal == "link2") {
    include "dene.html";
}elseif ($phpVal == "link3") {
    echo "bu link 3333333 in içeriğidir";
}

JS
function getir(val){
    $(".icerik").html('<img src="load.gif" width="400" height="300" />').show();
    $.post("init.php",{phpVal:val},function(data){
        setTimeout(function(){
            $(".icerik").html(data).show();
        },500);
    });
}

Ajax ile otomatik arama

HTML
<input type="text" placeholder="ara" onkeyup="getir(this.value)" >
    <div class="sonuclar"></div>
JS
function getir(value){
    $.post("init.php",{phpValue:value},function(data){
        if (value != "") {
            $(".sonuclar").html(data);
        }else{
            $(".sonuclar").html("");
        }
    })

}   

PHP
<?php
mysql_select_db("people",mysql_connect("localhost","root",""));

$phpValue = $_POST['phpValue'];

$ara = mysql_query("select sirket from kisi where sirket like '$phpValue%'");
while ($row = mysql_fetch_array($ara)) {
    echo "<div>".$row["sirket"]."</div>";
}


?>

Jquery Ajax Php KAyıt Formu

Not:Öyle bir kullanıcı adı varsa hata göstermesi için veritabanında uniqi(benzersiz)yapılmalıdır.

HTML
----
    <form action="init.php" id="mForm" method="post">
        Adı: <input type="text" name="adi" id="ad"><br/>
        Şifre: <input type="text" name="sifre" id=""><br/>
        Soyadı: <input type="text" name="soyadi" id=""><br/>
        İşyeri <input type="text" name="isyeri" id=""><br/>
        <button id="submit">KAydet</button>
    </form>
    <p></p>

Veritabanından Json Olarak Ajax İle Veri Çekme

HTML
----
<ul></ul>

Php ve Json Türkçe Karakter Sorunu

 Veritabanı bağlantısı altına
mysql_query('SET NAMES UTF8');
mysql_query("SET CHARACTER SET utf8");
mysql_query("SET COLLATION_CONNECTION = 'utf8_general_ci'");

Json Dosyasına
header('Content-type: application/json; charset=utf-8');

jSON array Dosyası ÇAğırma

HTML
---
    <ul></ul>
    <button>Getir</button>

Json Array Dosyası ÇAğırma Ajax

HTML
---
<ul></ul>

Ajax İle Veritabanına Form Kaydettirme SerializeArray

HTML
---
     <form id="mform" action="init.php" method="post">
        adı : <input type="text" name="adi" id="">
        Yşı : <input type="text" name="yasi" id="">
        <button id="but">Kaydet</button>
    </form>
    <p id="fb"></p>

Jquery Ajax İle XML Veri Çekme

HTML
---
    <ul>
       
    </ul>

Basic İmage Divider Sliding Yapımı

HTML
----
   <div class="container">


    <div class="divider-wrapper">
  
      <div class="code-wrapper">
        <img src="design.jpg" alt="">
        <div class="design-wrapper">
          <div class="design-image">
            <img src="code.jpg" alt="">
          </div>
        </div>
      </div>

      <div class="divider-bar"></div>
    </div>


  </div>

jQuery Tab Menü

HTML
----
    <div class="tab-dis">
        <div class="tab-link">
            <a href="#">Tab 1</a>
            <a href="#">Tab 2</a>
            <a href="#">Tab 3</a>
        </div>

Jquery Slider Otomatik onat ve ileri geri buton

HTML
-----
<html>
<head>
    <meta charset="UTF-8">
    <title>Slider Yapımı</title>
    <link rel="stylesheet" href="stle.css">
</head>
<body>
   

Parallax Header ve Görse Geçişleri

HTML
------
<div class="contain">
<header class="header">
    <div class="bg"></div>
    <div class="logo"></div>
    <div class="karga"></div>
</header>

Güzel Form Yapımı Dripple Tarzı

 HTML
----------
<form class="guzelForm">
    <input type="text" id="i1"><label for="i1" class="l1">Adınızı Yazın</label>
    <input type="text" id="i2"><label for="i2" class="l2">Email Adresiniz</label>
    <input type="submit" value="Gönder">
</form>

Müziğe Göre Hareket Eden Audio Player

HTML
    <article id="palyer">
        <div class="player">
            <div class="dis"></div>
            <div class="ic"></div>
            <div class="playpause"></div>
        </div>

        <audio data-bpm="86">
            <source src="m1.mp3" type="audio/mp3">
            <source src="m1.ogg" type="audio/ogg">
        </audio>
    </article>

Soldan Kayan menü yapımı

HTML

<input type="checkbox" name="" id="l1">

<div class="ana">

    <label for="l1" class="l1">&#9776;</label>

    <div class="icerik">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptate dolorem
    </div>

Radio ve checkbox button plugini iCheck

 https://github.com/fronteed/iCheck
    <link href="futurico/futurico.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="icheck.min.js"></script>
    <script>
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_futurico',
            radioClass: 'iradio_futurico',
            increaseArea: '10%' // optional
          });
        });
    </script>

Custom radio button ve checkbox yapımı

--Css content ile yapımı--
HTML KISMI
     <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <form>
        <input type="checkbox" name="" id="c1"><label for="c1">Chek 1</label><br>
        <input type="checkbox" name="" id="c2"><label for="c2">Chek 2</label>
    </form>

404 hATASI çÖZÜmü

 http://www.site.com/asd-dsa-sss-116.html  //url yapısı
------
$get_url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$url = "http://".$_SERVER['HTTP_HOST']."/".seo_url($say['url'])."-".$say['id'].".html";
//echo $get_url."<br>".$url;die();

if ($get_url<>$url) {
    header( 'HTTP/1.1 404 Not Found' );
include( $_SERVER['DOCUMENT_ROOT'] . '/404.php' );
    }
if($say){ ?>
<? }else{ ?>

owl carousel kullanımı

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</title>
    <link rel="stylesheet" href="owl.carousel.css">
    <link rel="stylesheet" href="owl.theme.css">
    <link rel="stylesheet" href="style.css">
   

Spotlight Yapımı Jquery

    <link rel="stylesheet" href="style.css">
    <script src="jquery.min.js"></script>
    <script src="js.js"></script>

<div class="kutu">
        Kutucuk
        <div class="tooltip">Buraa Dikkat</div>
    </div>
---------------

Canvas Resim Döndürme

<body>
    <canvas width="1280" height="720" id="canvas"> </canvas>
    <script>
      var resim = new Image();
      resim.src= "r.png";  

NiceScroll.js

    <script src="jquery.nicescroll.js"></script>
    <script>
        $(document).ready(
          function() {
           $("html").niceScroll();
           $(".deneme").niceScroll();
          }
        );
    </script>

--------------
nicescroll.js
http://areaaperta.com/nicescroll/
https://github.com/inuyaksa/jquery.nicescroll

Circle ProgressBar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circle Progress Bar</title>
    <script src="jquery.min.js"></script>
    <script src="rotater.js"></script>

Jquery Fixed header

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

        $(window).on('load scroll', headerFixed);
        function headerFixed() {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > 130) {
                $(".menu").addClass('fixed');
            }else{
                $(".menu").removeClass('fixed');
            }
        }
     </script>

Siteyi Responsive Çevirme

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


/*---------------iPad & Samsung Galaxy Tablets portrait---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 320px) and (max-width: 479px) {

}

/*Mobil Menü İçin*/
jQuery(document).ready(function($) {
var a=0;
    $(".menu-mobil").click(function(){
       
        if(a == 0){
            $(this).text("KAPAT");
            a++;
        }else{
            $(this).text("MENÜ");
            a=0;
        }
        $("#categories").toggle();
    });

});

Css ile modal yapımı

HTML
    <a href="#modal">Aç</a>

    <div class="modal" id="modal">
        Ben Bir Garip Modal window örneğiyim
    </div>

Jquery Serialize ile get

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" method="get">
        <input type="text" name="adi" id="">
        <input type="text" name="soyadi" id="">
        <input type="text" name="sifre" id="">
        <input type="button" value="Gönder" class="gonder">
    </form>

Php ile Upload

<?php

if (isset($_FILES['file'])) {
    $boyut = $_FILES['file']['size'];
    $tip   = $_FILES['file']['type']; //---image/jpeg
    $adi   = $_FILES['file']['name'];
    $dosya = $_FILES['file']['tmp_name']; //--yüklenen dosya yolu

Dinamik Sitemap PHP

<?php
function seo_url($data) {
$sefurl = str_replace('A','a',$data);
$sefurl = str_replace('B','b',$sefurl);
$sefurl = str_replace('C','c',$sefurl);

PDO

VERİ TABANI BAĞLANMA

<?php
   
    try{

        $pdo = new PDO("mysql: host=localhost;dbname=kayit","root","");

    }catch(PDOExeption $e){
        echo $e->getMessage();
    }

    /*hata gösterme*/

    if ($pdo->query("select * from uyeler order by")) {
        //
    }else{
        $hata =  $pdo->errorInfo();
        echo $hata[2];
    }

?>