huesos
Huesos is a front-end starterkit. It provides a basic CSS osamenta by combining some preferred and battle-tested tools.
Last updated 7 months ago by idiaz.roncero .
MIT · Repository · Original npm · Tarball · package.json
$ cnpm install huesos 
SYNC missed versions from official npm registry.

Huesos

Shake your osamenta!

This is a custom SCSS framework made by and for idiaz.roncero.

It sets sensible defaults, exposes a highly configurable _config.scss file and makes use of the following libraries and techniques:

  • Fractal for building a live syleguide and documentation.
  • Breakpoint for a leaner @media-query syntax.
  • Family for syntactic sugar around nth-* selectors
  • Every Layout for clever and arithmetic layouts.
  • BEM for naming conventions
  • Ritmo for vertical rhythm.
  • Palx for creating a palette based on a single color and its shades.

It is "somehow opinionated", meaning that is neither a Bootstrap-like complete set of closed and almost zero-config components nor a bare-bones css-reset and starterkit.

Browse the docs and living syle guide for further information.

NPM scripts

The shorthands

build - Compiles the styleguide and css production assets.
huesos - Alias for yarn build
serve - Starts a live server for the styleguide. Note: SCSS won't get compiled.

CSS

For Huesos

css - Compiles SASS to CSS and applies PostCSS. Same as applying css:sass and css:post.
css:watch - Starts a node-sass watch daemon.
css:sass - Compiles SASS to CSS without sourcemaps.
css:post - Applies PostCSS to the CSS files.

For the styleguide

css:mandlebrot - Compiles the styleguide's SASS (theme/huesos-mandlebrot.scss)to CSS.
css:mandlebrot:watch - Watches the styleguide's SASS.

Styleguide (Fractal)

styleguide:build - Builds the syleguide assets.
styleguide:serve - Starts a live server for the styleguide.

Linters

lint:js: Lints JS.
lint:css: Stylelints CSS.

JS

js:build: Runs webpack.

Others

test: Compiles css to the test folder. This folder contains a simpler, static HTML file used for testing all HTML elements. It can be used as a quicker, simpler alternative to the Fractal styleguide.

Add to an existing project

As a submodule (avoid it!)

git submodule https://github.com/idiazroncero/huesos

It is advisable to create a local branch in order to separate your developments from the origin/master branch and yet be able to merge the changes to the master into your project.

As a npm/yarn package (recommended)

Use yarn add huesos to install huesos as a dependency of your project.

Copy src/scss/_config.scss to your project and tweak it.

On your SCSS main file, add the following lines before your code (where path/to/your/config points to your local copy of src/scss/_config.scss):

@import "path/or/alias/to/node_modules/huesos/dependencies";
@import "path/to/your/config";
@import "path/or/alias/to/node_modules/huesos/huesos";

/* Start coding here */

Important: you need to @import dependencies before config. This is because many mixins of the third-party libraries (like Ritmo) are used for calculations on _config.scss.

In the near future...

  • Migrate to css variables in order to be able to quickly theme a site.
  • ¿Include a basic svg icon library?
  • Journalistic "sumarios" using blockquotes (as a component).
  • Completely migrate selectr CSS.
  • Optional animation / transition system with prefers-reduced-motion.
  • Apply intrinsic CSS sizing to grid system.
  • Assess lobotomized owl impact
  • Extend and apply some common criteria to both drop shadows and animations

Current Tags

  • 1.3.51                                ...           latest (7 months ago)

33 Versions

  • 1.3.51                                ...           7 months ago
  • 1.3.5                                ...           8 months ago
  • 1.3.4                                ...           9 months ago
  • 1.3.3                                ...           9 months ago
  • 1.3.2                                ...           9 months ago
  • 1.3.1                                ...           10 months ago
  • 1.3.0                                ...           a year ago
  • 1.2.9                                ...           a year ago
  • 1.2.82                                ...           a year ago
  • 1.2.81                                ...           a year ago
  • 1.2.8                                ...           a year ago
  • 1.2.7                                ...           a year ago
  • 1.2.65                                ...           a year ago
  • 1.2.6                                ...           a year ago
  • 1.2.5                                ...           a year ago
  • 1.2.4                                ...           a year ago
  • 1.2.3                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.0.12                                ...           a year ago
  • 1.0.11                                ...           a year ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.81                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 34
Dependencies (3)
Dev Dependencies (19)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |