포트폴리오를 만들기 시작해 무료로 공개(scss의 기본 구성을 만들었다)

포트폴리오를 만들기 시작해 무료로 공개한다(Webpack4 사용해 보았다) 의 계속입니다.
 
제작 포트폴리오

과거에는 무질서하고 방대한 CSS를 유지하고 패배 한 경험이있었습니다.
죽은 눈으로 탈·CSS 무법지대. FLOCSS에 지침이있는 디자인을. 라든지 바라보면서,
자신이 다음에 무엇인가 제대로 만들 때는, CSS의 설계 방식에 준거한 형태로, 꼭 하고 싶다고 생각하고 있었습니다.

과거에 여러 가지 구그 해 보았을 때, 몇가지의 방식 중에서도, 「FLOCSS」라고 하는 설계 방식이
자신으로서는 좋은 인상이었던 기억이 있습니다.

다만, 지금은 그 일점의 습득에 걸리는 시간도 없고, 규모도 작고, 만지는 것은 자신뿐이므로,
좀 더 간단한 사상의 방식의 제안을 찾아 흉내내게 했습니다.
참고 : FLOCSS를 다룰 수없는 당신에게주는 슬림 CSS 디자인 이야기

「FLOU」라고 하는 사상인 것 같습니다.

그래서 지금의 구성이 이런 느낌.
그렇다고는 해도, 포트폴리오 제작으로, 내용의 구성은 어느 것이라도 좋을 것입니다만.



· foundation.scss
· layout.scss
· object.scss
· utility.scss

의 기본 구성 4 파일을 style.scss에 정리해 하나로 하고 있습니다.

style.scss
@import './shared/foundation.scss';
@import './shared/layout.scss';
@import './shared/object.scss';
@import './shared/utility.scss';

그리고 index.js에서 style.scss를 import하고 Webpack에서 모두 일괄로드합니다.

index.js
import './style.scss';

하고 싶은 일이 많이 있습니다만, 아직 아베 히로시의 공식 사이트에도 미치지 않습니다.



완전히 헛되게, i18next로 현지화 대응해 생각하게 가지 않고, 시간 지출해 버렸다.
그렇지만, 프런트만으로 로컬라이즈 대응하고 싶은 일은 있는 것일까?

좋은 웹페이지 즐겨찾기