CSS framework
In a large project, because too many pages, resulting in CSS code difficult to maintain and develop. So CSS framework can help us solve the problem of document management and file splitting.
CSS must first be modular processing, a module responsible for the behavior of a class action. It can be implemented using Sass or Less.
| folder | meaning |
| base | Some initial common CSS, such as resetting the default style, animation, tools, printing, etc. |
| components | All components used to build the page, such as buttons, forms, tables, and other pop |
| layout | For different portions of the page layout, such as headers, footers, elastic layout grid layout |
| pages | Placed between the pages of different styles, such as home special style, style and other special list page |
| themes | The application of different theme styles, such as managers, buyers, sellers, etc. |
| abstracts | Development of part of the auxiliary variables, functions, etc. Responsive: The placement of some |
| vendors | Place some third-party independent CSS files, such as bootstrap, iconfront etc. |
Mind mapping file structure
As a general main.scss file entry, all module files referenced
@import "abstracts/variables";
@import "abstracts/function";
@import "abstracts/media"; @import "base/reset"; @import "base/typography"; @import "base/animate"; @import "base/utilites"; @import "components/alert"; @import "components/button"; @import "components/form"; @import "components/table"; @import "layout/flex"; @import "layout/grid"; @import "layout/header"; @import "layout/footer"; @import "pages/index"; @import "pages/list"; @import "pages/detail"; @import "pages/goods"; @import "themes/admin"; @import "themes/buyer"; @import "themes/seller"; @import "themes/tourist";Note: sass file introduction, we are at the beginning of the file name underlined, but when the introduced are not underlined, because the time to introduce documents may be omitted underlined file name, which is a small feature, need to take note ! In addition, the file suffix also can be omitted.