simpledev.css 是一個新的 CSS 框架，我將其描述為大多數無類別框架。我稱之為無類，因為許多程式碼使用類型選擇器，因此您不必添加許多類別來設定網頁樣式。有一些類，但我們盡量將它們保持在最低限度（到目前為止只有大約 42 個類）。

讓我們回顧一下下面的一些功能！

特徵

1. 大部分是無類別的設計：它基本上是無類別的，所以只要添加框架，您就會看到純 HTML 頁面發生變化。
2. 常見元素的最小類別：我們為真正常見的東西提供類別：導覽列、讓連結看起來像按鈕、基本頁尾等。
3. 以輔助功能為中心：我不是輔助功能專家，但我盡力將輔助功能最佳實踐納入框架中。因此，框架有一個跳過連結組件，一個視覺上隱藏的類，我們使用 rems 來表示字體大小。
4. 主題支援： simpledev.css 支援不同的主題。您可以僅使用淺色模式、僅使用深色模式或同時使用兩者。
5. 最少的 JavaScript： JS 非常輕。我們只使用 JS 作為導覽列元件。如果您不使用導覽列（或您使用簡單的導覽列元件），您可以完全跳過 JS！
6. 易於開始： 我們有一個入門頁面，其中包含可供您複製或下載的基本和高級模板、可供您下載或用於啟動新存儲庫的GitHub 存儲庫以及來自CodePen 的筆直接在瀏覽器中嘗試。
7. 食譜：我們還有一個食譜頁面，您可以在其中將CSS 規則複製並貼上到您的custom.css 檔案中，以獲得黏性導覽列、圓角、條紋表格和平滑滾動等內容！
8. 自訂調色盤：您可以自備調色盤。 simpledev.css 預設沒有任何顏色，因此您可以選擇自己的顏色並將其新增至框架中。
9. 模組化組件： 從技術上講，您可以下載一些組件並根據需要單獨使用它們。只需造訪 GitHub 儲存庫並下載所需的 CSS 檔案。請記住，我們在 Modern Normalize 之上開發了我們的組件，因此您可能需要合併 Modern Normalize 才能獲得相同的外觀。

背景

去年我在 GitHub 上發現了 Awesome-css-frameworks 儲存庫。它包含一長串分為不同類別的 CSS 框架。我對 Classless CSS 框架部分特別感興趣。我喜歡連結到 CSS 文件並立即更改 HTML 頁面的外觀而無需修改 HTML 的想法。

最初，我受到清單中名為 Water.css 的框架的啟發，但後來我從另一個無類別框架 Pico.css 中獲得了更多靈感。

最終我決定嘗試創建自己的框架。然而，我希望它有點不同：

• 我決定只使用 vanilla CSS 而不是 Sass。這是因為我希望其他人能夠輕鬆嘗試該框架並從原始程式碼中學習。
• 我不希望它是純粹無類的，因為我認為有些東西需要 CSS 類別。
• Pico 可能是最好看的無類 CSS 框架，但我覺得有些元素/組件有點大，所以我希望我的元素/組件更小。

結論

感謝您閱讀這篇文章！我有幾個問題想請教：

1. 請在 GitHub 上為此儲存庫加註星標！
2. 嘗試使用框架來建立一個小專案
3. 如果您發現任何問題，請在 GitHub 上建立問題
4. 如果您有任何功能請求，請在 GitHub 上發起討論
5. 如果您對組件有想法，請嘗試在 CodePen 上建立它！

如果您有任何問題或建議，請在下面留言！稍後我可能還會跟進 simpledev.css 的教學。