mrmrs - Personal Portfolio Site

  •        36

Personal website of skullcat.

http://mrmrs.cc
https://github.com/mrmrs/mrmrs

Dependencies:

tachyons-background-size : ^3.0.3
tachyons-border-colors : ^4.0.5
tachyons-border-radius : ^4.1.2
tachyons-border-style : ^3.0.2
tachyons-border-widths : ^2.0.2
tachyons-borders : ^2.1.0
tachyons-box-sizing : ^3.1.1
tachyons-clears : ^2.2.0
tachyons-colors : ^5.1.2
tachyons-coordinates : ^3.0.1
tachyons-debug : ^1.1.2
tachyons-display : ^4.1.0
tachyons-floats : ^2.0.4
tachyons-font-family : ^4.1.2
tachyons-font-style : ^3.0.1
tachyons-font-weight : ^4.0.3
tachyons-forms : ^3.0.0
tachyons-heights : ^5.0.0
tachyons-hovers : ^2.1.0
tachyons-images : ^1.0.3
tachyons-letter-spacing : ^2.1.2
tachyons-line-height : ^2.0.4
tachyons-links : ^3.0.1
tachyons-lists : ^2.0.4
tachyons-max-widths : ^3.1.1
tachyons-opacity : ^1.0.0
tachyons-outlines : ^1.0.0
tachyons-overflow : ^3.0.1
tachyons-position : ^5.0.1
tachyons-skins : ^3.1.5
tachyons-spacing : ^5.0.10
tachyons-tables : ^1.0.0
tachyons-text-align : ^2.0.4
tachyons-text-decoration : ^3.1.1
tachyons-text-transform : ^3.0.5
tachyons-type-scale : ^5.0.3
tachyons-typography : ^2.2.0
tachyons-utilities : ^1.2.1
tachyons-vertical-align : ^2.0.3
tachyons-visibility : ^1.0.4
tachyons-white-space : ^3.0.1
tachyons-widths : ^4.0.2
tachyons-word-break : 1.0.1

Tags
Implementation
License
Platform

   




Related Projects

colors - Smarter defaults for colors on the web.

  •    CSS

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites. The built CSS is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

utility-opentype - Simple, CSS utility classes for advanced typographic features.

  •    CSS

This is described in more detail in the design decisions. The following examples are supported on Chrome, Firefox, and Internet Explorer 10+ and fallback as gracefully elsewhere. Works on its own, or alongside frameworks like Basscss. That’s it! You’re ready to use the classes within your markup.

css - A mostly reasonable approach to CSS and Sass.

  •    

OOCSS, or “Object Oriented CSS”, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of “objects”: reusable, repeatable snippets that can be used independently throughout a website.BEM, or “Block-Element-Modifier”, is a naming convention for classes in HTML and CSS. It was originally developed by Yandex with large codebases and scalability in mind, and can serve as a solid set of guidelines for implementing OOCSS.

atom-pigments - An Atom package to display colors in project and files.

  •    CoffeeScript

Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for each opened file, it will use the palette to evaluate the value of a given color. The legible source paths can be defined through various settings either at the global or per project level. By default colors in every file will be highlighted, to limit the display of colors to the desired filetype only please see the Defining Where Pigments Applies below. Pigments supports out of the box most of the color transformations functions and expressions of the three biggest CSS pre-processors out there, namely LESS, Sass and Stylus. However, it doesn't mean pigments is able to parse and understand all of these languages constructs. For the moment, Pigments' aim is to support the widest range of usage, even if it implies reducing its ability to parse certain complex constructs. You can refer to the parser specs for an exhaustive list of the supported expressions.


avalanche - Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

  •    CSS

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. $av-namespace Global prefix for layout and cell class names. Default: grid.

style - An opinionated starting point for scalable, maintainable CSS architecture.

  •    HTML

An opinionated starting point for scalable, maintainable CSS architecture. Style is an approach to writing CSS born & refined over several years at Envato by the team responsible for maintaining & evolving the 9 year old Rails codebase that powers Envato Market.

generator-style-prototype - Yeoman Generator for Style Prototypes

  •    Javascript

