Frontend-mastermin-lodz Wiki
Advertisement

https://speckyboy.com/top-50-css-2018/

poniżej lista wygenerowana dzięki fajnemu javascriptowemu narzedziu artoo.js

oto kod którym pobrałem odnośniki ze strony tworząc tę listę (może przydać się wam do nauki)

//Najpierw odpalam artoo (trzeba przeciągnąć myszką skrypt do zakładek)
// artoo to bajerancki crawler, który wykonuje
// zaawansowane zadania filtrowania strony www według określonych zasada
// https://medialab.github.io/artoo/

var a=artoo.scrape('.post-content #flexbox ~ p', {
  title: {sel: 'a'},
  url: {sel: 'a', attr: 'href'}
}).filter(function(e){ return e.title!=''}).map(function(e){''
return "\u000D\u000A "+e.title+" 🔗 "+e.url; 
});

var func = function(text, name, type) {
  var file = new Blob([text], {type: type});

var ele = document.createElement('a');
ele.href= URL.createObjectURL(file);
ele.download = name;
ele.click();
}

func(a,"moj_json.txt",'application/text"');

//jak widać zmienna a to skorzystanie ze skryptu artoo, który trzepie całą stronę według wzorca
// znajdź element z klasą .post-content
// w tym elemencie bedzie blok który ma id #flexbox
// ~ tym znaczkiem szukaj wszystkich elementów przed nim które są paragrafami (p)
// .post-content #flexbox ~ p
// wiecej na ten temat słowko klucz: css selectors
// potem utwórz funkcję o nazwie func, która wywołuje się z trzema argumentami 
// 1 argument to tekst który ma być zapisany
// 2 arg.. to nazwa pliku
// 3 to typ
// ciało funkcji wyjaśnia co i jak jeśli macie pytania to pytajcie w komentarzach
// na ostatek wywołuje funkcję biorąc jako tekst to co wykonało się w var a
reszta jak widać


Oto super lista

Waffle Grid 🔗 https://lucasgruwez.github.io/waffle-grid/,

 RAGrid 🔗 https://argyleink.github.io/ragrid/,

 Taffy 🔗 http://www.taffy.logancarlile23.com/,

 Griddd 🔗 http://griddd.surge.sh/,

 Flexbox Cheatsheet 🔗 http://yoksel.github.io/flex-cheatsheet/,

 this post 🔗 https://speckyboy.com/css-flexbox-toolbox/,

 Griddy 🔗 http://griddy.io/,

 Graaf 🔗 http://graaf.space/,

 CSS Grid Cheat Sheet 🔗 https://alialaa.github.io/css-grid-cheat-sheet/,

 this post 🔗 https://speckyboy.com/css-grid/,

 Bttn.css 🔗 https://bttn.surge.sh/,

 Hover Buttons Library 🔗 https://varin6.github.io/Hover-Buttons/,

 Buttons 🔗 https://labs.loupbrun.ca/buttons/,

 Social Share Kit 🔗 http://socialsharekit.com/,

 Foundation Building Blocks 🔗 https://zurb.com/blog/foundation-building-blocks-over-100-compo,

 Balloon.css 🔗 https://kazzkiq.github.io/balloon.css/,

 Fontisto 🔗 http://fontisto.com/,

 Pretty Checkbox 🔗 https://lokesh-coder.github.io/pretty-checkbox/,

 CSS Checkbox Library 🔗 https://hunzaboy.github.io/CSS-Checkbox-Library/,

 explodal 🔗 http://explodal.com/,

 SCSS Only Slider 🔗 http://significa.pt/labs/css-only-slider/,

 CSS Loader 🔗 http://www.raphaelfabeni.com.br/css-loader/,

 Animatelo 🔗 https://gibbok.github.io/animatelo/,

 Vivify 🔗 http://vivify.mkcreative.cz/,

 Animista 🔗 http://animista.net/,

 Obnoxious.CSS 🔗 http://tholman.com/obnoxious/,

 this round-up 🔗 https://speckyboy.com/css-animation/,

 50 Cheatsheets, References and Guides for CSS 🔗 https://speckyboy.com/css-cheatsheets-resources-guides/,

 CSS Database 🔗 https://jonathantneal.github.io/css-db/,

 CSS Triggers 🔗 https://csstriggers.com/,

 Flawless Typography Checklist 🔗 https://www.typewolf.com/checklist,

 Sassmagic 🔗 http://w3cplus.github.io/SassMagic/,

 Boilrplate 🔗 http://www.boilrplate.com/,

 Fractures 🔗 https://fractures.space/,

 Biomatic UI 🔗 https://github.com/BioMaRu/biomatic,

 Tailwind CSS 🔗 https://tailwindcss.com/,

 PaperCSS 🔗 https://www.getpapercss.com/,

 Shoelace.css 🔗 https://shoelace.style/,

 Turret CSS 🔗 http://turretcss.com/,

 Trowel 🔗 http://trowel.github.io/,

 Unnamed 🔗 http://smakosh.com/unnamed/index.html,

 awsm.css 🔗 https://igoradamenko.github.io/awsm.css/,

 Brutalist Framework 🔗 http://brutalistframework.com/,

 BBC Grandstand 🔗 https://github.com/bbc/grandstand,

 iotaCSS 🔗 https://www.iotacss.com/,

 Semantic UI 🔗 https://semantic-ui.com/,

 Luxbar 🔗 https://balzss.github.io/luxbar/,

 mini.css 🔗 http://minicss.org/,

 Wireframe CSS 🔗 https://github.com/agauniyal/wireframe,

 Less Grid Boilerplate 🔗 https://github.com/joeberthelot/Less-Grid-Boilerplate,

 kernel.cssMaterial Design 🔗 https://ionogy.github.io/kernel.css/,

 Petal 🔗 https://shakrmedia.github.io/petal/,

 Tent CSS 🔗 https://css.sitetent.com/,

 Spectre.css 🔗 https://picturepan2.github.io/spectre/,

 lightweight CSS frameworks 🔗 https://speckyboy.com/responsive-lightweight-css-frameworks/,

 Gradientify 🔗 http://www.gradientify.dfusic.net/,

 Critical Path CSS Generator 🔗 https://jonassebastianohlsson.com/criticalpathcssgenerator/,

 Grabient 🔗 https://www.grabient.com/,

 CSSRooster 🔗 https://huu.la/ai/cssrooster,

 WebGradients 🔗 https://webgradients.com/,

 Angled Edges 🔗 https://angled-edges.josephfus.co/,

 Plumber 🔗 https://jamonserrano.github.io/plumber-sass/,

Advertisement