分享15個優秀的CSS解決方案和工具
CSS 程式碼是很難管理,尤其是在大型專案。 樣式都寫在一個全域性作用域裡,通過複雜的選擇器來指向特定的頁面元素。冗餘、膨脹和維護可以成為前端開發人員的一場噩夢。幸運的是我們有一些 CSS 工具來幫助開發者克服這種情況。這裡集合了15款用於管理 CSS 程式碼的優秀的 CSS 工具,分享給大家。
1. Ballon.css
Balloon.css lets you create simple tooltips with pure CSS. It requires only a few lines of CSS to work, and no JavaScript. Also keep in mind that if pseudo elements are already in use on an element, the tooltip will conflict with them resulting in potential bugs.
2. Hugo
Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website. Hugo relies on Markdown files with front matter for meta data. And you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.
3. Atomizer Web
Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you’re actually using in your project (no unused styles!), or predeclare styles in configuration – it’s up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favourite task runner.
4. Repaintless
Repaintless.css in a lightweight animation library that consists only of animations that don’t cause reflows and repaints of a website when used correctly. The idea for a library came after seeing the talk by Paul Lewis on animations and FLIP technique. Basic idea is to remove transition from element, not to apply it while animating. It saves user a tiny lag before animation starts and feels super smooth. To understand the concept better you can read a blog post on that or at least this quote from the post:
5. Bemify
Bemify is a set of Sass mixins for writing maintainable, idiomatic, well-structured BEM-style .scss source code. It can be installed as a Ruby Gem, NPM module, or via Bower.
6. Stellar
Stellar is a LESS library that helps you scaffold your web apps. It’s simple to use and supported on most modern browsers.
7. StringBean
The featherweight responsive CSS Framework based on a 24-point system, rather than the traditional 12-point system that other frameworks use. Sometimes, 12 is just too few, especially on a high resolution screen, such as 4K – at 4K String Bean comes into its own! This gives the developer the power to divide the screen up in more finite segments providing you with greater control over the widths of content on your site, especially at higher resolutions (think HD & UHD (2K, 3K, 4K, and above).
8. Min
Min is a super tiny CSS framework, coming in at only 995 bytes. It has exceptional browser support and semantic markup. Min is extremely lightweight and doesn’t prescribe a certain design for you, like Bootstrap. It’s easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.
9. Voxel.css
Voxel.css makes it easy to render 3D. It supports all image types and includes GPU acceleration and CSS3 transitions.
10. Timelined
Timelined is a CSS-only vertical timeline that’s fully customizable. You can use it to create static or dynamic timelines.
11. Colorfilter
Colofilter.css lets you easily add duotone filters to photos using CSS. It’s a cool effect, but doesn’t work in every browser, so make sure you don’t use it on anything mission-critical.
12. UnMQ
UnMQ removes media queries from your CSS while preserving rules that match a hard-coded viewport. It’s useful for outputting CSS for older desktop browsers, like IE8.
13. Utlity Open Type
Utility OpenType offers simple, CSS utility classes for creating advanced typographic features. It includes common and discretionary ligatures, small caps, case sensitive forms, and much more.
14. Flexbox.help
Flexbox.help lets you test CSS flexbox rules live. It’s a great sandbox for figuring out how best to use flexbox.
15. CSSketch
CSSketch adds CSS support to Sketch 3 to speed up your workflow. Just attach a stylesheet to your designs to quickly change colors and shadows, lay out your design, and more.
編譯來源:夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
本文出處【http://www.cnblogs.com/lhb25/】
作者:山邊小溪
主站:yyyweb.com 記住啦:)
歡迎任何形式的轉載,但請務必註明出處。
相關文章
- ELK一個優秀的日誌收集、搜尋、分析的解決方案
- 美創金融脫敏解決方案,榮獲“信創安全優秀解決方案”
- 分享一個優秀的chatgpt平臺ChatGPT
- 優秀PHP優秀框架Laravel和Yii的詳解PHP框架Laravel
- 分享5款優秀的軟體工具,值得收藏
- 我不認為PG的DOUBLE BUFFERING是更優秀的解決方案
- 騰訊雲SOC方案入選CIC工信安全優秀解決方案
- 綠盟科技入圍“2022年網路安全優秀創新成果大賽”優秀解決方案
- 優秀的線上工具
- 綠盟科技零信任安全解決方案榮獲金智獎“2021年度優秀解決方案”獎
- 【譯】15個有趣的JS和CSS庫(2018.7)JSCSS
- 現代 CSS 解決方案:Modern CSS ResetCSS
- 推薦15個 JavaScript 和 CSS 庫JavaScriptCSS
- 綠盟科技榮獲“2019-2020電子政務解決方案優秀案例、優秀團隊”雙獎項
- 優秀的ftp工具:Deliver for MacFTPMac
- transitionEnd和animationEnd的一個臨時解決方案
- 優雅的快取解決方案--SpringCache和Redis整合(SpringBoot)快取GCRedisSpring Boot
- OceanBase入選啦!金融信創優秀解決方案(第二期)
- 綠盟科技斬獲“金鼎獎”年度優秀金融科技解決方案獎
- 優秀的命令列工具整理(三)命令列
- 優秀的命令列工具整理(二)命令列
- 優秀的檔案解包工具
- 替代 XShell 的兩款優秀工具
- 現代 CSS 解決方案:CSS 數學函式CSS函式
- 智和信通獲“2021年網路安全優秀創新成果大賽”解決方案入圍獎
- Java優化if-else程式碼幾個解決方案Java優化
- 喜獲殊榮|綠盟雲安全解決方案榮獲ICT中國創新獎—2020年度“優秀解決方案”
- 綠盟一體化安全運營解決方案榮獲“2021年度數字化轉型優秀解決方案獎”
- 個推百億級訊息推送的優先順序解決方案
- 優秀的mac防火牆工具:Scudo for MacMac防火牆
- 兩款優秀的VI設計作品分享
- CSS 佈局解決方案(終結版)CSS
- combineLatest 使用的一個陷阱和基於 debounceTime 的解決方案
- 物件拷貝 - 優雅的解決方案 Mapstruct物件Struct
- grpc套路(五)grpc優秀文章分享RPC
- 為您的業務選擇優秀代理解決方案:Kookeey、Oxylabs和Smartproxy海外IP代理測評
- 愛可生成功入選“2023年上海市優秀信創解決方案名單”
- 實力肯定!Coremail郵件閘道器榮獲金融信創優秀解決方案獎REMAI
- 實力登榜|江民科技“EPP”榮獲自主創新優秀解決方案“龍門獎”