├── src ├── july-CSS-top10.jpg ├── may-css-opensource.jpg ├── june-css-opensource.jpg ├── 07-2018.md ├── 05-2018.md └── 06-2018.md └── README.md /src/july-CSS-top10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-open-source/HEAD/src/july-CSS-top10.jpg -------------------------------------------------------------------------------- /src/may-css-opensource.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-open-source/HEAD/src/may-css-opensource.jpg -------------------------------------------------------------------------------- /src/june-css-opensource.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mybridge/css-open-source/HEAD/src/june-css-opensource.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-open-source 2 | Monthly Series - CSS Top 10 Open Source Projects Edit Add topics 3 | 4 | Click "Watch/Star" to get an email notification once a month for Top 10 CSS Open Source. 5 | 6 | [Mybridge AI](https://www.mybridge.co) ranks articles by the number of shares, minutes read, and by its own machine learning algorithm. 7 | 8 | Every month, 100 ~ 300 open source projects with new or major release in CSS are compared and only 10 finest projects are picked. 9 | 10 | Also published on [Mybridge Publication](https://medium.mybridge.co) 11 | 12 | 13 | ## Monthly Series for Open Source: 14 | 15 | * [v.May 2018 - Top 10 Open Source Projects](./src/05-2018.md) 16 | * [v.Jun 2018 - Top 10 Open Source Projects](./src/06-2018.md) 17 | * [v.Jul 2018 - Top 10 Open Source Projects](./src/07-2018.md) 18 | 19 |
20 | 21 | ## Other Monthly: 22 | * [JavaScript Top 10](https://github.com/Mybridge/javascript-articles-monthly) 23 | * [Angular Top 10](https://github.com/Mybridge/angular-articles) 24 | * [React Top 10](https://github.com/Mybridge/react-articles-monthly) 25 | * [Vue.js Top 10](https://github.com/Mybridge/vuejs-articles) 26 | * [Python Top 10](https://github.com/Mybridge/python-articles) 27 | * [Node.js Top 10](https://github.com/Mybridge/nodejs-articles) 28 | * [Web Development Top 10](https://github.com/Mybridge/web-development-articles) 29 | * [Machine Learning Top 10](https://github.com/Mybridge/machine-learning-articles) 30 | * [Swift Top 10](https://github.com/Mybridge/swift-articles) 31 | * [CSS Top 10](https://github.com/Mybridge/css-articles) 32 | 33 | ## Open Source Monthly: 34 | * [JavaScript Open Source Top 10](https://github.com/Mybridge/javascript-open-source) 35 | * [Angular Open Source Top 10](https://github.com/Mybridge/angular-open-source) 36 | * [React Open Source Top 10](https://github.com/Mybridge/reactjs-open-source) 37 | * [Vue.js Open Source Top 10](https://github.com/Mybridge/vuejs-open-source) 38 | * [Python Open Source Top 10](https://github.com/Mybridge/python-open-source) 39 | * [Node.js Open Source Top 10](https://github.com/Mybridge/nodejs-open-source) 40 | * [Web Development Open Source Top 10](https://github.com/Mybridge/web-development-articles) 41 | * [Machine Learning Open Source Top 10](https://github.com/Mybridge/machine-learning-open-source) 42 | * [Swift Open Source Top 10](https://github.com/Mybridge/swift-open-source) 43 | -------------------------------------------------------------------------------- /src/07-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Open Source Projects (v.Jul 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 250 JavaScript Open Source Projects to pick the Top 10. 6 | We compared projects with new or major release during this period. Mybridge AI ranks projects based on a variety of factors to measure its quality for professionals. 7 | 8 | * Average number of Github stars in this edition: 153 ⭐️ 9 | * Topics: GitHub Windows, Animation, SCSS, CSS class name, Framework, React, CSS Grid, Xml Transform 10 | 11 | Open source projects can be useful for programmers. Hope you find an interesting project that inspires you. 12 | 13 |
14 | 15 | ### Course of the month: 16 | 17 | [A) Beginners: Web Design for Beginners: Real World Coding in HTML & CSS.](http://bit.ly/2FDTJEl)[3,477 recommends, 4.6/5 stars] 18 | 19 | [B) Build Creative Website Using HTML5, CSS3, jQuery & Bootstrap.](http://bit.ly/2NbuIn1) [149 recommends, 4.8/5 stars] 20 | 21 |
22 | 23 | ## Rank 1 24 | ### [CssGitHubWindows: A user style which transforms GitHub's pages into a GUI resembling Windows 9x [★739]](https://github.com/Athari/CssGitHubWindows?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 25 | 26 | 27 |
28 | 29 | ## Rank 2 30 | ### [Motus: Animation library that mimics CSS keyframes when scrolling. [★231]](https://github.com/alexcambose/motus?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 31 | 32 | 33 |
34 | 35 | ## Rank 3 36 | ### [SCSScale: Typographic modular scale starter based on body's font-size built on SCSS. [★153]](https://github.com/alectro/SCSScale?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 37 | 38 | 39 |
40 | 41 | ## Rank 4 42 | ### [Class-names: Conditionally join CSS class names together - Especially useful with React [★175]](https://github.com/sindresorhus/class-names?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 43 | 44 | 45 |
46 | 47 | ## Rank 5 48 | ### [Teutonic-css: A modern CSS framework — versatile, well documented. [★100]](https://github.com/fortrabbit/teutonic-css?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 49 | 50 | 51 |
52 | 53 | ## Rank 6 54 | ### [BuddyCSS: The framework to build awesome websites easily. [★22]](https://github.com/BuddyCSS/BuddyCSS?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 55 | 56 | 57 |
58 | 59 | ## Rank 7 60 | ### [Css-suspense: css loading for react [★91]](https://github.com/threepointone/css-suspense?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 61 | 62 | 63 |
64 | 65 | ## Rank 8 66 | ### [60gs: 60 Columns Grid System based on CSS Grid Layout [★57]](https://github.com/vladocar/60gs?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 67 | 68 | 69 |
70 | 71 | ## Rank 9 72 | ### [Postcss-xml-transform: A tiny transform library that lets you write CSS using XML [★36]](https://github.com/walaura/postcss-xml-transform?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 73 | 74 | 75 |
76 | 77 | ## Rank 10 78 | ### [Sq-grid: A simple and clean CSS grid which can be configured to use either CSS Grid or Flexbox. [★18]](https://github.com/SQ-UI/sq-grid?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 79 | 80 | 81 | -------------------------------------------------------------------------------- /src/05-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Open Source Projects (v.May 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 250 JavaScript Open Source Projects to pick the Top 10. 6 | We compared projects with new or major release during this period. Mybridge AI ranks projects based on a variety of factors to measure its quality for professionals. 7 | 8 | * Average number of Github stars in this edition: 2,526 ⭐️ 9 | * Topics: HTML/CSS drawing, Performance, PDF documents, GraphQL, CSS framework, Dom selection, Paint API, CSS Optimizer, Animations, GRID 10 | 11 | Open source projects can be useful for programmers. Hope you find an interesting project that inspires you. 12 | 13 |
14 | 15 | ### Course of the month: 16 | 17 | [A) Beginners: Build Responsive Real World Websites with HTML5 and CSS3.](http://bit.ly/2KkTfUZ) [14,610 recommends, 4.7/5 stars] 18 | 19 | [B) Advanced: Advanced CSS and Sass: Flexbox, Grid, Animations and More!](http://bit.ly/2mDiBDc) [4,452 recommends, 4.8/5 stars] 20 | 21 |
22 | 23 | ## Rank 1 24 | ### [Purecss-francine: HTML/CSS drawing in the style of an 18th-century oil painting. Hand-coded entirely in HTML & CSS. [★4614]](https://github.com/cyanharlow/purecss-francine?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 25 | 26 | 27 |
28 | 29 | ## Rank 2 30 | ### [Css-blocks: High performance, maintainable stylesheets. [★5218]](https://github.com/linkedin/css-blocks?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 31 | 32 | 33 |
34 | 35 | ## Rank 3 36 | ### [ReLaXed: Create PDF documents using web technologies [★8055]](https://github.com/RelaxedJS/ReLaXed?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 37 | 38 | 39 |
40 | 41 | ## Rank 4 42 | ### [Graphql-css: A blazing fast CSS-in-GQL™ library. [★567]](https://github.com/braposo/graphql-css?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 43 | 44 | 45 |
46 | 47 | ## Rank 5 48 | ### [TailwindCSS v0.5: A Utility-First CSS Framework for Rapid UI Development [★5042]](https://github.com/tailwindcss/tailwindcss?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 49 | 50 | 51 |
52 | 53 | ## Rank 6 54 | ### [Selection: Selection: An simple and lightweight library to realize visual DOM Selections. No jQuery. Support any CSS Libary [★468]](https://github.com/Simonwep/Selection?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 55 | 56 | 57 |
58 | 59 | ## Rank 7 60 | ### [Css-paint-polyfill: A polyfill for the CSS Paint API, with special browser optimizations. [★281]](https://github.com/GoogleChromeLabs/css-paint-polyfill?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 61 | 62 | 63 |
64 | 65 | ## Rank 8 66 | ### [Opticss: A CSS Optimizer [★574]](https://github.com/linkedin/opticss?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 67 | 68 | 69 |
70 | 71 | ## Rank 9 72 | ### [Delighters: Add CSS animations to delight users as they scroll down. [★380]](https://github.com/Q42/delighters?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 73 | 74 | 75 |
76 | 77 | ## Rank 10 78 | ### [SMART-CSS-GRID: Minimal Responsive Grid System [★192]](https://github.com/vladocar/SMART-CSS-GRID?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 79 | -------------------------------------------------------------------------------- /src/06-2018.md: -------------------------------------------------------------------------------- 1 | # CSS Top 10 Open Source Projects (v.Jun 2018) 2 | 3 | Mybridge 4 | 5 | For the past month, we ranked nearly 250 JavaScript Open Source Projects to pick the Top 10. 6 | We compared projects with new or major release during this period. Mybridge AI ranks projects based on a variety of factors to measure its quality for professionals. 7 | 8 | * Average number of Github stars in this edition: 367 ⭐️ 9 | * Topics: Critters Webpack, Color Picker, CSS Reset, Box shadow, Flexbox, Linux Desktop, React, Webpack Plugin, Refactoring 10 | 11 | Open source projects can be useful for programmers. Hope you find an interesting project that inspires you. 12 | 13 |
14 | 15 | ### Course of the month: 16 | 17 | [A) Beginners: CSS FLexbox Tutorial with Website Projects.](http://bit.ly/2LTfC4y) [129 recommends, 4.8/5 stars] 18 | 19 | [B) CSS — The Complete Guide (incl. Flexbox, Grid & Sass)](http://bit.ly/2MnOwnv) [867 recommends, 4.8/5 stars] 20 | 21 |
22 | 23 | ## Rank 1 24 | ### [Critters: A Webpack plugin to inline your critical CSS and lazy-load the rest [★1632]](https://github.com/GoogleChromeLabs/critters?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 25 | 26 | 27 |
28 | 29 | ## Rank 2 30 | ### [Pickr: Flat, simple and hackable Color-Picker. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. [★1029]](https://github.com/Simonwep/pickr?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 31 | 32 | 33 |
34 | 35 | ## Rank 3 36 | ### [CSS-Micro-Reset: Minimal barebone CSS Reset [★300]](https://github.com/vladocar/CSS-Micro-Reset?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 37 | 38 | 39 |
40 | 41 | ## Rank 4 42 | ### [Box-shadows.css: :pisces: A cross-browser collection of CSS box-shadows [★203]](https://github.com/madeas/box-shadows.css?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 43 | 44 | 45 |
46 | 47 | ## Rank 5 48 | ### [Flexy: A minimal CSS framework made with Flex [★93]](https://github.com/vladocar/flexy?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 49 | 50 | 51 |
52 | 53 | ## Rank 6 54 | ### [Strawberry: A new flexbox based CSS micro-framework. A set of common flexbox's utilities focused on making your life easier and faster with nested flexboxes. [★52]](https://github.com/jfet97/strawberry?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 55 | 56 | 57 |
58 | 59 | ## Rank 7 60 | ### [Jadesktop: Linux desktop environment built with CSS, JavaScript and Python. [★232]](https://github.com/codesardine/Jadesktop?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 61 | 62 | 63 |
64 | 65 | ## Rank 8 66 | ### [Horror: React HTML elements with CSS-in-JS [★72]](https://github.com/jxnblk/horror?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 67 | 68 | 69 |
70 | 71 | ## Rank 9 72 | ### [Html-critical-webpack-plugin: A webpack plugin that will extract critical CSS. Now supports Webpack v4. [★154]](https://github.com/anthonygore/html-critical-webpack-plugin?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 73 | 74 | 75 |
76 | 77 | ## Rank 10 78 | ### [Mort: Dead CSS detection [★57]](https://github.com/joereynolds/mort?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more) 79 | 80 | 81 | 82 | --------------------------------------------------------------------------------