Personal-Portfolio This project is mainly about creating personal portfolio by HTML5 and CSS3. Built With Major languages: HTML5,CSS3 Technologies use
🤖 Dark Mode e Light Mode com JavaScript 🏙️ Light Mode ON 🌃 Dark Mode ON Click event 👉 Evento de clique em JavaScript funcionando perfeitamente. 💡
Portfolio: Mobile and Desktop version This is a last milestone in the process of creating a portfolio website. Now, I'm adding the preservation of the
Grid Layout Animation A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock. Article on Codrop
Update: The work with a new and improved version of InterfaCSS is underway in the develop branch... 😁 The latest version (Beta2) adds support for XML
Free Responsive Web UI Kit & Dashboard Template bootstrap Theme1 Demo Theme2 Demo Theme3 Demo Theme4 Demo Theme5 Demo This repository consist of fully
No more unnecessary container, negative margin-padding and extra divs to make gap between rows and columns. Advanced CSS layout utility library AyoFle
Modular CSS Layout for Obsidian.md This is a repository for modular CSS layout hack for use with Obsidian.md. It's meant to complement/assist Communit
LAB | HTML & CSS - Spotify Clone Introduction Everybody likes music, right? Odds are, if you do, you have heard of Spotify. In this lab, we will be bu
Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self
Front-End Daily Challenges See demo on Codepen: https://codepen.io/comehope/pens/public/ Watch interactive screencast on Scrimba: https://scrimba.com/
📣 Avalanche 2 coming soon with Custom Properties. Avalanche CSS grid system Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system
zxx.lib.css - a quick CSS layout library If the UI of your page is simple, meanwhile, you want to construct web pages quickly, this CSS library is ver
Pylon encapsulates Flexbox logic into a set of simple tags and attributes which, when combined, can form robust user interfaces using a declarative and expressive API.
Hello, I'm Ingrid 2.0! The new Ingrid 2.0 is here. This time around Ingrid's main focus is on prototyping / wireframing page layouts. Ingrid version 2
Grassy | Docs | Playground What you ASCII is what you get. Build layout through ASCII art in Sass (and more). Installation and Usage yarn add grassy -
A lightweight layout library for building great responsive mobile first UIs that work everywhere. Open Source, built with CSS Grid and Flexbox.
A basic, responsive grid layout to help you get started on your next project (in about 1kb 🔥 ). Setup your project Download either the spacegrid.min.
Learn CSS Layout the pedantic way Read the book here: book.mixu.net/css/ Contributing patches Writing a patch should be easy: edit the markdown files
Iota A responsive micro-framework for the grid spec powered by CSS custom properties. Overview 1 class – That's right, one little class is all you nee
Skeleton-Less Skeleton-Less is the (un)official Less version of Dave Gamache's Skeleton Framework. It currently featues a stable version of Skeleton 2
ptb/flexgrid is a next-generation web page layout framework based on flexbox: the CSS Flexible Box Layout Module. It uses the same responsive 12 colum
The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS
Column Setter is a Sass tool that lets you easily set up a custom responsive grid for your website and build a float- or flexbox-based layout that aligns to it. It uses one simple function and a small handful of optional mixins to generate CSS widths based on your settings.
shed.css – The Beginning of the End of CSS Shed.css came about after I got tired of writing CSS. All of the CSS in the world has already been written,
Flexbin Flexible and gapless image gallery layout like Google Images and 500px.com. Based on article of xieranmaya Pure CSS, no need for JavaScript or
Atomic Bulldog Grid 💥 🐶 CSS (SCSS) grid, based on CSS grid layout with @supports fallback to flexbox (partial support). Grid Demo Atomic Bulldog gri
Next Level Week 2 - Proffy This is a web application developed at NLW 2. NLW is an online event with lots of code, challenges, networking, and a singl
Flexblocks is a lightweight, easy-to-learn CSS layout system, designed to fix the two biggest pain points of new CSS users: alignment syntax and margin edgecases. For a detailed explanation of how Flexblocks is different, check out the announcement blog post.
Grid Garden Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6 Exercise 7 Exercise 8 Exercise 9 Exercise 10 Exercise 11 Exercise 12 Exe
Live Demo: https://masonry-css-js.netlify.com/ CSS column-count for masonry-style layouts is dead easy (couple lines of CSS and very minimal markup to
Pro sidebar template Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript Demo See it live Screenshot Installation # cl
Flexbox Toolkit & Grid Frow CSS Frow is an open source HTML and CSS framework for creating quick & responsive projects on the web, powered by Flexbox.
Front-End DevChalenges This repo contain front-end projects in HTML/CSS with responsive design Screenshot Live Demo 404 Not Found Built With HTML CSS
masonry-vanilla This theme applies the Masonry layout to a Vanilla / Plain Roam Graph (i.e., no other CSS required). How to Install Simply add a CSS c
easy-css-layout Demo View the Demo Page Foreword Just for practice & backups About color setting of style, there're some problems here, but I don't wa
Tailwind CSS 1.0 (released in May 2019) now includes everything that this plugin used to offer except aspect ratio utilities. Therefore
SamsaraJS is a library for building continuous user interfaces. A continuous UI is one where many visual elements are animating in coordinated ways. For example
A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg. Table of Contents W3C Specificati
Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo
Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install
tb-grid Lightweight (1kb gzipped) 12 column grid system, built with css grid. 👉 Demos & Playground Have a look at those examples: Main Demo: https:/
🗄 HStack and VStack in CSS CSS layout components that (basically) horizontally and vertically stack anything. Usage ✌️ Check out the code here. Horiz
Favorite Grid A customizable grid system The idea behind this grid is to be so customizable. You can easily create your grid system with Favorite Grid
CSS Layout A collection of popular layouts and patterns made with CSS: 🎉 Zero dependencies 🎉 No frameworks 🎉 No CSS hacks 🎉 Real use cases Good pr
driveway pure CSS masonry layout aid driveway is an explorative project for developing pure CSS masonry layouts. It is developed using stylus. easy to
CSS and HTML responsive grid of hexagons. View live demo Flexbox vs CSS grid This branch uses flexbox to layout the hexagons. Another version using CS
Infinity CSS Grid Ultra minimal fluid Flex Grid. Infinity CSS Grid is around 0,1 Kb CSS for making any number of columns. Just add any number of .colu
Floaty Solution for all the web designers who need to support the older browsers. Floaty is 0,6 Kb(0,35 Kb gzip) CSS layout solution with basic respon
Flex One - 1 CSS Class System Flex One is CSS Layout system based on one CSS class. This class: .fluid {flex:1} With this .fluid {flex:1} you can buil
This project is now archived, checkout https://github.com/fictoan for a later version FICTOAN 2.25.0 Mockups with markup — build and style interactive
Power Tools For The Web [Deprecated] Susy is Deprecated. It should no longer be used on new projects, and will no longer be receiving any updates. Sus
React CSS Grid React layout component based on CSS Grid Layout and built with styled-components Demo npm i react-css-grid // Example usage import Reac
styled-css-grid 🍱 A tiny (~2kb) CSS grid layout for React, built with styled-components 💅 . examples See the website. installation Install React and
React X-Ray React CSS Layout Debugger npm i react-x-ray Demo: http://jxnblk.com/react-x-ray Usage import React from 'react' import XRay from 'react-x-
react-stonecutter Animated grid layout component for React, inspired by Masonry. Choose between CSS Transitions or React-Motion for animation. Demo In
React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo
Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo
vue-block A Vue plugin helping you build CSS grid like layout system with the support of old browser like IE9. Feature vue-block can provide you: CSS
CSS Grid Generator Site: https://cssgrid-generator.netlify.com/ This project is a way for people to use CSS Grid features quickly to create dynamic la
Layoutit Grid CSS Grids layouts made easy! Layoutit grid is a CSS Grid layout generator. Quickly design web pages layouts with our clean editor, and g
CSS Layout A collection of popular layouts and patterns made with CSS: 🎉 Zero dependencies 🎉 No frameworks 🎉 No CSS hacks 🎉 Real use cases Good pr
Fibonacci ##Flexbox page layout composer Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts using Flexbox,
Ginger Ginger is a minimal flexbox 12 column grid system named after a cute dog. It doesn't give you any fancy extras like some other frameworks, but
FlexLayout adds a nice Swift interface to the highly optimized Yoga flexbox implementation. Concise, intuitive & chainable syntax. Flexbox is an incre
Rebass Grid Responsive React grid system built with styled-system, with support for styled-components and emotion (previously called grid-styled) http
Styled System Responsive, theme-based style props for building design systems with React https://styled-system.com npm i styled-system Features Add st
Stylizer V3.0 Stylizer is a flexible Css framework,Based on the visual aspect, the framework offers you a clean and easy work Getting Started These in
60 Columns Grid System 60 Grid System is Starter Grid for the CSS Grid. What is 60 Grid System? 60 Grid System is Starter Grid for the CSS Grid. It is
Flexy Flexy is minimal CSS framework made with Flex Minimal. It is only 0.33 KB minified + gzip. Responsive. No unnecessary nesting. Fluid Column (eve
SMART CSS GRID - Minimal CSS Framework Smart CSS Grid is CSS GRID based fluid responsive layout system with 12 columns. Minimal. It is only 0.5 KB. Cl
Kindling A pocket-sized grid system; built on the flex display property. Usage Three-Column Layout div class=“row” div class=“col-4”/div div
Lotrek UI is a collection of ready-to-use UI components and micro layouts written in simple HTML & CSS to help you build awesome stuff faster. Each bl
GridBugs Inspired by Flexbugs this list aims to be a community curated list of CSS Grid Layout bugs, incomplete implementations and interop issues. Gr
Pesticide Kill your CSS layout bugs. Without 2000 clicks in Chrome Dev Tools. WTF is this? Sometimes if I am trying to sleuth a layout problem in CSS,
中文文档入口 如果对状态管理感兴趣，可以看下 Tms，文档更齐全 download git clone https://github.com/lzxb/flex.css.git npm npm install flex.css --save Why do you need flex.css? I
You-need-to-know-css CSS tricks web developers need to know View online 🌏 You-need-to-know-css Quick start Several quick start options are available:
TuiCss Text-based user interface CSS library -- Documentation -- About TuiCss is a library focused to create web applications using an interface based
Starter Responsive Dashboard Layout Starter responsive dashboard layout built with tailwindcss alpinejs See live Vue version Live Github repo Another
