https://github.com/bntzio/old-site

My personal site built w/Gatsby and some magic 🎩✨
https://github.com/bntzio/old-site

gatsby greensock personal-site react scrollmagic server-side-rendering styled-components

Last synced: 5 days ago
JSON representation

My personal site built w/Gatsby and some magic 🎩✨

• Host: GitHub
• URL: https://github.com/bntzio/old-site
• Owner: bntzio
• License: mit
• Created: 2017-04-04T00:39:39.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-06-02T22:06:09.000Z (over 7 years ago)
• Last Synced: 2024-12-24T07:56:13.384Z (11 days ago)
• Topics: gatsby, greensock, personal-site, react, scrollmagic, server-side-rendering, styled-components
• Language: JavaScript
• Homepage: https://bntz.io
• Size: 920 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
Superstylin'


A Gatsby starter with styled-components 💅


## What is Superstylin'?

Superstylin' is a Gatsby starter that uses styled-components as the main way to style your Gatsby site, it provides an easy to start structure to get you up and running with your first Gatsby-powered site.

## About styled-components

Simply put, styled-components is a way to add your css in your js, it works by creating a component and style it, then you'll get a styled-component, it's really simple but very powerful.

## Benefits of using styled-components

By using your css in your js you get the power of javascript to add more functionality to the way you declare your styles, but wait, that's not all!

Below are some interesting readings to further discover the benefits of styled-components.

* [Styled-Components: Enforcing Best Practices In Component-Based Systems](https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/)

* [The magic behind 💅 styled-components](http://mxstbr.blog/2016/11/styled-components-magic-explained/)

A big thanks to [Glen Maddern](https://twitter.com/glenmaddern) and [Max Stoiber](https://twitter.com/mxstbr) for making [styled-components](https://github.com/styled-components/styled-components) 👏🎉.

Also big thanks to [Kyle Mathews](https://github.com/KyleAMathews) for starting and maintaining [Gatsby](https://github.com/gatsbyjs/gatsby) 👏🎊.

## Inline-styles vs CSS in JS

Read this excellent post on [why inline-styles !== css-in-js](http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js/) by [Max Stoiber](https://github.com/mxstbr).

## Features of Superstylin'

* Use css-in-js with the magic of [styled-components](https://github.com/styled-components/styled-components) 💅

* Easy to customize and to get started with your own Gatsby site

* Perfect for sites, blogs or both

* Uses [polished](https://github.com/styled-components/polished) - a lightweight toolset for writing styles in JavaScript ✨

* Uses the [hedron](https://github.com/JSBros/hedron) flexbox grid system for react, powered by styled-components

## Installing

```sh

$ gatsby new my-awesome-site https://github.com/bntzio/gatsby-starter-superstylin

$ cd my-awesome-site

$ gatsby develop

```

## License

Licensed under the MIT License, Copyright © 2017 Enrique Benitez.

See [LICENSE](https://github.com/bntzio/gatsby-starter-superstylin/blob/master/license) for more information.