Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
flystyles
Advanced tools
The project can be installed via npm or yarn.
npm install flystyles
yarn add flystyles
A compiled version of the CSS is provided in /dist
folder.
To compile a new version:
Install dependencies:
npm install
Compile CSS:
npm run build
All components in flysyles are documented in /docs
folder. The styleguide is created with Jekyll.
Docs are made using Jekyll. To install Jekyll:
bundle install
To create the build files (in _site
folder) execute:
bundle exec jekyll build
To launch jekyll local server:
bundle exec jekyll serve
Styleguide Driven Development (SDD) is a practice that encourages the separation of UX, Design & Frontend from Backend concerns. This is achieved by developing the UI separately in a styleguide.
By separating the UI and backend tasks so they don’t rely on each other, it allows teams to iterate fast on prototypes and designs without having to make changes to the backend. With careful planning they should plug-and-play together nicely.
To document a new component, a new markdown file has to be added to src/_docs/components
. This file has a Front Matter where you have to specify the category and the name of the component:
---
title: Buttons
description: Button component description
category: components
---
To help in developing workflow, a Browser Sync is provided that watch local changes and refresh the browser. That way, when we need a new component, It can be created directly in the styleguide that gets the styles from Flystyles, achieving the Styleguide Driven Development (SDD).
To run the server, execute:
npm install
npm run docs
For the moment, the project is hosted on Netlifly flystyles.netlify.com. The project is deployed whenever you push to master automatically.
To create a new version you have to use the npm command version. It will generate the new dist files, add a release tag and push to master.
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
src/
|
|- styles
|
| – mixins/
| |– _responsive.scss # Responsive mixins
| |– _typography.scss # Typography mixins
| … # Etc
|
| – base/
| |– _normalize.scss # Reset/normalize
| |– _typography.scss # Typography rules
| |- _animations.scss # CSS Animations
| … # Etc.
|
| – utilities/
| |– _spacing.scss # Margins, paddings, ...
| |– _responsive.scss # Brakpoints visibility classes
| … # Etc.
|
|- components/
| |– Button/_Button.scss # Buttons
| |– Grid/_Grid.scss # Grid
| … # Etc.
|
|- _config.scss # Flystyles variables
|– main.scss # Main Sass file
Files follow the same naming conventions described above: they are hyphen-delimited.
The base/ folder holds what we might call the boilerplate code for the project. In there, you might find the reset file, some typographic rules, and probably a stylesheet defining some standard styles for commonly used HTML elements (that I like to call _base.scss).
_base.scss
_reset.scss
_typography.scss
_animations.scss
For smaller components, there is the components/ folder. There are usually a lot of files in components/ since the whole site/application should be mostly composed of tiny modules.
_media.scss
_carousel.scss
_thumbnails.scss
The mixins/
folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here. This files dont's produce any output.
_responsive.scss
_typography.scss
Custom theme specific styles.
_theme.scss
_admin.scss
Utilities are low-level. They have a very narrow scope and may end up being used frequently, due to their separation from the semantics of the document and the theming of a component. As a result, once a class is in significant use great care should be taken when introducing any modifications to it.
Utilities make use of !important
to ensure that their styles always apply ahead of those defined in a component's dedicated CSS.
_spacing.scss
_responsive.scss
_config.scss
The configuration file where all variables are defined. Copy this file to override the Flystyles defaults without modifying key, versioned files.
flystyles.scss
The main file should be the only Sass file from the whole code base not to begin with an underscore. This file should not contain anything but @import and comments.
FAQs
Flywire UI Framework
The npm package flystyles receives a total of 223 weekly downloads. As such, flystyles popularity was classified as not popular.
We found that flystyles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.