/puse-css-tricks

pure css tricks

Primary LanguageJavaScript

Pure Tricks

This repository contains handmade:

  • CSS tricks
  • build configuration for project markup
  • CLI to create new CSS tricks foundation

Stack:

  • gulp - build project
  • html - write html
  • scss - write styles
  • webpack - build js
  • js - imitate behavior

Installation

Install with npm:

$ npm install

or with yarn

$ yarn install

Developing

Run develop with command

yarn run start:dev

or

npm start

Get prod builded files with command

yarn run build

or

npm run build

Create CSS trick foundation with command

npm run generate [trick-name]

or

npm run g [trick-name]

or

node pure-css-cli.js [trick-name]

Contains

Pure CSS Toggler

Allows you to reproduce hide/show logic without any JS.

Tips:

  • Use general sibling selectors to set CSS rules on elements when checkbox change state.
  • Use attribute for on label to link with input state (checked/unchecked).

Expamle

Codepen

<input type='checkbox' id='toggler' name='toggler' />
<label for='toggler'>Toggler</label>
<div class='toggler-box'>I can hide and show with checkbox!</div>
input[type='checkbox'] {
    display: none;
}
input[type='checkbox'] ~ label {
    cursor: pointer;
}
input[type='checkbox'] ~ .toggler-box {
    display: block;
}
input[type='checkbox']:checked ~ .toggler-box {
    display: none;
}

Wizard With Animations

Wizard - is a component for displaing some step-by-step process. It consists of:

  • steps display
  • current step content

Wizard

Tips: