KO
|
EN
gitlite — search
Search
#javascript
#python
#hacktoberfest
#react
#ai
#typescript
#llm
#go
#golang
#android
#machine-learning
#rust
#deep-learning
#linux
fityme
★ 8
Open GitHub ↗
Generate skeleton screens with Stylus
Download README (.md)
Explore Similar Repositories
phpstorm-laravel-snippets
:
phpstorm Laravel snippets Plugin
math-ts
:
Math Tool and Typescript Llibrary
Mention
:
No description available.
myminecraft
:
我的世界的python实现，根据https://github.com/fogleman/Minecraft 重构
FA_Patcher
:
A tool for binary patching (.exe) binary files
// repository documentation
Was this content helpful?
★ 0
(0 ratings)
Select Rating:
★
★
★
★
★
Submit Feedback
Recent Feedback
×
Download README
Do you want to download the
README.md
file for
fityme
?
Download (.md)
# [FITYME](https://manobi.github.io/fityme) > FITYME stands for **"Fake it til you make it"** A Stylus library to generate skeleton screens, through svg placeholder as data URI background. It will help you improve the perceived loading time of your apps. ---- ## Usage ```bash npm install --save-dev fityme ```  The above card can be easily generated with the following code: ```stylus @require './node_modules/fityme' body background #eee url( fityme(318, 198, rect(100%, 100%, 0, 8, #ffffff), rect(200, 120, center, 16, #ccc, 5, true), rect(270, 16, center, 148, #eee), rect(220, 16, center, 168, #eee) ) ); ``` [CHECKOUT MORE DEMOS](https://manobi.github.io/fityme/) > No matter what impossible situation you are dealing with, you might always **FITIMY**. * [Helper classes](#helper-classes) * [API](#api) ---------- ## Helper classes ### ft-x Define the number of times a card can be repeated based on a **8 columns grid**. You can even combine some classes, to dictate how the cards will be rendered o different screen sizes. To repeat the card created before (.ft-products) 3 times do the following: ```html <ul class="ft-products ft-3"></ul> ``` If you want to change how many times the card will show on extra small screens: ```html <ul class="ft-products ft-3 ft-xs-1"></ul> ``` All options available: | Repeat-(n) | Extra Small Screen | Small screen | Medium screens | Large screens | | -----------| ------------------ |------------- |--------------- |-------------- | | .ft-1 | .ft-xs-1 | .ft-sm-1 | .ft-md-1 | .ft-lg-1 | | .ft-2 | .ft-xs-2 | .ft-sm-2 | .ft-md-2 | .ft-lg-2 | | .ft-3 | .ft-xs-3 | .ft-sm-3 | .ft-md-3 | .ft-lg-3 | | .ft-4 | .ft-xs-4 | .ft-sm-4 | .ft-md-4 | .ft-lg-4 | | .ft-5 | .ft-xs-5 | .ft-sm-5 | .ft-md-5 | .ft-lg-5 | | .ft-6 | .ft-xs-6 | .ft-sm-6 | .ft-md-6 | .ft-lg-6 | | .ft-7 | .ft-xs-7 | .ft-sm-7 | .ft-md-7 | .ft-lg-7 | | .ft-8 | .ft-xs-8 | .ft-sm-8 | .ft-md-8 | .ft-lg-8 | ### .ft-single Restrict the the num of cards to only one. ```html <!-- Only one card no matter what screen size --> <ul class="ft-products ft-single"></ul> ``` ### .ft-single-row Allow only a single row of cards. ```html <ul class="ft-products ft-single-row"></ul> ``` ### .ft-single-column Allow only a single column of cards. ```html <ul class="ft-products ft-ingle-column"></ul> ``` ### .ft-full Makes one only card to extend itself until it fit the entire block. ```html <ul class="ft-products ft-full"></ul> ``` ---------- ## API ### fityme(x, y, content) Generates the card canvas. ```stylus fityme(318, 198, ...content) ``` ### rect(wdth = 100%, hght = auto, x = 0, y = 0, fill = #ccc, radius = 0, anim = false) Draw a rectangle ```stylus rect(200, 120, center, 16, #ccc, 5, true), ``` ### sqr(size, x, y) Draw a square ```stylus square(200, ...) ``` ### crc(size, x, y) Draw a circle ```stylus circle(200, ...) ``` ------ ## Contribute Please let me know of the bugs you find. Don't like Stylus? fell free to port it to your favorite stylesheet processing language, mas let me know so I can improve this project by learn from your proccess.