Style Prototypes are a Pattern Library tool for designing in browser. Style prototyping is a technique used to create a typical instance of a design from which a final site can be assembled. Style Prototypes are a unique tool because, not only are they responsive by default (meaning your client will be able to sign off on styles they've been able to see natively on all browsers and devices), they encourage Style and Color Guide driven Style Tile and Component Guide generation. This means that after you've built out your Style Tile, you'll be on your way to having finished your Style Guide, which you need to for Style Guide Driven Design (and coincidentally takes lots of design decisions off of the shoulders of Front End Developers). You'll also never need to have someone guess at what colors they can use with a fully built out Color Guide with both hex and Sass values.

mustard-ui - A starter CSS framework that actually looks good.

  •    CSS

Mustard is a starter CSS framework that actually looks good. You can start configuring the colors to suit your needs by first changing the $brand-color variable located in src/scss/base/base.scss from $color-green-500 to $color-indigo-500 or any other color you'd like. There are lots of colors that can be found in the src/scss/vars/colors.scss file.

css-gridish - Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension

  •    CSS

This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. We hope it helps teams adapt CSS Grid sooner and enables more complex layouts. To show how versatile the tool is, we have examples of grids from Bootstrap, Carbon Design System, and Material Design.

bootstrap-material-design - Material design theme for Bootstrap 3 and 4

  •    CSS

Material Design for Bootstrap is the best way to use Material Design guidelines by Google in your Bootstrap 4 based application. Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at the end of your document (just before the </body> tag), and everything will be converted to Material Design.The things to do are a lot and the time is little, if you are a passionate developer with experience with Bootstrap and Material Design for Bootstrap and you have some spare time, please consider becoming a contributor of this project! If you are interested contact @FezVrasta or just adopt one of our issues.

basscss - Low-level CSS Toolkit

  •    CSS

Basscss is a lightweight collection of immutable utilities designed for speed, clarity, performance, and scalability. Basscss v8 is the final version of Basscss, which means no major, breaking changes will be introduced. Minor features and patches may be added, but due to the nature of this CSS approach, there are virtually no bugs in Basscss.

modularscale-sass - Modular scale calculator built into your Sass

  •    CSS

A modular scale is a list of values that share the same relationship. These values are often used to size type and create a sense of harmony in a design. Proportions within modular scales are all around us from the spacing of the joints on our fingers to branches on trees. These natural proportions have been used since the time of the ancient Greeks in architecture and design and can be a tremendously helpful tool to leverage for web designers. Ems work especially well with modular scales as their recursive properties mimic modular scales making them more predictable and easier to manage. Pixels and other units work just fine and breakpoints in responsive web design can naturally fall on your scale to create better relevance to your text as all the values in your layout harmonize with each other.

Saas - CSS with superpowers

  •    Ruby

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass boasts more features and abilities than any other CSS extension language out there.

brand-colors - 🎨 A color collection available in sass, less, stylus and css

  •    Javascript

Full list of colors A lot fo the colors comes from brandcolors.net, so a huge shout out to @galengidman.

CSSketch - Plugin that adds CSS support to Sketch 3 for a faster design workflow.

  •    Objective-C

CSSketch is a Sketch 3 plugin that enables you to modify your designs quickly by attaching it a stylesheet to it that you can use to lay out your designs, change colors and shadows quickly, etc. It supports Sass and {less} stylesheets, which means you can put functions and variables in your stylesheet to make your workflow even more efficient.

must-watch-css - A useful list of must-watch talks about CSS

  •    

This is a collection of well-received talks about CSS, covering topics such as CSS frameworks, Sass, SVG, animation, scalability, CSS performance, tooling, mobile tips, and more. Like JavaScript? Check out Must-Watch JavaScript! For other great lists check out @sindresorhus's curated list of awesome lists.

css-blocks - High performance, maintainable stylesheets.

  •    TypeScript

CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets. By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love.

toolkit - Toolkit for Responsive Web Design and Progressive Enhancement with Compass

  •    CSS

Think of Toolkit as your swiss army knife for modern design and development. Those little bits and bobs that make your life easy and you want to reuse throughout projects but never really had a place to put? They're here, and they're designed to make your life happy. Toolkit is broken out into individual pieces, so grab what you want, grab what you need, or grab the lot; the choice is yours. Then, add require 'toolkit' to your config.rb file and @import "toolkit"; to your Sass file.