더 나은 웹사이트를 위한 부트스트랩 CSS 해킹

Bootstrap은 사이트를 만들 때 많은 풀스택 개발자의 손을 잡았습니다. 우리 중 많은 사람들이 Figma를 사용하는 방법을 모르고 좋은 "디자인"이 무엇인지 확신하지 못하고 CSS 속성에 능숙하지 않습니다.

하지만 빌어먹을 우리는 데이터베이스 스키마를 만들고, 컨트롤러와 모델을 구축하고, Google에서 찾은 부트스트랩 테마를 우리의 견해에 반영하고, 오늘은 그만 두는 데 능숙합니다.

최종 결과는 일반적으로 사이트를 만든 효율성에 만족하지만 결과에 만족하지 못하는 사람을 남깁니다.

"괜찮아 보이지만 최근에 본 멋진 디자이너의 멋진 사이트 같지는 않습니다."-- 일반 풀스택 개발자.

이 문서는 부트스트랩 테마 사이트의 모양에 만족할 수 있도록 실행 가능한 디자인 팁에 대한 자습서입니다.

설정

이 무료 부트스트랩theme으로 시작하겠습니다. 이제 개선하자!

색상 확장

색상 팔레트 업데이트

부트스트랩은 여러분이 몰랐을 수도 있는 전체 색상 팔레트와 함께 제공됩니다. 다른 쿠키 커터 부트스트랩 사이트와 다르게 보이도록 활용하십시오.


이러한 색상에 액세스하려면 scss/_variables.scss 부트스트랩 파일에 색상을 추가하기만 하면 됩니다.

$theme-colors: (
  "primary":    $teal-300,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

또는 부트스트랩에 npm 설정을 사용하는 경우 컴파일되는 사용자 지정 sass 파일을 업데이트합니다.

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
$custom-colors: (
    primary: $teal-300,
);
$theme-colors: map-merge($theme-colors, $custom-colors);
@import "../node_modules/bootstrap/scss/bootstrap";

이제 시작하기 버튼을 위해 거친 부트스트랩 기본 파란색을 멋진 부드러운 청록색으로 업데이트할 수 있습니다. 또한 text-white 클래스를 제거하여 텍스트를 흰색에서 검은색으로 변경하려고 합니다. 밝은 배경색에서 가독성을 높이기 위한 것입니다.

영웅 섹션 상단에 색상 힌트 추가

탐색 상단에 작은 테두리를 추가하여 border-primary를 통해 새로운 청록색 기본 색상으로 페이지에 생명력을 불어넣을 수 있습니다.

텍스트

공통 요소의 줄 높이 변경

많은 사람들이 모르는 미묘한 변화는 텍스트가 클수록 줄 높이를 줄이는 것입니다. css 파일의 일반적인 html 요소에 대한 기본 줄 높이를 재정의해 보겠습니다.

h1 {
    line-height: 1.1;
}

h2 {
    line-height: 1.125;
}

h3 {
    line-height: 1.25;
}

p {
    line-height: 1.5;
}

문자 간격 업데이트

큰 헤드라인은 일반적으로 기본적으로 글자 간격이 큽니다. 줄 높이에 대해 했던 것처럼 css 파일을 업데이트하여 h1 및 h2 태그의 문자 간격을 좁힙니다.

h1 {
    line-height: 1.1;
    letter-spacing: -0.05em;
}

h2 {
    line-height: 1.125;
    letter-spacing: -0.025em;
}

더 무거운 헤드라인 지원 텍스트

이제 영웅의 지원 텍스트를 강화할 수 있습니다. 그것과 H1 태그 사이의 대조는 극단적입니다. 리드 클래스를 제거하고 fs-5 클래스를 제공합니다. 이것은 더 두꺼운 글꼴 두께와 함께 제공됩니다.

요약

지금까지 어디에 있었는지...

블로그 게시물 1개에서 이 테마 리팩터링을 수행하고 싶었지만 내용이 너무 많습니다. 그래서 여러 글로 나누어서 올립니다.

다음 주에 기사 2를 다시 확인하거나 thefullstackdev.net에서 내 뉴스레터를 구독하십시오. 테마의 기능 섹션을 업데이트하고 몇 가지 🔥 팁을 알려드리겠습니다.

Refactoring UI도 확인하는 것이 좋습니다. 그것은 개발자로서 디자인에 대한 나의 관점을 완전히 바꿔 놓았습니다.

✌️