- Cross-platform Desktop Application Development:Electron,Node,NW.js,and React
- Dmitry Sheiko
- 252字
- 2021-07-15 17:36:24
Defining base rules
Firstly, we will create a Base directory and place the reset styles in there:
./assets/css/Base/base.css
html {
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
nav > ul {
list-style: none;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
margin: 0;
font-family: Arial;
}
.is-hidden {
display: none !important;
}
For HTML scope, we will enable font smoothing for better font rendering.
Then, we will set box sizing of every element (*) in border-box. The default CSS box model is content-box, where width and height set to an element do not include padding and border. However, if we are setting, let's say, a sidebar width 250px, I would expect it to cover this length. With border-box, the box's size is always exactly what we set it, regardless of padding or border, but if you ask me, the border-box mode feels more natural.
We will reset indents and markers--for an unordered list--that are used for navigation (nav > ul). We make body element span the height of the entire viewport (min-height: 100vh), remove the default margin, and define the font family.
We will also introduce a global state is-hidden that can be applied on any element to remove it from the page flow. By the way, that is a good example of proactive and, therefore, permissible use of !important. By adding an is-hidden class (with JavaScript), we state that we want the element to hide, with no exceptions. Thus, we will never run into a specificity problem.
- Android和PHP開發最佳實踐(第2版)
- FreeSWITCH 1.8
- Mastering AndEngine Game Development
- PhoneGap Mobile Application Development Cookbook
- 正則表達式經典實例(第2版)
- Kinect for Windows SDK Programming Guide
- 動手學數據結構與算法
- 讀故事學編程:Python王國歷險記
- Learning Node.js for Mobile Application Development
- Neo4j權威指南 (圖數據庫技術叢書)
- C語言解惑:指針、數組、函數和多文件編程
- Python GUI設計:tkinter菜鳥編程
- 軟件定義存儲:原理、實踐與生態
- Learning Network Programming with Java
- 梔子貓的奇幻編程之旅:21天探索信息學奧賽C++編程