ilker Yılmaz ilkeryilmaz

## 0-react-hello-world.md

      
              7 files
            
          
              43 forks
            
          
              22 comments
            
          
              134 stars
            
          
                danawoodman
                / 0-react-hello-world.md
            
            
              Last active
              March 9, 2024 00:32
            
              
                React Hello World Examples
              
          
    React "Hello World" Examples

Below are a small collection of React examples to get anyone started using React. They progress from simpler to more complex/full featured.
They will hopefully get you over the initial learning curve of the hard parts of React (JSX, props vs. state, lifecycle events, etc).
Usage

You will want to create an index.html file and copy/paste the contents of 1-base.html and then create a scripts.js file and copy/paste the contents of one of the examples into it.

  
## trello-css-guide.md

      
              1 file
            
          
              126 forks
            
          
              62 comments
            
          
              1474 stars
            
          
                bobbygrace
                / trello-css-guide.md
            
            
              Last active
              April 22, 2024 10:15
            
              
                Trello CSS Guide
              
          
    Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

  
## inspiration
One-pager / Scroll:
- http://www.north2.net/
- http://10x16.com/
- http://www.hm.com/us/kenzo#inspiration
- http://www.stinkdigital.com/
- https://nameoflove.com/
- https://www.thened.com/
- https://thecreativeindependent.com/
- http://www.melville-design.com/
- http://designgest.com/

## README.md

      
              5 files
            
          
              303 forks
            
          
              50 comments
            
          
              2017 stars
            
          
                addyosmani
                / README.md
            
            
              Last active
              April 2, 2024 20:18
                — forked from 140bytes/LICENSE.txt
            
              
                108 byte CSS Layout Debugger
              
          
    CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$ if your browser aliases it:
~ 108 byte version

  
## keyframes-sass-output.css
@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }
  100% { background-color: #ccffff; } }

@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
  50% { background-color: #ccffcc; }

## box-shadow.html
<!DOCTYPE html>
<html>
	<head>
		<title>Box Shadow</title>

		<style>
			.box {
				height: 150px;
				width: 300px;
				margin: 20px;
	One-pager / Scroll:
	- http://www.north2.net/
	- http://10x16.com/
	- http://www.hm.com/us/kenzo#inspiration
	- http://www.stinkdigital.com/
	- https://nameoflove.com/
	- https://www.thened.com/
	- https://thecreativeindependent.com/
	- http://www.melville-design.com/
	- http://designgest.com/
	@-webkit-keyframes bgcolor { 0% { background-color: #ffccf2; }
	50% { background-color: #ccffcc; }
	100% { background-color: #ccffff; } }

	@-moz-keyframes bgcolor { 0% { background-color: #ffccf2; }
	50% { background-color: #ccffcc; }
	100% { background-color: #ccffff; } }

	@-ms-keyframes bgcolor { 0% { background-color: #ffccf2; }
	50% { background-color: #ccffcc; }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Box Shadow</title>

	<style>
	.box {
	height: 150px;
	width: 300px;
	margin: 20px;