ساختار کد CSS مدیریت

در این بخش توضیح مختصری از کد مدیریت ساختار CSS ما ارائه می شود.

1. بخش هدر : این کد CSS پیش فرض ناوبری است که شامل آن است.

آ. دکمه جابجایی نوار کناری

ب. رها شدن زبان

ج. رها شدن پیام

د. رها کردن اطلاعیه ها

ه. نوار جستجو

ف. رها شدن مشخصات کاربری

توجه داشته باشید:-این دسته بندی ها توسط ما تعریف شده اند و شما می توانید طبق نیاز خود تغییر دهید :)

/* 
=====================
    Navigation Bar
=====================
*/

.header-container {
    padding-top: 18px;
    padding-right: 48px;
    padding-left: 48px;
    background: #f1f2f3;
    z-index: 900;
}

==========================
    
=========================


.navbar-expand-sm .navbar-nav .cs-toggle .nav-link {
    font-size: 21px;
    margin-right: 3px;
}
.navbar-expand-sm .navbar-nav .cs-toggle .nav-link span.d-lg-inline-block {
    color: #1b55e2;
}
.navbar .navbar-nav .nav-item.cs-toggle .nav-link span {
    color: #888ea8;
}

2. سایدبار : این کد CSS بخش سایدبار است :

/* 
===============
    Sidebar
===============
*/

.sidebar-wrapper {
    width: 255px;
    position: fixed;
    z-index: 999;
    border-radius: 6px 6px;
    transition: .600s;
}

...........
...........


#sidebar ul.menu-categories ul.submenu > li ul.sub-submenu > li.active a:before {
    background-color: #1b55e2;
}
.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #3b3f5c!important;
    z-index: 998!important;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

3. پاورقی : این کد CSS قسمت پاورقی است :

/*
    ====================
        Footer
    ====================
*/

.footer-section {
    background-color: #3b3f5c;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
}
.footer-section .footer-section-2 {
    width: 50%;
    background: #fefefe;
    flex-grow: 8;
}
.footer-section .links {
    margin: 15.3px 0;
}
.footer-section .links a {
    color: #555555;
    font-size: 15px;
}
.footer-section .bottom-footer {
    margin: 0px;
    color: #555555;
    font-size: 14px;
    padding: 15.5px 0;
}
.footer-section .bottom-footer a {
    color: #1a74e9;
    border: none;
}
.scrollTop i {
    color: #181722;
    font-size: 29px;
    background: #d3d3d3;
    border-radius: 50%;
    cursor: pointer;
}
پرونده اصلی CSS

فایل main.css : این پرونده حاوی UI ، کامپوننت ها و کد عمده CSS است :

html {
    min-height: 100%
}
body {
    color: #888ea8;
    height: 100%;
    font-size: 0.875rem;
    background: #f1f2f3;
    overflow-x: hidden;
    overflow-y: auto;
    letter-spacing: 0.0312rem;
    font-family: 'Nunito', sans-serif;
}


...........
...........
...........
...........

.position-absolute { position:absolute; }
.position-static { position:static; }
.position-fixed { position:fixed; }
.position-inherit { position:inherit; }
.position-initial { position:initial; }
.position-relative { position:relative; }
سفارشی سازی SASS

حال ، همانطور که در مورد main.css و ساختار.css خود بحث کرده ایم. بگذارید در مورد پرونده های SASS بحث کنیم.

توجه داشته باشید :- این قسمت فقط برای کاربر SASS یعنی کاربرانی که عاشق رمزگذاری با SASS هستند مهم است.

در زیر ساختار SASS است که در مورد آن بحث خواهیم کرد. این یک تکه است ساختار پرونده که قبلاً بحث کرده ایم

  • sass
    • assets
      • همه پرونده های دارایی scss با توجه به پوشه های خود
      • base
        • پوشه پایه شامل پرونده های متغیرهای رنگی ، قلم ، آدرس اینترنتی و برنامه های کاربردی است
    • plugins
      • تمام پرونده های افزونه scss با توجه به پوشه های خود.

1. فولدر SASS : پوشه SASS در همان مکان قرار دارد که دارایی ها ، افزونه ها ، پوشه bootstrap در آن قرار دارد. اگر این را دیده باشید ، خواهید دانست ساختار پرونده.

2. فولدر Assets : پوشه Assets در پوشه SASS قرار دارد و معمولاً شامل کلیه پرونده های SASS (.scss) پرونده های CSS (.css) است که در پوشه دارایی قرار دارد. همچنین شامل 3 پوشه است که می خواهیم در مورد آنها بحث کنیم.

آ. Base Folder: - این پوشه پایه شامل کلیه پرونده های متغیر است.

ب. Main Folder :- این پوشه شامل بخش هایی از پرونده اصلی.css است تا بتوانید به راحتی قطعات را تغییر دهید.

ج. Structure Folder :- این پوشه شامل بخش هایی از فایل ساختار.css است تا بتوانید به راحتی هر طرح را تغییر دهید.

3. پوشه Plugins : پوشه پلاگین ها در پوشه SASS قرار دارد.

توجه داشته باشید :- پوشه افزونه حاوی پوشه اصلی خود نیست. یعنی متغیرها را از همان پوشه پایه مستقر در پوشه دارایی دریافت می کند.