Fortune is a modern and modular CSS Framework that emphasizes (extensive) use of CSS variables. With the introduction and the , CSS variables (combined with CSS Grid and Flexbox) make building and shipping beautiful web-based UIs possible with just few configurations.
Fortune specializes in helping developers write beautiful UIs for their websites and web apps fast using util CSS classes. And there are several kinds of classes––abstract classes that influence the margin and padding, component classes which construct a common CSS component e.g. a button, modifiers which update aspects of a CSS component, and state modifiers which induce a state (like psuedo-selectors)
Rather than attempt to do too much trail-blazing, Fortune apprecaites previous and existing CSS frameworks such as ... and ... and aims to build on their successes and fill in where possible. No CSS framework will work for 100% of all deve
| import { injectGlobal } from 'react-emotion'; | |
| /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ | |
| /** | |
| * 1. Change the default font family in all browsers (opinionated). | |
| * 2. Correct the line height in all browsers. | |
| * 3. Prevent adjustments of font size after orientation changes in | |
| * IE on Windows Phone and in iOS. | |
| */ |
| import React from 'react' | |
| import styled from 'emotion/react' | |
| import { omit } from 'emotion/lib/utils' | |
| import { space, width, fontSize, color, responsiveStyle } from 'styled-system' | |
| import { baseCss } from './ui' | |
| const defaultExcludedProps = [ | |
| 'm', | |
| 'mt', |
I made a little styling lib called glam
(some features are in development)
let's start off with the simplest use case. we'll make an 'index.html' page,
and assume we've setup our js bundler to output bundle.js
Today, single page web apps are driving many websites that we use each and every day. Instead of having your browser request a new web page for each and every action you perform on a web page, single page web apps may load all in one request to smoothly and quickly transition with every action you perform.
When building single page web apps, you may decide to retrieve all of the HTML, CSS and Javascript with one single page load or dynamically load these resources as the user moves about your site. Either way, it can be a pain to bundle all of these assets together for the end user to download from your web server. This is where webpack comes into play.
webpack does all of the heavy lifting bundling all of your HTML, CSS and Javascript together. If you write your site all from scratch or depend on dependencies from npm, webpack takes care of packaging it all together for you. It has the ability to take your single page web app, cut out all of the code you don't need, then packa
| #!/usr/bin/env ruby | |
| require "rubygems" | |
| require "twitter" | |
| require "json" | |
| require "faraday" | |
| # things you must configure | |
| TWITTER_USER = "your_username" | |
| # get these from dev.twitter.com |
| #import <Cocoa/Cocoa.h> | |
| @interface NSColor (isLight) | |
| - (BOOL)isLight; | |
| @end |
Setup GitHub Pages "gh-pages" branch as a subfolder within the "master" project on your local checkout.
If you plan on switching between different branches (e.g. git checkout master-experiment
then revert back with git checkout master) you will loose your child folder from this tutorial (because it's in your
.gitignore and is not part of your master branch).